调用着色器颜色有效
问题描述:
我与着色器工作在three.js所的第一次,我无法调整一些是很有必要的代码,其他不仅仅是改变RGBA。例如,我不能将它放在.html()
方法中。我要做的是应用10种不同的着色器颜色。调用着色器颜色有效
varying vec3 vNormal;
void main() {
float intensity = pow(0.4 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 4.0);
gl_FragColor = vec4(0, 0, 255, 1.0) * intensity; }
//gl_FragColor = vec4(0, 0, 255, 1.0) is the RGBA value
}
截至目前,我无法对我找到的那条线做任何事情,只是为了让它保持不动,所以它会起作用。我只能复制其脚本标记上的ID,调整RGBA代码并将其引用到不同的<script>
元素。但我不想这样做十次。我的代码需要高效。
整个必要的代码是这个fiddle内部。 如何更改代码,以便您轻松调用着色器颜色?
答
您需要添加一个统一的颜色。
HERE你可以看到第一个与three.js所着色器启动时我做到了。
但基本上它是像...
HTML /着色器:
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 diffuse;
void main() {
gl_FragColor = vec4(diffuse.x, diffuse.y, diffuse.z, 1.0);
}
</script>
创建JS着色器...
var uniforms = {
diffuse: { type: "c", value: new THREE.Color(0xeeeeee) }
};
var vertexShader = document.getElementById('vertexShader').text;
var fragmentShader = document.getElementById('fragmentShader').text;
material = new THREE.ShaderMaterial({
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
});
要改变颜色,改变uniforms.diffuse。值。
我的例子不包括您vNormal和强度,但你的想法。
此外,我有我的着色器在HTML中,但他们显然可以只是JavaScript变量/字符串。
您可能会发现THIS页的矿井有趣的其他实验。
255将无法编译'255'。但它会钳到1.0 – pailhead