调用着色器颜色有效

我与着色器工作在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内部。如何更改代码，以便您轻松调用着色器颜色？

来源

2016-12-30 Zhyohzhy

255将无法编译'255'。但它会钳到1.0 – pailhead

您需要添加一个统一的颜色。
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 version of your fiddle

您可能会发现THIS页的矿井有趣的其他实验。

来源

2016-12-30 21:04:08 2pha

嗨，谢谢你详细的方法来回答我的问题。您的一些着色器材质看起来非常令人印象深刻。例如菲涅耳立方图！ – Zhyohzhy

你注意到网格上的小提琴的偏移吗？ “发光”更倾向于侧面而不是从中心向外发射。怎么来的？可以在上面的代码中调整吗？ – Zhyohzhy

我绝不是一个询问矢量数学是我的数学能力极差，但我怀疑它有要发送到的点函数'点的矢量做（vNormal，VEC 3（0.0，0.0，1.0 ））'。您可能需要从表面到相机的矢量作为第二个参数。 – 2pha

调用着色器颜色有效

回答

相关问题