shawn0326 / zen-3d

JavaScript 3D library.
MIT License
196 stars 24 forks source link

Just some alpha discussion #12

Closed VanderSP closed 4 years ago

VanderSP commented 4 years ago

in water shader you have '#include ',

i tried to enable fog but... the water goes white lol

anyway, it´s hard to achieve horizon fadeout effect? i created a gradient black white square 512 512

how i can attach something like this?

ifdef USE_ALPHAMAP

diffuseColor.a *= texture2D( alphaMap, vUv ).g;

endif

Xie Shawn!

VanderSP commented 4 years ago

maybe a bit off-topic, one day i found this article interesting, i dunno if you know it:

https://limnu.com/webgl-blending-youre-probably-wrong/

VanderSP commented 4 years ago

OFF-TOPIC: about that thing we talked about (caching sun skybox), i found that in my J5 when dont touch sky, it goes to 27fps, touching sky, 6fps....

but using that direct technique i did, i think it got 22 stable... so capture is more expensive than caching? ok if not recapturing it goes to 27, but, maybe throttle a bit well, what i want to say is... in my method the sun is beautifull... but why capturing it looks pixelated? envmappass capture has some resolution option?

shawn0326 commented 4 years ago

Try to modify mirrorShader in Water.js.

Add alpha map and uv in vertex shader:

attribute vec2 a_Uv;
uniform sampler2D alphaSampler;
varying vec2 vUv;
// ...
main {
// ...
vUv = a_Uv;
}

fragment shader:

main {
// ...
gl_FragColor.a *= texture2D( alphaSampler, vUv );
}
uniforms: {
  alphaSampler: { value: null }
}

and then pass your alpha texture to water.material.uniforms.alphaSampler

envmappass capture has some resolution option?

Set custom resolution by this:

let cubeRenderTarget = new zen3d.RenderTargetCube(2048, 2048);
let environmentMapPass = new zen3d.EnvironmentMapPass(cubeRenderTarget);
VanderSP commented 4 years ago

Oh thanks, I cant wait to sleep and wake to try it! Many Thanks bro!