ThreeJS入门（147）：THREE.ShaderLib 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

在这里插入图片描述

查看本专栏目录 - 本文是第 147篇入门文章

文章目录

THREE.ShaderLib 是 Three.js 中的一个对象，它包含了一系列预定义的着色器程序，这些着色器程序被设计用于实现特定的效果或功能。通过 THREE.ShaderLib，开发者可以快速地使用这些预定义的着色器程序来渲染不同的材质效果，而无需从头开始编写复杂的着色器代码。

结构

THREE.ShaderLib 包含了多个预定义的着色器程序，每个程序都有一个唯一的名字。每个着色器程序又包含了顶点着色器（vertex shader）和片段着色器（fragment shader）的定义，以及其他相关的配置信息。

常见的着色器程序

以下是 THREE.ShaderLib 中一些常见的着色器程序：

lambert：标准的 Lambertian 着色器，适用于漫反射材质。
phong：Phong 着色器，支持高光和镜面反射。
standard：标准着色器，包含物理基材质属性，如金属度（metalness）、粗糙度（roughness）等。
normal：显示法线的着色器。
basic：基本着色器，不支持光照计算。
meshphysical：物理基着色器，类似于 standard，但更加现代化，并支持更多的物理属性。
points：用于渲染点云的着色器。
shadowmap：用于渲染阴影贴图的着色器。
depth：用于渲染深度贴图的着色器。

示例：使用预定义的着色器

假设我们需要使用 THREE.ShaderLib 中的 standard 着色器来渲染一个物体：

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建一个 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
    
    
    color: 0x00ff00,
    metalness: 0.5,
    roughness: 0.5
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加光线来照亮场景
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 1).normalize();
scene.add(light);

// 渲染循环
function animate() {
    
    
    requestAnimationFrame(animate);

    // 更新立方体的旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}
animate();

在这个示例中，我们使用了 THREE.MeshStandardMaterial，它内部使用了 THREE.ShaderLib 中的 standard 着色器程序。这个着色器程序支持物理基材质属性，如金属度（metalness）和粗糙度（roughness）。

查看着色器定义

可以通过访问 THREE.ShaderLib 的具体着色器来查看其定义：

扫描二维码关注公众号，回复： 17452792 查看本文章

console.log(THREE.ShaderLib.standard.vertexShader);
console.log(THREE.ShaderLib.standard.fragmentShader);

自定义着色器

虽然 THREE.ShaderLib 提供了许多预定义的着色器，但在某些情况下，你可能需要自定义自己的着色器。你可以通过复制现有的着色器定义并进行修改来实现这一点。

例如，如果我们想要自定义一个着色器来添加一些特殊效果：

const customShader = {
    
    
    uniforms: THREE.UniformsUtils.merge([
        THREE.ShaderLib.standard.uniforms,
        {
    
    
            // 添加自定义的uniform变量
            customUniform: {
    
     value: new THREE.Color(0xff0000) }
        }
    ]),
    vertexShader: THREE.ShaderLib.standard.vertexShader + `
        // 添加自定义的顶点着色器代码
        varying vec4 customVarying;
        void main() {
            customVarying = vec4(1.0, 0.0, 0.0, 1.0);
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: THREE.ShaderLib.standard.fragmentShader + `
        // 添加自定义的片段着色器代码
        varying vec4 customVarying;
        void main() {
            vec4 diffuseColor = vec4(diffuse, opacity);
            gl_FragColor = diffuseColor * customVarying;
        }
    `
};

// 使用自定义着色器创建材质
const material = new THREE.ShaderMaterial(customShader);

在这个例子中，我们扩展了 THREE.ShaderLib.standard 着色器，并添加了自定义的 uniform 和 varying 变量，以及自定义的着色器代码。

总结

THREE.ShaderLib 是 Three.js 中用于包含预定义着色器程序的对象。通过使用这些预定义的着色器程序，开发者可以快速地实现不同的材质效果，而无需从头开始编写复杂的着色器代码。常见的着色器程序包括 Lambertian、Phong、Standard、Normal 等。

在实际开发中，可以根据需要选择合适的着色器程序，并通过自定义来扩展或修改这些着色器，以实现特定的效果或功能。

需要注意的是，Three.js 的版本可能会有所不同，因此具体的方法和属性可能会有所变化。在实际使用时，请参考最新的 Three.js 文档。