学习threejs / webGL - 颜色和透明度

时间:2016-03-24 18:49:35

标签: three.js webgl shader

我正在尽力通过深入研究一些代码来学习threejs / webgl,似乎无法找到一些解决方案。

我正在使用ocean2着色器(https://github.com/mrdoob/three.js/blob/master/examples/webgl_shaders_ocean2.html

首先 - 这里使用的颜色是什么?它似乎不是HSL

 OCEAN_COLOR: new THREE.Vector3(0.004, 0.016, 0.047),
 SKY_COLOR: new THREE.Vector3(3.2, 9.6, 12.8),

其次 - 是否有可能改变其中的α?

我正在尝试在海洋下面创建一个图像,或者像在此示例中一样替换纹理(http://maevabarriere.com/installation-comestible

我知道这些是模糊的问题,但我已经研究了几天,似乎找不到任何答案,所以即使是正确方向的一点,也会非常感激。我很高兴能够了解更多相关信息!

1 个答案:

答案 0 :(得分:1)

如果您通过研究海洋着色器示例来学习three.js,那么您就是在深入探索。该示例最适合已熟悉着色器和three.js的用户。

SKY_COLOR表示仅针对该示例的高动态范围RGB颜色。

https://github.com/mrdoob/three.js/blob/master/examples/js/shaders/OceanShaders.js

如果您希望海洋透明,则必须破解着色器。

three.js中的颜色通常由THREE.Color表示。 THREE.Color没有alpha分量。

three.js中的不透明度通常由material.opacity指定。

three.js r.75