我正在绘制两个相邻的几何体并让它们旋转。问题是第一个绘制的阻碍了第二个,透明度应该生效。这两个对象应该具有相同的透明度,无论谁先被绘制。这就是混合打开而深度测试关闭的原因。 以下是图片:
两个几何体都是使用 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>
最佳答案
具有 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;
关于javascript - 三个 JS 透明度与 ShaderMaterial,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28011525/