three.js所 - 如何渲染alpha通道的线？ [重复]

Question

这个问题已经在这里有一个答案：

• three.js - How can I dynamically change object's opacity? 3个回答

我创建the following fiddle来说明我的问题。

请注意，当我在初始化线55的渲染器，我包括α信道：

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线I通过这个属性的FRAG着色器作为变。在HTML中的线28 I设置线等于该属性（可以容易地验证fragPos被传递到FRAG着色器正确地）的alpha通道。

然而，该线路不被呈现带有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>

Answer 1

我怎样才能呈现three.js所用alpha通道的线？

设置.transparent对象THREE.Material的true属性：

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
    transparent: true
});

见例如，当我申请变更到你原来的代码：

var canvas, scene, renderer, material, geometry, 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, window.innerWidth / window.innerHeight, 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
    transparent: true
  });

  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(window.innerWidth, window.innerHeight);

  window.onresize = function() {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
  }
}

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>