Die Deckkraft von RawShaderMaterial wird nicht verwendet, selbst wenn das Transparenz-Flag gesetzt ist. Ich habe dieses Problem in r84 und Versionen bis zu r78 gesehen. Ich habe hauptsächlich Chrome Version 56.0.2924.87 (64-Bit) verwendet, habe dies aber auch in Firefox für r84 gesehen. Ich erwarte, dass meine Objekte eine Deckkraft von 50% verwenden, wenn die Deckkraft im RawShaderMaterial festgelegt ist.
Ich habe eine HTML-Testseite, die das Problem zeigt. Beachten Sie, dass die Deckkraft und Transparenz an das RawShaderMaterial übergeben werden, die Punkte jedoch durchgehend blau gerendert werden:
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>
Zuerst in r78 bemerkt, keine Daten vor diesem Zeitpunkt.
Wahrscheinlich mehr
Ich glaube, ich habe das auch unter Linux (Fedora) gesehen, aber das ist schon eine Weile her und nicht mein Computer.
Ich glaube nicht, dass es signifikant ist, aber ich laufe auf einem MacBook Pro (Retina, 15-Zoll, Ende 2013) und verwende ausschließlich diskrete Grafikkarten NVIDIA GeForce GT 750M.
@clawconduce Ich denke, es ist nur für den Gebrauch gedacht, wenn Sie Teile von ShaderChunk
/ ShaderLib
einfügen . Es stimmt, es gibt keine Referenz in RawShaderMaterial
& ShaderMaterial
. Aber es wird in Mater
Was ich fand:
Wenn Sie die Deckkraft mit RawShaderMaterial
anpassen möchten, sollten Sie den Alphakanal in gl_FragColor
in Ihrem Fragment-Shader ändern
Ich verstehe, danke!
Ich denke, die Dokumente könnten eine Klarstellung gebrauchen. Beispiel: "RawShaderMaterial( Parameter )
Parameter - (optional) ein Objekt mit einer oder mehreren Eigenschaften, die das Aussehen des Materials definieren. Alle Eigenschaften des Materials (einschließlich aller von Material und ShaderMaterial geerbten Eigenschaften) können hier übergeben werden."
Ich bin mir nicht sicher, wie ich diese am besten aktualisieren kann, ich würde wahrscheinlich nur eine Ausnahme hinzufügen. Ich könnte die PR machen, wenn das OK klingt.
Ich bin ein wenig neu in WebGL, also müssen Sie meine Terminologie entschuldigen. Bedeutet dies auch, dass die Deckkraft eines Materials pro Scheitelpunkt angewendet wird? Wenn ich 50% Deckkraft auf das Material lege und 2 überlappende Punkte habe, wo sie sich überlappen, hat die Farbe dann >50% Deckkraft?
Ja, mit einem RawShaderMaterial
bist du allein.
Hilfreichster Kommentar
Ja, mit einem
RawShaderMaterial
bist du allein.