【发布时间】：2019-07-04 08:30:19
【问题描述】：
我创建了the following fiddle 来说明我的问题。
请注意，当我在第 55 行初始化渲染器时，我包含了一个 alpha 通道：
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: aa,
alpha: true
});
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
我还在第 32 行的几何图形中添加了以下属性：
var ds = 1.0 / maxPoints;
var vertPos = new Float32Array(maxPoints);
for (var i = 1; i < maxPoints; i++)
vertPos[i] = i * ds;
geometry.addAttribute('vertPos', new THREE.BufferAttribute(vertPos, 1));
该属性是一个介于 0 和 1 之间的浮点数，对应于特定顶点沿线的距离。在 html 的第 19 行，我将此属性作为变量传递给片段着色器。在 html 的第 28 行中，我将行的 alpha 通道设置为等于此属性（您可以轻松验证 fragPos 是否正确传递到 frag 着色器）。
但是，这条线并未使用 Alpha 通道进行渲染。如果是这样，您会看到尾端慢慢淡出而不是消失。
因此，我的问题是：如何在 three.js 中用 alpha 通道渲染一行？
var canvas;
var scene;
var renderer;
var material;
var geometry;
var line;
var maxPoints = 256;
var drawCount = 1;
//intialize rendering
function init(aa, cdist, fov, lw, col) {
canvas = document.getElementById('gl_canvas');
camera = new THREE.PerspectiveCamera(fov, canvas.clientWidth / canvas.clientHeight, 1, 500);
camera.position.set(0, 0, cdist);
camera.lookAt(new THREE.Vector3(0, 0, 0));
geometry = new THREE.BufferGeometry();
var positions = new Float32Array(3 * maxPoints);
positions[0] = Math.random();
positions[1] = Math.random();
positions[2] = Math.random();
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
//ADD vertPos ATTRIBUTE
var ds = 1.0 / maxPoints;
var vertPos = new Float32Array(maxPoints);
for (var i = 1; i < maxPoints; i++)
vertPos[i] = i * ds;
geometry.addAttribute('vertPos', new THREE.BufferAttribute(vertPos, 1));
geometry.setDrawRange(0, drawCount);
material = new THREE.ShaderMaterial({
vertexShader: document.getElementById('vshader').textContent,
fragmentShader: document.getElementById('fshader').textContent,
uniforms: {
color: {
type: 'v3',
value: col
}
},
depthWrite: false,
depthTest: false,
lineWidth: lw //this always defaults to 1, unfortunately
});
scene = new THREE.Scene();
line = new THREE.Line(geometry, material);
scene.add(line);
//set up renderer WITH alpha channel
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: aa,
alpha: true
});
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
}
function shift(array) {
for (var i = 0; i < maxPoints - 1; i++) {
for (var j = 0; j < 3; j++) {
array[3 * i + j] = array[3 * i + j + 3];
}
}
}
function animate() {
requestAnimationFrame(animate);
var currentGeometry = line.geometry;
var currentPositions = currentGeometry.getAttribute('position');
var posArray = currentPositions.array;
if (drawCount < maxPoints) {
for (var i = 0; i < 3; i++)
posArray[3 * drawCount + i] = posArray[3 * drawCount - 3 + i] + 0.5 * Math.random() - 0.25;
drawCount++;
currentPositions.needsUpdate = true;
geometry.setDrawRange(0, drawCount);
} else {
shift(posArray);
for (var j = 0; j < 3; j++)
posArray[3 * maxPoints - j] = posArray[3 * maxPoints - j] + 0.5 * Math.random() - 0.25;
currentPositions.needsUpdate = true;
}
renderer.render(scene, camera);
}
init(true, 10, 60, 2, new THREE.Vector3(1, 1, 1));
animate();<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<canvas id="gl_canvas" style="background-color: black;height: 480px;width: 680px;"></canvas>
<script type="glsl" id="vshader">
attribute float vertPos; varying float fragPos; void main() { gl_Position = projectionMatrix*modelViewMatrix*vec4(position, 1.0); fragPos = vertPos; }
</script>
<script type="glsl" id="fshader">
uniform vec3 color; varying float fragPos; void main() { gl_FragColor = vec4(color, fragPos); }
</script>【问题讨论】：
标签： javascript three.js alpha