shader202103032130
/
1.onBeforeCompile修改Phong着色器代码(灰度图).html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Three.js中文网：http://www.webgl3d.cn/</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>

</head>

<body>
    <!-- 为了授课方便，把渲染器、光源等代码单独放在frame.js文件中 -->
    <script src="./frame.js"></script>
    <script>
        // 球体网格模型Mesh渲染一个地球效果
        var geometry = new THREE.SphereGeometry(100, 25, 25);
        var loader = new THREE.TextureLoader()
        var material = new THREE.MeshPhongMaterial({
            map: loader.load('./Earth.png'), // 设置材质颜色贴图
            normalMap: loader.load('./EarthNormal.png'), // 设置材质法线贴图
            normalScale: new THREE.Vector2(3, 3),
            specular: 0x444444, // 设置高光颜色属性specular
            shininess: 20, // 设置高亮程度
        });
        // GPU执行MeshPhongMaterial着色器代码前，先进行修改
        material.onBeforeCompile = function (shader) {
            // 新的片元着色器代码，替换原来的着色器代码
            shader.fragmentShader = shader.fragmentShader.replace(
                // 原来的给片元赋值的代码删除掉，重新编写加入灰度计算功能
                'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
                [
                    //计算RGB三个分量光能量之和，也就是亮度
                    'float luminance = 0.299*outgoingLight.r+0.587*outgoingLight.g+0.114*outgoingLight.b;',
                    //逐片元赋值，RGB相同均为亮度值，用黑白两色表达图片的明暗变化
                    'gl_FragColor = vec4(luminance,luminance,luminance,diffuseColor.a);',
                ].join('\n')
            );
        };
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        render();
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
    </script>

</body>

</html>