![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
shader
文章平均质量分 78
Bro_Of_Nagi
这个作者很懒,什么都没留下…
展开
-
Cesium中的BoxGeometry渲染流程,及模型本地坐标
通过BoxGeometry探索Cesium中的坐标变换Cesium中有两种对象可以添加到场景中,Entity、Primitive。Entity对用户更友好,方便使用,但是灵活性和性能差一些。Primitive,支持自定义几何形状和几何对象的材质,可以实现更复杂的效果。添加Primitive为了减少需要阅读的代码量,方便调试,将primitive的asynchronous,translucent设置为false,即同步方式加载Box,几何材质为不透明。viewer.scene.primitives.a原创 2022-02-05 10:42:37 · 4628 阅读 · 4 评论 -
ThreeJS 实现等值线效果
THREE中实现等值线效果等值线如果geometry中的每个顶点有额外的数值用来着色,比如地形模型,每个几何顶点有高程值,可以通过材质实现等高线效果。等值线材质THREE中使用ShaderMaterial来作为等值线的基础材质。这里先预定义一个概念:着色值:顶点附属的观测值,如地形中的高程值。核心思想是通过片元着色器中,对GPU光栅化自动插值后的着色值进行取模,来实现固定间隔的绘制颜色。等值线的线宽暂取固定值,按像素指定。归一化为了计算方便,将着色值归一化到0-1之间,等值线的间隔也计算原创 2022-05-06 21:24:28 · 1393 阅读 · 3 评论 -
Cesium Volumn 体渲染
Cesium中的体渲染上篇介绍了Cesium中的BoxGeometry的本地坐标获取方法,获取了本地坐标后,我们就可以开始做体渲染相关的东西了。将相机坐标也换算到模型本地坐标,即可计算得到以相机为起点的到立方体的射线。体渲染相关的内容参看这篇文章,里面说明了ThreeJS中体渲染的相关内容。先上图模型本地坐标Cesium中的BoxGeometry渲染流程,及模型本地坐标这次模型使用自定义的primitive来实现,直接通过Cesium内置的position来获取本地坐标,不再通过编码后的变量原创 2022-03-17 22:08:18 · 8581 阅读 · 16 评论 -
ThreeJS 中体渲染,利用噪声模拟烟,云
ThreeJS 中体渲染,利用噪声模拟烟,云体渲染的东西也看了一段时间了,这里结合Three.js中体积云的例子,实现shdertoy中的一个效果,先放效果图。Fire2 (shadertoy.com), 这里是参考的效果,可以自行参看源码。体渲染,Volume Rendering传统建模方式,可以理解为表面建模,通过构建物体外表面,在三维中展示实际物体。相对的,体渲染是从三维数据中生成图像,典型的例子就是医疗上的CT。本文中不涉及体渲染中的光学模型,仅是对数据进行采样,上色。同时简化计算,使原创 2021-12-11 11:45:27 · 6148 阅读 · 8 评论 -
使用WebGL绘制流动虚线
使用WebGL绘制流动虚线上文中介绍了如何在片元着色器中绘制虚线,通过计算屏幕像素到折线的距离和屏幕像素投影到折线的长度可以绘制折线。接下来尝试使用WebGL2在canvas中绘制流动的折线。需解决的问题顶点数据传输shader中使用的折线顶点数据需要从外部传入,最开始考虑使用uniform vec2[]数组方式传入,但是GPU中数组上限太低,很容易就不够用了,而且数组个数声明必须使用常量,无法从外部传入数组个数,动态的构造数组。因此,我采用纹理方式传入顶点数据,采用纹理方式存储顶点数据明显优于原创 2021-06-08 20:52:28 · 1712 阅读 · 0 评论 -
如何在Shader中绘制类似虚线的折线
如何在Shader中绘制类似虚线的折线实例代码可以参考shadertoy中的[例子](line with animation (shadertoy.com))核心思想绘制折线在shader中无法通过顺序绘制的方式绘制折线,在参考现有的shadertoy中的例子后,决定采用距离场的方式绘制折线,即计算屏幕上每个像素到给定折线的距离,通过给定线宽来选取折线的范围。绘制虚线通过距离场明确线的范围后,可以将屏幕中每个像素投影到折线上,通过投影到折线上的距离来对线段进行分段,以实现间隔绘制效果。效果图如原创 2021-06-08 19:52:33 · 718 阅读 · 0 评论 -
ThreeJS绘制流动的虚线效果
Threejs绘制等距流动线three.js flow lineThree中LineMaterial中支持将线渲染为虚线样式,通过在LineMaterial中引入时间,可以使虚线动起来,产生流动效果。具体效果图如下:LineMaterialThree中绘制线,是采用instance方式来绘制的,每个线段作为一个instance进行绘制,每个instance通过着色器来生成虚线效果。绘制LineGeometry时,LineMaterial中可以通过指定dashed来将线样式渲染为虚线。直接打原创 2021-01-21 23:59:48 · 5905 阅读 · 10 评论 -
GPU中实现反距离加权插值(IDW)
利用GPU实现IDW(反距离加权插值)IDW的实现比较简单,已知插值点位比较少的情况下,可以直接遍历所有插值点,来获取临近的几个点,进行插值运算。插值点较多时,需要可以使用kd-tree来加速临近点的查找。本次仅对小数据量情况进行讨论,将IDW算法在shader中实现,可以方便的使用webgl的裁剪面和强大的并行计算。具体计算流程如下:插值点位提交到GPU数据提交,我使用了uniform数组变量来存储,在渲染过程中,直接提交插值点位的数据,数据类型为vec3,webgl我使用了twgl第三方库(为了偷原创 2020-10-25 23:36:29 · 1073 阅读 · 2 评论