Cloud procedural texture alpha

[The Snow Irbix]

Hello everybody !

 

I have a little probleme about cloud procedural texture,

I wanna some transparency on my cloud.

 

The doc say :

• CloudProceduralTexture
  • skyColor is the color for the sky (BABYLON.Color3/4)
  • cloudColor is the color for the cloud (BABYLON.Color3/4)

But BABYLON.Color4 seems to not be support...

 

A demonstration :

http://www.babylonjs-playground.com/#24C4KC

[Wingnut]

http://www.babylonjs-playground.com/#24C4KC#9

 

I see the patio, through the sphere's alpha, now.  I assigned the texture as an opacityTexture in line 155... seems to work.  I also adjusted the texture level, reduced the sphere size, and changed the camera position, for testing purposes.

 

Panning the camera up/down shows a strange jaggy line passing across the cloud sphere (FF 39).  I'm not sure what is causing that.  Be well.

 

Update: It was the directionalLight that was causing the horizontal jaggy line.  http://www.babylonjs-playground.com/#24C4KC#10

(I turned-off the directional and turned-on a no-ground-color hemisphericLight - aimed at the sky... cuz that's how they work best.)

 

Just in case it is important,  DirectionalLights have no .groundColor... that's for hemisphericLights only.  But that might have been a mistake that was already in the demo... before you started. 

 

A nice groundColor setting for a hemi light... is our pre-made Gray() color.

 

http://www.babylonjs-playground.com/#24C4KC#12

 

(line 106).  It lights the bottom of mesh real nicely.  Notice that the line doesn't require 'new'.  We know all this already, don't we?  Good ol' Wingnut, yappin' away. 

[jerome]

You could have your sky sphere built with side orientation set to BABYLON.Mesh.BACKSIDE, keep backFaceCulling on its material and have specular on the sphere also.

[The Snow Irbix]

Thank you very much Wingnut ! It's very nice !

And I don't find how does the BABYLON.Mesh.BACKSIDE work, have you a documentation about it ? a link ?

[iiceman]

You can use it when creating the mesh:

var boxCloud = BABYLON.Mesh.CreateSphere("boxCloud", 100, 500, scene, true, BABYLON.Mesh.BACKSIDE);

[Wingnut]

Cool, you guys.  Hey Irbix... are you planning having 2 cloud spheres... one for high clouds, one for low (a little sphere inside a bigger one)?  Do you want to see the high clouds through the gaps in the low clouds?  That would be interesting.  Rotate them at slightly different speeds?  Yum... maybe. 

[jahow]

It's true there seems to be a problem though: http://www.babylonjs-playground.com/#24C4KC#13

 

In this example the red part of the sky should be slightly transparent, since I passed a color with alpha value  < 1. But this value does not seem to be taken into account in the procedural texture generation!

[Wingnut]

http://www.babylonjs-playground.com/#24C4KC#14  Weird.  The only shape that can be seen through jahow's transparent clouds... is the fire-textured sphere (fontainSculptur2 - line 41 - I made it bigger), and the angle of viewing it, matters (I sped-up that camera pan).  It sometimes disappears.  *scratch scratch*  I'm scared.    I have a 'frontside' on line 149.

 

Using the fire proc texture on the cloud sphere... things act better.

 

http://www.babylonjs-playground.com/#24C4KC#15

 

If I remember right, there is a thread nearby that talked about Fire's alpha, and I think Dad72 and Meulta had some cool discussions, which led to some tweaks.  Maybe the same tweaks need to happen to our cloud proc.  *shrug*

[jahow]

Don't worry Wingy, it's perfectly normal. Both spheres (cloud and fire) are alpha-blended, which means they're drawn on top of the rest, and the closest to the camera is drawn first. Thus, depending on the camera position, the draw order is sometimes reversed more here: http://doc.babylonjs.com/page.php?p=25100

[jahow]

Quick fix so that the procedural texture handles alpha: http://www.babylonjs-playground.com/#24C4KC#16

 

I made a PR with the fix: https://github.com/BabylonJS/Babylon.js/pull/598

[Wingnut]

Damn, Jahow just wedges a shader store right onboard and hacks the hell out of it.  Too cool!  You're hot hot hot, Jahow.  I'm glad you're hanging around with us!  Took ya what?  17 seconds?  phew!   Excellent!

 

And thanks for the mini-tut on alpha blending!  I hear of these things, but its excellent when you Gods point them out, in day-to-day issues.  Thanks!!

 

Did you see the PG errors?  I can't get it to display, now... PG error reports are intermittent in my browser.... but it said for lines 157, 158, 160, 161... cannot assign color4 to color3... no .toColor4() found on Color3.

 

That will probably correct itself after the AR.  (accepted request?) 

 

Typescript is typecasting upon us, me thinks.  Intellisenselessness.   Smart editors... pft.  Sometimes they get a little head-strong and think they know more than we do. 

[jahow]

Yep, Typescript is playing against us here. But the wonderful thing about JS and TS is that, although you're warned that there is an inconsistency, you can just ignore it and keep hacking stuff all day.

 

Also I became proficient in PG hacks because I'm just too lazy to reproduce the issue on my computer, fix it, check that everything works and then commit the fix. 

[The Snow Irbix]

Yes wingnut, i want to have two or more spheres, with clouds rotating and the skydome behind

[GameMonetize]

PR validated. Nightly build in progress