三个 JS 透明度与 ShaderMaterial答案

【问题标题】：Three JS transparancy with ShaderMaterial三个 JS 透明度与 ShaderMaterial
【发布时间】：2015-03-16 16:26:25
【问题描述】：

我正在绘制两个相邻的几何图形并让它们旋转。问题是第一个绘制的阻碍了第二个，透明度应该生效。无论谁先绘制，这两个对象都应具有相同的透明度。这就是打开混合并关闭深度测试的原因。以下是图片：

两个几何图形都是使用 THREE.ShaderMaterial 的点云，如下所示：

var shaderMaterial = new THREE.ShaderMaterial({
                uniforms: uniforms,
                attributes: attributes,
                vertexShader: document.getElementById('vertexshader').textContent,
                fragmentShader: document.getElementById('fragmentshader').textContent,
                blending: THREE.NormalBlending,
                depthTest: false,
                transparent: true
            });

在哪里

// attributes
attributes = {
                size: { type: 'f', value: null },
                alpha: { type: 'f', value: [] },
                customColor: { type: 'c', value: null }
            };

 // uniforms
uniforms = {
             color: { type: "c", value: new THREE.Color(0x00ff00) },
             texture: { type: "t", value: THREE.ImageUtils.loadTexture("../textures/sprites/circle.png") }
            };

和

<script type="x-shader/x-vertex" id="vertexshader">
        attribute float alpha;
        attribute float size;
        attribute vec3 customColor;        
        varying float vAlpha;
        varying vec3 vColor;
        void main() {
        vAlpha = alpha;
        vColor = customColor;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize =  size * ( 120.0 / length( mvPosition.xyz ));
        gl_Position = projectionMatrix * mvPosition;
        }
    </script>
<script type="x-shader/x-fragment" id="fragmentshader">
        uniform vec3 color;
        uniform sampler2D texture;
        varying float vAlpha;
        varying vec3 vColor;
        void main() {
        gl_FragColor = vec4( vColor, vAlpha );
        gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
        }
    </script>

【问题讨论】：

试试material.alphaTest = 0.5。如果这不起作用，你能提供一个简单的实时链接吗？
在哪里添加 material.alphaTest = 0.5 到？
对不起。由于您使用的是ShaderMaterial，因此您必须自己处理：if ( gl_FragColor.a < 0.5 ) discard;
谢谢，但是这个更改只是丢弃了一些顶点，使对象更加透明，因为点云对象不那么“拥挤”。
我将在哪里托管它？你知道我可以上传代码的网站吗？谢谢！

标签： javascript three.js webgl transparency blending

【解决方案1】：

具有 2 种纹理的示例代码，但也可以使用其中一种：

<script id="fragmentShaderLoader" type="x-shader/x-fragment">
        uniform float percent;

        uniform sampler2D texture1;
        uniform sampler2D texture2;

        varying vec2 vUv;

        void main() {
            gl_FragColor = texture2D( texture1, vUv);
            vec4 tex2 = texture2D( texture2, vUv );
            if(tex2.a - percent < 0.0) {
                gl_FragColor.a = 0.0;
                //or without transparent = true use
                //discard; 
            }

        }

    </script>

    <script id="vertexShaderLoader" type="x-shader/x-vertex">
        varying vec2 vUv;

        void main()
        {
            vUv = uv;

            vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
            gl_Position = projectionMatrix * mvPosition;
        }
    </script>

然后进行初始化：

uniformsMove = {
                    percent: { type: "f", value: 1.0 },
                    texture1: { type: "t", value: (new THREE.TextureLoader()).load( "govr/loader-test.png" ) },
                    texture2: { type: "t", value: (new THREE.TextureLoader()).load( "govr/loader-mask2.png" ) } 
                };

            material = new THREE.ShaderMaterial( {
                uniforms: uniformsMove,
                vertexShader: document.getElementById( 'vertexShaderLoader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentShaderLoader' ).textContent

            } );
material.transparent = true;

【讨论】：