Three.js 如何创建多色噪波着色器

我需要一个着色器，需要3种输入颜色，并产生如下所示的噪音。 借助于噪声纹理和颜色渐变节点，在Blender中很容易实现

我找到了，这可能会解决我的问题。但我无法配置颜色。而且噪音看起来比Blender中的效果要尖锐得多

---

我是否需要为此编写自己的着色器，或者是否有更简单的方法使用ThreeJS实现此效果？

基本上，您只需要两件事：

着色器中的噪波函数 梯度纹理。 我选择FBM作为噪波，并使用.onBeforeComile更改内置材质标准：

身体{ 溢出：隐藏； 保证金：0； } // https://github.com/yiwenl/glsl-fbm/blob/master/3d.glsl 常数fbm=` 定义八度音阶数5 float mod289float x{return x-floorx*1.0/289.0*289.0；} vec4 mod289vec4 x{return x-floorx*1.0/289.0*289.0；} vec4 permvec4 x{return mod289x*34.0+1.0*x；} 浮动噪声{ vec3 a=地板； vec3d=p-a； d=d*d*3.0-2.0*d； vec4b=a.xxyy+vec40.0,1.0,0.0,1.0； vec4 k1=permb.xyxy； vec4 k2=permk1.xyxy+b.zzww； vec4c=k2+a.zzzz； vec4 k3=permc； vec4 k4=permc+1.0； vec4 o1=分形k3*1.0/41.0； vec4 o2=fractk4*1.0/41.0； vec4 o3=o2*d.z+o1*1.0-d.z； vec2o4=o3.yw*d.x+o3.xz*1.0-d.x； 返回o4.y*d.y+o4.x*1.0-d.y； } 浮动fbmvec3 x{ 浮动v=0.0； 浮点数a=0.5； vec3移位=vec3100； 对于int i=0；i{ shader.uniforms.tex=uniforms.tex； shader.vertexShader=` 可变vec3 VPO； ${shader.vertexShader} `.替换 `包括`， `包括 //vPos=模型矩阵*向量4位置，1.0.xyz； vPos=矢量位置； ` ; //console.logshader.vertexShader； shader.fragmentShader=` 均匀采样2d-tex； 可变vec3 VPO； ${fbm} ${shader.fragmentShader} `.替换 `vec4漫反射颜色=vec4漫反射，不透明度；`， ` 浮动d=fbmvPos*0.5； forint i=0；i<4；i++{ d=fbmvPos*floati+1.*d； } vec3 col=texturetex，vec2d，0.5.rgb； vec4漫反射色=vec4色，不透明度` ; //console.logshader.fragmentShader； } }; 设o=新的三个网格，m； scene.addo； window.addEventListener“resize”，onWindowResize，false； renderer.setAnimationLoop=>{ o、 旋转角度y+=0.01； renderer.renderscene，摄影机； }; 函数集梯度{ 让canvas=document.getElementById'cnvsGradient'； 设ctx=canvas.getContext'2d'； 设梯度=ctx.createLinearGradient0,0,300,0； 梯度0.15，“黄色”； 渐变。添加颜色停止。5，“红色”； 梯度0.85，“蓝色”； ctx.fillStyle=渐变； ctx.fillRect0，0，canvas.width，canvas.height； 返回新的THREE.CanvasTexturecanvas； } 函数onWindowResize{ camera.aspect=内宽/内高； camera.updateProjectionMatrix； renderer.setSize innerWidth、innerHeight； }

---

基本上，您只需要两件事：

着色器中的噪波函数 梯度纹理。 我选择FBM作为噪波，并使用.onBeforeComile更改内置材质标准：

