小编Eya*_*ham的帖子

与ShaderMaterial的三个JS透明度

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

两个几何都是使用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
            });
Run Code Online (Sandbox Code Playgroud)

哪里

// 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") }
            };
Run Code Online (Sandbox Code Playgroud)

<script type="x-shader/x-vertex" id="vertexshader">
        attribute float alpha;
        attribute float …
Run Code Online (Sandbox Code Playgroud)

javascript transparency blending webgl three.js

7
推荐指数
1
解决办法
7747
查看次数

标签 统计

blending ×1

javascript ×1

three.js ×1

transparency ×1

webgl ×1