这个类似的我做过，如果拿shader做纯流体的话压力还是蛮大的。
其实本质就是流向如何确定，一般会让建模人员在附着纹理贴图的时候根据颜色的大小，标明方向。具体来说，比如从东到西水流流动，建模纹理贴图可以搞成0-1，这样的渐变方向。shader通过读取颜色值，去决定流体的流向。threejs上有一个案例，你可以参考一下：https://threejs.org/examples/webgl_water.html?spm=a2c6h.12873639.article-detail.9.46b133cesH28vQ
当然你通过粒子效果也可以做到更加立体，但是方向性肯定是需要预先标定的

tres有自己的循环体

const { onLoop } = useRenderLoop()
    onLoop(({ delta }) => {
        //循环render
    })

同学你好，其实实现上述效果的方法很多，你目前代码展示的效果是什么呢。以下是我实现的一个种思路，大同小异，希望对你有所帮助。

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
​
​
float gear(float teethN, float toothHW, vec2 st, float radius) {
    vec2 uv = vec2(st.x * teethN, st.y-radius);
    float x = abs((fract(uv.x)-0.5))*2.;
    float y = uv.y * sqrt(2.) * teethN;     
    return 1. - abs(y - smoothstep(0.5-toothHW, 0.5+toothHW, x)); 
   
}
​
​
void main( )
{
    vec2 uv = (gl_FragCoord.xy-.5*u_resolution.xy)/u_resolution.y;
    vec2 st = vec2((atan(uv.x, uv.y) / 6.2831)+0.5, length(uv));
    
    float a = 32.;
    float b = 0.3;  
    float g1 = gear(a, b, st + vec2(u_time*0.1,0.), 0.4);
    float g2 = gear(a, b, st + vec2(u_time*0.1,0.), 0.35);
    
    float col = smoothstep(0.9, 1., pow(max(g1, g2), 0.2));
    gl_FragColor = vec4(col, col, col,1.0);
}

上述代码关键是fract做的皱纹，这个思路效率有点低，最好还是用sin函数去实现效率更高一些。
上述代码可以在iceshader在线编辑器里面去测试。https://www.icegl.cn/addons/cms/archives/glslediter?file=test/018_diamond.frag

是模型炸开吗？可否具体一些

你这个插件引入到哪个文件里面呢，不能直接在最外层tres容器里面用，得在他子容器用

这个问题我也顺便回答一下，我也在使用的时候遇到过类似的问题，我当时解决办法是求出mesh的包围盒，去高亮的包围盒。这个方法其实没有从技术解决，只是从业务上进行改变，但是我个人感觉效果比几何体的outline还好一些。

你好，请问是哪节课的作业，我看你的意思是作业和我视频中效果不一样吗

从代码段里没有看出问题，给你几个思路排除下：
1、注销掉纹理赋值的有关代码，直接去绘制点，点的颜色赋值纯色，看能否出来。如果不出来那就看绘制点inbuffer是否有问题，如果能出来，说明就是纹理参数问题，有的时候图片也存在问题。
2、F12看一下是否有异常告警的错误，也有可能是异常告警导致的。
3、我看你div 写的cavas 中 width height有问题 应该是 width=“1280” height=“960”
4、试着修改下顶点中点的大小 gl_PointSize = 64;顶点着色器

简单说一下思路，晚上有时间我再详细阐述。
1.圆锥的顶点为起点，发出一条射线，求与点的交点也就是椭圆的圆心。
2.分别设定椭圆的长半轴与短半轴。
最后再绘制ellipsoid entity。
期待你的反馈。

你这里的orthp指的是正交投影矩阵函数吗

又真诚又优秀的一个的问题。哈哈
1.第一个问题看你已经找到答案了，我就不班门弄斧了，实际上instancedx的机理也很简单哈，【通过使用实例化，可以将大量的几何体实例共享相同的顶点数据，从而减少内存消耗并提高渲染性能。】，这和我之前在webgl绘制大量扇形的几个出发点实际上是类似的。提高性能，无非那几个方面，其余的方法都是在这几个点的基础上做的延展。
2.我理解的第二个问题是“如何高性能渲染斜纹理”，所谓的“斜纹理”其实本质还是纹理，只不过在显示上具有一些特质。我们先从理论上分析这个问题的解决方案：
(1)压缩纹理.这个我就不解释了，也是最直接、最有效的办法...
（2）使用Mipmaps。当然这个其实也就是内置多种视角小的纹理数据，这块不是专门针对你这个问题的，是在所有高效加载纹理都会遇到类似的问题。
（3）纹理合并。这个也不是特指你这个场景。
（4）shader优化。这一部分应该是和你的纹理最接近。
我们只看main函数里面的代码，

float slope  = (gl_FragCoord.y / gl_FragCoord.x);
// 如果斜率不为-1就设置为背景色
for (int i = 0; i < 1000; i++) {
    float slope = ((gl_FragCoord.y - float(20*i)) / gl_FragCoord.x);
    if (slope==-1.0) {
        gl_FragColor = vec4(0.0,0.0,0.0,1.0)
    }
}

【1】斜率表示没有问题，一般我们都是y/x，当然x/y也都可以，看实际情况选择应用。
【2】for循环效率比较低，尤其循环次数越多效率会越低。这里我们建议用fract或mod函数去实现重复或复用。
【3】if判断效率也非常低，本身if属于逻辑判断，gpu去做逻辑处理效率也很低，这里做判断建议使用setp或者smoothstep去做判断。

1、批量绘制。尝试将多个扇形组合成较少的绘制调用。比如退化三角形技术的应用
2、shader去直接绘制。跨过顶点，直接操作顶点或者片元。
3、降低精度...比如扇形的边缘点不要追求太光滑，拟合程度低一些。
4、VAO。就是将顶点或者颜色放到统一数组里面，其本质还是尽量减少调用draw函数。
我的一点见解...

你好哈，canvas你这里代指的是屏幕坐标系吗？（我猜测的哈）为啥又有[x,y,z]，但我不明白你后面讲的“怎么将二维坐标转为三维坐标”。麻烦再具体一些哈

你好，可以在vscode 插件商城里下载glsl-canvas哈