Three.js: Per-vertex Alpha

[CodeSmith32]

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?

[pailhead]

Yes.

My suggestion is to follow the pattern of:

1. find what logic needs to be replaced:
   https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/color_pars_vertex.glsl

varying vec4 vColor;

1. Replace THREE.ShaderChunk globally
   .javascript THREE.ShaderChunk.color_pars_vertex = overrideChunk
2. Use #define and material.defines to control which branch you want the shader to hit

---

onBeforeCompile
I strongly advise against this.

Similar to the previous suggestion, you wouldn't replace THREE.ShaderChunk but use material.onBeforeCompile = shader=>{} someone else may be able to better explain how to use this. I hate it.

[mrdoob]

I am not sure what level of control you need, but sounds like RawShaderMaterial may be what you're after.

This example uses per-vertex alpha:
https://threejs.org/examples/?q=buffer#webgl_buffergeometry_rawshader

[donmccurdy]

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;