如何在Kick.js着色器编辑器中添加第二个纹理均匀

Question

如何在Kick.js着色器编辑器中添加第二个纹理制服，以便我的着色器可以使用它？ Kick.js的URL是： http://www.kickjs.org/example/shader_editor/shader_editor.html

我修改了Kick.js中的默认着色器。它使用一个纹理。我成功地使用“纹理”面板通过引用我在images.google.com上找到的图像来添加第二个纹理。

现在的问题是'Uniforms'面板没有显示纹理采样器的均匀性。如何让这件制服出现？

顺便说一句，这是我的着色器代码。但是，我不相信这段代码是问题的一部分。谢谢你的帮助。

#ifdef GL_ES
precision highp float;
#endif
varying vec3 vColor;
varying vec2 uv;

uniform sampler2D video_tex;
uniform sampler2D video_mask;

void main(void)
{
    vec4 samp_video = texture2D(video_tex,uv);
    vec4 samp_mask = texture2D(video_mask,uv);

    vec3 samp_virtual = vec3(1,0,0);

    float alpha = samp_mask.r;
    //gl_FragColor.rgb = (alpha)*samp_virtual.rgb + (1.0-alpha)*samp_video.rgb;
    gl_FragColor.rgb = samp_mask.rgb;  
    gl_FragColor.a = 1.0;
}

Answer 1

您的代码工作正常：）

您需要将纹理绑定到统一变量。该过程分为两个步骤：

1. 设置纹理（在“纹理”面板中）。
2. 设置制服以将统一变量绑定到纹理