CODEWITHSUNDEEP
three.jswebglshader
user3176993
user3176993

Reputation: 5

Learning threejs / webGL - color and transparency

I'm doing my best to learn threejs/webgl by diving into some code, and can't seem to find some solutions.

I'm working with the ocean2 shader (https://github.com/mrdoob/three.js/blob/master/examples/webgl_shaders_ocean2.html)

First- what are the colors used here? It doesn't appear to be HSL

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

Secondly - is it possible to change the alpha of this?

I'm trying to have an image underneath the ocean, or replace the texture all together as is done in this example (http://maevabarriere.com/installation-comestible)

I know these are vague questions, but i've been researching for days and can't seem to find any answers, so even a point in the right direction would be GREATLY appreciated. I'm excited to learn more about this!

Upvotes: 0

Views: 296

Answers (1)

WestLangley
WestLangley

Reputation: 104763

If you are learning three.js by studying the ocean shader example, you are jumping in the deep end. That example is most appropriate for users who are already familiar with shaders and three.js.

SKY_COLOR is a representation of a high-dynamic-range RGB color specific to that example only.

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

If you want the ocean to be transparent, you would have to hack the shader.

Colors in three.js are usually represented by THREE.Color. THREE.Color does not have an alpha component.

Opacity in three.js is usually specified by material.opacity.

three.js r.75

Upvotes: 1

Related Questions