身体{ 溢出：隐藏； 保证金：0； } // https://github.com/yiwenl/glsl-fbm/blob/master/3d.glsl 常数fbm=` 定义八度音阶数5 float mod289float x{return x-floorx*1.0/289.0*289.0；} vec4 mod289vec4 x{return x-floorx*1.0/289.0*289.0；} vec4 permvec4 x{return mod289x*34.0+1.0*x；} 浮动噪声{ vec3 a=地板； 向量3D= p-a； d=d*d*3.0-2.0*d； vec4b=a.xxyy+vec40.0,1.0,0.0,1.0； vec4 k1=permb.xyxy； vec4 k2=permk1.xyxy+b.zzww； vec4c=k2+a.zzzz； vec4 k3=permc； vec4 k4=permc+1.0； vec4 o1=分形k3*1.0/41.0； vec4 o2=fractk4*1.0/41.0； vec4 o3=o2*d.z+o1*1.0-d.z； vec2o4=o3.yw*d.x+o3.xz*1.0-d.x； 返回o4.y*d.y+o4.x*1.0-d.y； } 浮动fbmvec3 x{ 浮动v=0.0； 浮点数a=0.5； vec3移位=vec3100； 对于int i=0；i{ shader.uniforms.tex=uniforms.tex； shader.vertexShader=` 可变vec3 VPO； ${shader.vertexShader} `.替换 `包括`， `包括 //vPos=模型矩阵*向量4位置，1.0.xyz； vPos=矢量位置； ` ; //console.logshader.vertexShader； shader.fragmentShader=` 均匀采样2d-tex； 可变vec3 VPO； ${fbm} ${shader.fragmentShader} `.替换 `vec4漫反射颜色=vec4漫反射，不透明度；`， ` 浮动d=fbmvPos*0.5； forint i=0；i<4；i++{ d=fbmvPos*floati+1.*d； } vec3 col=texturetex，vec2d，0.5.rgb； vec4漫反射色=vec4色，不透明度` ; //console.logshader.fragmentShader； } }; 设o=新的三个网格，m； scene.addo； window.addEventListener“resize”，onWindowResize，false； renderer.setAnimationLoop=>{ o、 旋转角度y+=0.01； renderer.renderscene，摄影机； }; 函数集梯度{ 让canvas=document.getElementById'cnvsGradient'； 设ctx=canvas.getContext'2d'； 设梯度=ctx.createLinearGradient0,0,300,0； 梯度0.15，“黄色”； 渐变。添加颜色停止。5，“红色”； 梯度0.85，“蓝色”； ctx.fillStyle=渐变； ctx.fillRect0，0，canvas.width，canvas.height； 返回新的THREE.CanvasTexturecanvas； } 函数onWindowResize{ camera.aspect=内宽/内高； camera.updateProjectionMatrix； renderer.setSize innerWidth、innerHeight； }

---

是的，您需要编写自定义着色器。我推荐BookofShaders.com作为一个很好的介绍。虽然我正在寻找一个快速的解决方案，但这本书似乎真的很好。我想我需要投入更多的时间来理解着色器。谢谢@Marquizzo，但是现在还没有，但是在这个线程中提到了几个，比如，和，虽然不知道其中是否有人使用three.js repo中的示例节点系统或者自己制作。是的，你需要编写自定义着色器。我推荐BookofShaders.com作为一个很好的介绍。虽然我正在寻找一个快速的解决方案，但这本书似乎真的很好。我想我需要投入更多的时间来理解着色器。谢谢@Marquizzo，但是还有一个问题，但是在这个线程中提到了一些，并且，虽然不知道这些人是否使用three.js repo中的示例节点系统或者自己制作。你的解决方案工作得很好，我只有一个问题：它不适应对象的大小。在某些对象上，噪波非常大，以至于整个网格只有一种颜色，而在其他对象上，噪波非常小，以至于只是纹理。如何缩放噪波以适应对象大小？@Flo尝试取消注释行//vPos=modelMatrix*vec4position，1.0.xyz；并注释掉vPos=vec3position；。谢谢你的快速回复。不幸的是，这似乎不起作用trick@Flo如果是这样的话，你可以通过提供一个例子来说明这个问题。你的解决方案非常有效，我只有一个问题：它不能适应对象的大小。在某些对象上，噪波非常大，以至于整个网格

---

只有一种颜色，而在其他物体上，噪音很小，只是颗粒。如何缩放噪波以适应对象大小？@Flo尝试取消注释行//vPos=modelMatrix*vec4position，1.0.xyz；并注释掉vPos=vec3position；。谢谢你的快速回复。不幸的是，这似乎不起作用trick@Flo如果是这样的话，您可以通过提供示例来说明问题。