three.js着色器材质

最新推荐文章于 2025-03-08 00:30:00 发布

原创

最新推荐文章于 2025-03-08 00:30:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#着色器 #材质 #webgl #图形渲染

本文介绍了如何在Three.js中使用RawShaderMaterial创建自定义着色器，包括编写基本着色器、组织代码、使用属性和Uniforms，以及添加纹理贴图。着重讲解了MVP矩阵的作用和如何传递属性和Uniforms以控制性能和动画效果。

当Three.js内置的材质不能满足需求时，就需要通过编写着色器来实现了
也可能是出于性能原因。像MeshStandardMaterial这样的材料非常复杂，涉及大量的代码和计算。如果我们编写自己的着色器，我们可以将功能和计算保持在最低限度。我们可以更好地控制性能。
编写指定要着色器也是向渲染结果添加后处理效果的绝佳方式

[1]RawShaderMaterial

要创建一个着色器，我们需要创建一个特定的材质。这个特定的材质可以时着色器材质ShaderMaterial或者原始材质RawShaderMaterial, 它们的区别是ShaderMaterial会自动将一些代码添加到着色器代码中，而RawShaderMaterial则不会。
这里从比较原始的RawShaderMaterial实验：

// Geometry
const geometry = new THREE.PlaneGeometry(1, 1, 32, 32)

// Material
const material = new THREE.RawShaderMaterial({
   
   
    vertexShader: `
      uniform mat4 projectionMatrix;
      uniform mat4 viewMatrix;
      uniform mat4 modelMatrix;
      
      attribute vec3 position;
      
      void main(){
          gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      precision mediump float;
      
      void main(){
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
  `
  })

// Mesh
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

更好的写法是将着色器拆分写到不同文件中
这里可以分别创建vertex.glsl、fragment.glsl文件，将组织到某个文件夹下，因为一个项目通常有很多个着色器代码。

在vite中import shader文件（.glsl）问题
在vite中import shader文件（.glsl）问题，不需要安装插件，只需在导入文件的结尾添加一个?raw符号，vite会将改文件的内容解析为字符串导入
import vertexShader from "./../shader/particels_vs.glsl?raw"
import fragmentShader from "./../shader/particels_fs.glsl?raw"
使用其他打包构建工具估计也需要进行配置才能使用.glsl文件
例如在webpack中则需要添加：一个rules