详解three.js的着色器，能够实现哪些效果？

贝格前端工场

于 2025-03-08 00:30:00 发布

阅读量1.7k

点赞数 49

文章标签： javascript 着色器开发语言

本文链接：https://blog.csdn.net/m0_57344393/article/details/146088662

版权

二、片元着色器（Fragment Shader）

片元着色器决定每个像素的最终颜色，用于光照、纹理和颜色处理：

风格化渲染

- 卡通着色（Toon Shading）：离散化光照强度，形成色块边界。
- 素描效果：使用噪声纹理模拟手绘笔触。

动态材质

- 火焰/熔岩：通过噪声纹理（如 Perlin Noise）和颜色渐变模拟动态效果。
- 全息投影：结合时间变量生成彩虹色条纹和透明度变化。

环境交互

- 水面反射/折射：基于法线贴图和菲涅尔效应，混合环境贴图颜色。
- 动态折射：模拟透镜或水下扭曲效果。

溶解与消融

- 使用噪声纹理作为遮罩，控制片元的透明度阈值，实现边缘溶解效果。

三、组合应用（顶点 + 片元着色器）

复杂光照模型

- 实现自定义光照（如 Phong、Blinn-Phong 或 PBR），超越 Three.js 内置材质限制。

变形 + 材质动画

- 顶点着色器驱动几何形变，片元着色器处理动态纹理（如旋转的漩涡）。

体积效果

- 光线步进（Raymarching）模拟雾效、体积光或云层。

四、后处理效果（Post-Processing）

通过 EffectComposer 链式调用着色器，实现屏幕空间特效：

模糊（Gaussian/径向模糊）
边缘检测（Sobel 算子）
颜色分级（LUT 调色）
辉光（Bloom）：提取高亮区域并模糊叠加。

五、代码示例（Three.js 中实现自定义着色器）

// 1. 创建着色器材质
const material = new THREE.ShaderMaterial({
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    varying vec2 vUv;
    uniform vec3 color;
    void main() {
      gl_FragColor = vec4(color, 1.0);
    }
  `,
  uniforms: {
    color: { value: new THREE.Color(0xff0000) }
  }
});

// 2. 应用于网格
const mesh = new THREE.Mesh(geometry, material);

六、典型效果案例

动态地形：顶点着色器根据高度图位移顶点，片元着色器混合纹理。
全息角色：片元着色器结合菲涅尔效应和扫描线动画。
交互式水流：根据点击位置动态修改顶点，片元着色器添加波纹高光。

详解three.js的着色器，能够实现哪些效果？

2025-02-26 21:38·大象数据工场

Three.js 的着色器允许开发者通过编写 顶点着色器 和 片元着色器（基于 GLSL 语言）直接控制 GPU 渲染流程，从而实现高度定制化的图形效果。

一、顶点着色器（Vertex Shader）

顶点着色器负责处理每个顶点的位置、法线等属性，常用于几何变形和动态效果：

动态形变

vec3 newPosition = position + normal * sin(time) * 0.5;

- 波浪效果：通过时间变量和三角函数（如 sin、cos）修改顶点位置，模拟水面波动。
- 膨胀/收缩：根据顶点法线方向偏移位置，实现模型膨胀或收缩动画。

粒子系统

- 控制粒子位置、大小和运动轨迹（如星空、烟雾），结合 gl_PointSize 调整粒子尺寸。

形变动画（Morph Targets）

- 在顶点间插值，实现形状渐变（如从球体变为立方体）。

布料模拟

- 结合物理公式（如质点-弹簧模型）计算顶点位置，模拟布料飘动。