three.js 中的 idTech 4 顶点混合技术

Question

我想实现 idTech 4 引擎的顶点混合技术。我在 article 中找到了解释，但我仍然不明白如何在 three.js 中进行解释。我想我需要 THREE.ShaderMaterial 和某种着色器。谁能告诉我从哪里开始？

Answer 1

我认为这个问题太宽泛了。您将需要阅读着色器和 how they work。简洁的答案是在你的片段着色器中，你将 2 个纹理和顶点颜色作为输入，并使用顶点颜色的 alpha 值在它们之间混合。

varying vec2 v_texcoords;
varying vec4 v_color;         // vertex colors
uniform sampler2D u_texture1; 
uniform sampler2D u_texture2; 

...

// get color from first texture
vec4 color1 = texture2D(u_texture1, v_texcoords);
// get color from second texture
vec4 color2 = texture2D(u_texture2, v_texcoords);

// blend between the colors based on vertex alpha
vec4 output = mix(color1, color2, v_color.a);

由于您正在编写着色器，尽管您可以有无限的变化。也许您想要 4 个纹理并使用顶点颜色 r、g、b、a 来选择每个纹理的数量。也许您需要 2 组独立的 UV 坐标，而不是像上面的示例那样只需要一组。也许您想在 Alpha 选择 0 到 N 的 N 个纹理之间混合。

最重要的是，如果您的材质不仅仅是一种颜色，还包括法线贴图或其他类型的数据（高光贴图、光泽贴图...），您还需要决定如何混合它们.

three.js 中的 idTech 4 顶点混合技术

idTech 4 vertex blend technique in three.js

webgl

three.js