Per-vertex Alpha

I’m attempting to set up multi-textured terrain using alpha-blending. This would mean multiple layers of meshes, each individually textured, each blending with the one under it to create a smooth transition between textures. I’ve done this easily before in another language, but now I’d like to use JS and THREE.js; the issue being:

THREE.js does not support per-vertex alpha.

I cannot use alpha maps as I hope to generate the terrain procedurally – potentially even infinitely. I’ve noted this feature was already requested, but closed. I’m re-opening it because I strongly believe this a very necessary feature for very simple / common things such as I’ve described above. I’m not specifically pushing that it be part of the Color API, but it would be very useful, perhaps, to at least have an optional alpha geometry attribute.

In the meantime, is there an alternative way to inject per-vertex alpha into the shader? Or must I modify the source / use something other than THREE.js? I see there is a ShaderMaterial, but I’m not fully sure how to use it. And if I still want to achieve the shadows, texturing, and other effects, must I rewrite everything in my custom shader, simply to add alpha to vertices?

Author: Fantashit

1 thought on “Per-vertex Alpha

  1. This works nicely with THREE.NodeMaterial, as well:

    var material = new THREE.PhongNodeMaterial();
    var vertexColors = new THREE.ColorsNode();
    material.color = vertexColors;
    material.alpha = new THREE.SwitchNode(vertexColors, 'w');
    material.transparent = true;

    screen shot 2018-06-05 at 12 39 28 am

Comments are closed.