即使设置了透明度标志,也不会使用 RawShaderMaterial 不透明度。 早在 r78 之前,我就在 r84 和版本中看到过这个问题。 我主要使用 Chrome 版本 56.0.2924.87(64 位),但在 r84 的 Firefox 中也看到了这一点。 如果设置了 RawShaderMaterial 中的不透明度,我希望我的对象使用 50% 的不透明度。
我有一个显示问题的测试 html 页面。 请注意,不透明度和透明度被传递到 RawShaderMaterial 中,但点呈现为纯蓝色:
https://jsfiddle.net/jg4ta1po/
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>
<style>
body { background-color: grey; }
#render canvas {border: 1px solid black; }
</style>
<div id="render"></div>
<script type="text/javascript">
function drawDots(scene) {
var vertices = new Float32Array( [-32, 0, 0, 32, 0, 0] );
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
var shaders = {
vertex: document.getElementById('rasterVertexShader').textContent,
fragment: document.getElementById('rasterFragmentShader').textContent,
};
var material = new THREE.RawShaderMaterial({
uniforms: {},
vertexShader: shaders.vertex,
fragmentShader: shaders.fragment,
transparent: true,
depthTest: false,
opacity: 0.5,
});
material.side = THREE.DoubleSide;
var mesh = new THREE.Points(geometry, material);
mesh.frustumCulled = false;
//TODO: Use groups
scene.add(mesh);
}
function initRenderer() {
var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
var div = document.getElementById('render');
div.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(90, 1, 1, 1000);
camera.position.z = 256;
var scene = new THREE.Scene();
//var dpr = window.devicePixelRatio ? window.devicePixelRatio : 1;
//renderer.setPixelRatio(dpr);
renderer.setSize(256, 256)
camera.aspect = 1.0;
camera.updateProjectionMatrix();
return {
renderer: renderer,
scene: scene,
camera: camera,
}
}
document.addEventListener("DOMContentLoaded", function() {
var renderer, scene, camera;
var r = initRenderer();
drawDots(r.scene);
r.renderer.render(r.scene, r.camera);
});
</script>
<script type="x-shader/x-vertex" id="rasterVertexShader">
attribute vec3 position;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
void main() {
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPosition;;
gl_PointSize = 64.0;
}
</script>
<script type="x-shader/x-fragment" id="rasterFragmentShader">
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
</script>
首先在 r78 中注意到,在那之前没有数据。
可能更多
我相信我也在 Linux (Fedora) 上看到过这个,但那是不久前的事,而不是我的电脑。
我认为这并不重要,但我在 MacBook Pro(Retina,15 英寸,2013 年末)上运行,同时使用仅独立显卡 NVIDIA GeForce GT 750M。
@clawconduce我认为它仅在您包含ShaderChunk
/ ShaderLib
。 确实如此, RawShaderMaterial
& ShaderMaterial
没有引用。 但是用在Mater
我发现了什么:
如果你想用RawShaderMaterial
调整不透明度,你应该在片段着色器中修改gl_FragColor
alpha 通道
明白了,谢谢!
我认为文档可以使用一些说明。 例如,“RawShaderMaterial( parameters )
参数 -(可选)具有定义材料外观的一个或多个属性的对象。 材质的任何属性(包括从 Material 和 ShaderMaterial 继承的任何属性)都可以在此处传入。”
我不确定更新这些的最佳方法,我可能只是添加一个例外。 如果听起来不错,我可以制作公关。
我对 WebGL 有点陌生,所以你必须原谅我的术语。 这是否也意味着每个顶点都应用了材质的不透明度? 如果我在材质上设置 50% 的不透明度,并且有 2 个重叠点,那么在它们重叠的地方颜色的不透明度会大于 50% 吗?
是的,有了RawShaderMaterial
你就靠自己了。
最有用的评论
是的,有了
RawShaderMaterial
你就靠自己了。