yue1241630499的博客

产生马赛克的原因是所有数据都是真实数据，未对采样结果进行插值处理,中采用的是Nearest，所有采样结果都是基于真实数据的，即在不同位置处进行采样时，会查找相邻的最近体素的数据，用来当作当前位置的体素，所有采样结果会出现马赛克效果。修改为LINEAR即采用线性插值方法，而不是最近的体素值，结果即可比较平滑。

Cesium中使用Sample3D，进行体渲染

在Cesium中绘制动态线段以下实现方法均属野路子。理想中，可以扩展polylinegeometry增加一个customdata属性用于提交除位置外的其他顶点数据，类似于下文使用的color计划实现类似于蚂蚁线的效果，在Cesium中翻看各种材质，没法发现满足条件的material或Appearance。那么只能自己手工实现了。基本思路传递顶点时，附加每个顶点距线段起点的距离，用此距离来实现线段分段shader中对传入的距离取模，即可实现分段绘制不通的颜色使用fabric查看了fa

使用WebGL绘制流动虚线上文中介绍了如何在片元着色器中绘制虚线，通过计算屏幕像素到折线的距离和屏幕像素投影到折线的长度可以绘制折线。接下来尝试使用WebGL2在canvas中绘制流动的折线。需解决的问题顶点数据传输shader中使用的折线顶点数据需要从外部传入，最开始考虑使用uniform vec2[]数组方式传入，但是GPU中数组上限太低，很容易就不够用了，而且数组个数声明必须使用常量，无法从外部传入数组个数，动态的构造数组。因此，我采用纹理方式传入顶点数据，采用纹理方式存储顶点数据明显优于

如何在Shader中绘制类似虚线的折线实例代码可以参考shadertoy中的[例子](line with animation (shadertoy.com))核心思想绘制折线在shader中无法通过顺序绘制的方式绘制折线，在参考现有的shadertoy中的例子后，决定采用距离场的方式绘制折线，即计算屏幕上每个像素到给定折线的距离，通过给定线宽来选取折线的范围。绘制虚线通过距离场明确线的范围后，可以将屏幕中每个像素投影到折线上，通过投影到折线上的距离来对线段进行分段，以实现间隔绘制效果。效果图如