shader202103032130
/
1..onBeforeCompile修改Lambert材质着色器代码.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;
        }
    </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>
        var height = 50; //几何体体高度值
        var geometry = new THREE.BoxBufferGeometry(50, height, 50, 1);
        // var geometry = new THREE.CylinderBufferGeometry(50,50, height, 30, 30);
        geometry.translate(0, height / 2, 0)

        //几何体顶点数量
        var alphaArr = []; //每个顶点创建一个透明度数据(随着高度渐变)
        for (var i = 0; i < geometry.attributes.position.count; i++) {
            alphaArr.push(1 - geometry.attributes.position.getY(i) / height);
        }
        // BufferGeometory自定义一个.attributes.alpha属性,类比.attributes.position
        // 几何体的属性.alpha和顶点着色器变量alpha是对应的
        geometry.addAttribute('alpha', new THREE.BufferAttribute(new Float32Array(alphaArr), 1));
        var material = new THREE.MeshLambertMaterial({
            color: 0x00ffff,
            side: THREE.DoubleSide, // 双面可见
            transparent: true, //需要开启透明度计算，否则着色器透明度设置无效
            //不进行深度测试渲染效果好像好很多  不过对plane几何体没影响   主要是叠加的问题
            // 如果是球体，不排除深度测试   特定角度  碎三角形感觉
            depthTest: false,
        });
        // GPU执行material对应的着色器代码前，通过.onBeforeCompile()插入新的代码，修改已有的代码
        material.onBeforeCompile = function (shader) {
            // 插入代码：在顶点着色器主函数'void main() {'前面插入alpha变量的声明代码
            shader.vertexShader = shader.vertexShader.replace(
                'void main() {',
                ['attribute float alpha;//透明度分量',
                    'varying float vAlpha;',
                    'void main() {',
                    'vAlpha = alpha;',// 顶点透明度进行插值计算
                ].join('\n')// .join()把数组元素合成字符串
            );
            // 插入代码：片元着色器主函数前面插入`varying float vAlpha;`
            shader.fragmentShader = shader.fragmentShader.replace(
                'void main() {',
                ['varying float vAlpha;',
                    'void main() {',
                ].join('\n')
            );
            // 修改原来的代码：把原来的删除，然后替换为新的代码
            shader.fragmentShader = shader.fragmentShader.replace(
                'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
                'gl_FragColor = vec4( outgoingLight, diffuseColor.a*vAlpha  );');
        };
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render);
            // console.log(camera.position)
        }
        render();
    </script>

</body>

</html>