調用着色器顏色有效

我與着色器工作在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

調用着色器顏色有效

回答

相關問題