Water Material - Lighting Issues....

exc_html5 · August 9, 2016

We are currently exploring the possibilities of using the babylon water shader (found here:https://doc.babylonjs.com/extensions/Water ) in one of our projects. However were running into weird issues with the lighting and/or specular properties of the babylon standard shader in our scenes when we activate it. Was kind of frustrating because we spent all day thinking we messed up the rest of our scene, and then we found out it was something in the water shader script itself.

To demonstrate the issue, we created a super pared down version of the babylon scene to test with. We created a brand new babylon scene that has a ground plane with a BJS standard shader assigned to it. Then we also created a directional light, not casting any shadows.

Also, in our index.html file, we are loading the following scripts:

    <!-- build:js js/vendor.js -->
    <script type="text/javascript" src="scripts/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="scripts/mobilecheck.js"></script>
    <script type="text/javascript" src="scripts/state-machine.min.js"></script>
    <script type="text/javascript" src="scripts/babylon.max.js"></script>
    <script type="text/javascript" src="scripts/math.min.js"></script>
    <script type="text/javascript" src="scripts/hand.js"></script>
    <script type="text/javascript" src="scripts/HelperFunctions.js"></script>
    <script type="text/javascript" src="scripts/Player.js"></script>
    <script type="text/javascript" src="scripts/main.js"></script>
    <!-- endbuild -->

The result looks like this:

Which is what I would expect. However, when I add this line to the HTML to enable the water shader:

    <script type="text/javascript" src="scripts/babylon.waterMaterial.js"></script>

Then I get this result:

You can see the material and/or light is now blown out. (And i haven't even called anything in the new JS script yet). So my thinking is maybe there is something in waterMaterial.js that is changing how the light and/or standard shader behaves? Any BJS folk that can shed some light on this?

thanks!

gryff · August 9, 2016

@exc_html5 Does the Directional Light have specular turned on by default?

Try this PG example where I have added a default directional light and the printed out the value of light's specular properties in the console.

What happens if you add this kind of code to your test setup?:

dirLight.specular = new BABYLON.Color3(0, 0, 0);

cheers, gryff

exc_html5 · August 9, 2016

Here is actually the contents of the entire BJS scene file that were using, it's pretty simple:

"producer" : null,
	"autoClear" : true,
	"clearColor" : [0, 0, 0, 1],
	"ambientColor" : [0, 0, 0],
	"fogMode" : 2,
	"fogColor" : [0.5, 0.5, 0.5],
	"fogStart" : 0,
	"fogEnd" : 300,
	"fogDensity" : 0.01,
	"gravity" : [0, 0, -0.9],
	"physicsEnabled" : false,
	"physicsGravity" : null,
	"cameras" : [{
			"name" : "MainCamera",
			"id" : "d3cabb38-1a1b-4c1b-89b3-039301c0075e",
			"parentId" : null,
			"lockedTargetId" : null,
			"type" : null,
			"position" : [8.4, 0.48, -8.58],
			"rotation" : [0, 0, 0],
			"target" : [8.4, 0.277867824, -9.559359],
			"fov" : 1.04719758,
			"minZ" : 0.6,
			"maxZ" : 1000,
			"speed" : 1,
			"inertia" : 0.9,
			"checkCollisions" : false,
			"applyGravity" : false,
			"ellipsoid" : null,
			"autoAnimate" : false,
			"autoAnimateFrom" : 0,
			"autoAnimateTo" : 0,
			"autoAnimateLoop" : false,
			"animations" : null
		}
	],
	"activeCameraID" : "d3cabb38-1a1b-4c1b-89b3-039301c0075e",
	"lights" : [{
			"name" : "sun_light no_shadows",
			"id" : "1ac2fefd-4c1a-4bc8-bd29-671e3565833c",
			"parentId" : null,
			"position" : [2.626, 2.769, -0.376],
			"direction" : [-0.508843, -0.352303237, 0.7854688],
			"type" : 1,
			"diffuse" : [1, 0.9863083, 0.8014706, 1],
			"specular" : [1, 0.9863083, 0.8014706, 1],
			"intensity" : 1,
			"range" : 3.40282347E+38,
			"exponent" : 1,
			"angle" : 0.5235988,
			"groundColor" : null,
			"excludedMeshesIds" : null,
			"includedOnlyMeshesIds" : null,
			"autoAnimate" : false,
			"autoAnimateFrom" : 0,
			"autoAnimateTo" : 0,
			"autoAnimateLoop" : false,
			"animations" : null
		}
	],
	"meshes" : [{
			"id" : "88c77df4-1f1a-45c2-ac62-7cc88269e571",
			"parentId" : null,
			"materialId" : "1beb6d36-bb80-4777-a33c-2c241d302a80",
			"isEnabled" : true,
			"isVisible" : true,
			"pickable" : true,
			"pivotMatrix" : null,
			"positions" : [35.720787, 2.618581E-06, 19.3714447, 35.720787, 2.618581E-06, -35.01919, -18.6698513, 2.618581E-06, -35.01919, -18.6698513, 2.618581E-06, 19.3714447],
			"normals" : [0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0],
			"uvs" : [0, 0, 0, 1, 1, 1, 1, 0],
			"uvs2" : [0, 0, 0, 0, 0, 0, 0, 0],
			"colors" : null,
			"hasVertexAlpha" : false,
			"matricesIndices" : null,
			"matricesWeights" : null,
			"matricesIndicesExtra" : null,
			"matricesWeightsExtra" : null,
			"indices" : [2, 1, 0, 3, 2, 0],
			"checkCollisions" : false,
			"receiveShadows" : true,
			"infiniteDistance" : false,
			"billboardMode" : 0,
			"visibility" : 1,
			"subMeshes" : null,
			"instances" : [],
			"skeletonId" : -1,
			"numBoneInfluencers" : 0,
			"showBoundingBox" : false,
			"showSubMeshesBoundingBox" : false,
			"applyFog" : false,
			"alphaIndex" : 0,
			"physicsImpostor" : 0,
			"physicsMass" : 0,
			"physicsFriction" : 0,
			"physicsRestitution" : 0,
			"name" : "waterQuad",
			"position" : [0, 0, 0],
			"rotation" : [0, 0, 0],
			"scaling" : [1, 1, 1],
			"rotationQuaternion" : null,
			"actions" : null,
			"animations" : null,
			"autoAnimate" : false,
			"autoAnimateFrom" : 0,
			"autoAnimateTo" : 0,
			"autoAnimateLoop" : false
		}
	],
	"sounds" : [],
	"materials" : [{
			"alpha" : 1,
			"alphaMode" : 0,
			"ambient" : null,
			"ambientTexture" : null,
			"backFaceCulling" : true,
			"bumpTexture" : null,
			"diffuse" : [0.08888889, 0.08888889, 0.08888889, 1],
			"diffuseFresnelParameters" : null,
			"diffuseTexture" : null,
			"emissive" : [0, 0, 0, 1],
			"emissiveFresnelParameters" : null,
			"emissiveTexture" : null,
			"id" : "1beb6d36-bb80-4777-a33c-2c241d302a80",
			"name" : "dark",
			"opacityFresnelParameters" : null,
			"opacityTexture" : null,
			"reflectionFresnelParameters" : null,
			"reflectionTexture" : null,
			"specular" : [1, 1, 1, 1],
			"specularPower" : 72.1964645,
			"specularTexture" : null,
			"wireframe" : false,
			"uSpeed" : 0,
			"vSpeed" : 0
		}
	],
	"multiMaterials" : [],
	"particleSystems" : null,
	"lensFlareSystems" : [],
	"shadowGenerators" : [],
	"skeletons" : [],
	"actions" : null
}

The light does have a specular color (which we want), but it doesn't make sense why it changes by simply loading the water script. That help any?

gryff · August 9, 2016

And if you want to have the Directional Light have specular effects on other objects in the scene then perhaps rather than set the specular property as above do this :

dirLight.excludedMeshes= [waterMesh];

cheers, gryff

exc_html5 · August 9, 2016

Yeah, I def want the light to affect the plane I've got in my scene (diffuse and specular), so no problem there. Just the inconsistency between why it changes when I load the water script is the mystery.

gryff · August 9, 2016

@exc_html5 : Well hopefully someone with a better understanding of water.js will be able to answer your question.

cheers, gryff

RaananW · August 9, 2016

Maybe @Luaacro can help with that! This seems interesting.

The water material has its own scope and shouldn't influence any mesh which has a standard material.

Wingnut · August 9, 2016

http://www.babylonjs-playground.com/#1SLLOJ#179

Just wingy playing, hijacking the entire waterMaterial into the playground and trying other demented things, pretty much off-topic stuff.

Ok, let me ask these questions, @exc_html5...

You have NO waterMaterial created or applied to that plane, in your second picture? It was ONLY the including of the script... that changed the look of the plane? You hadn't even created a single waterMaterial, yet? Really really? If so, that is SO weird.

I guess you already answered those questions when you showed us your .babylon file. hmm.

19 hours ago, exc_html5 said:

Any BJS folk that can shed some light on this?

ar ar ar! Me thinks there is already someone in the light shed, shedding too much light.

GameMonetize · August 9, 2016

Summoning @Luaacro

exc_html5 · August 9, 2016

Quote

ar ar ar! Me thinks there is already someone in the light shed, shedding too much light.

Haha, that was my second theory

But you are correct, I haven't modified my scene at all, I've only just added the watermaterial script to the Index.html to load the script library. My BJS scene is not calling anything in that script library yet.

exc_html5 · August 9, 2016

Should be easy enough to test too, as you can just copy my entire BJS scene above and load it in. We are freezing materials in the BJS scene via the main.js file, but other than that, it's pretty much what you see in the actual BJS scene file.

julien-moreau · August 10, 2016

@exc_html5 hi

I cannot reproduce the bug in my environment, can you try to reproduce it in the playground ? Or send me your project so I can investigate ?

Thanks !

exc_html5 · August 10, 2016

Here you go:

http://client.elementxcreative.com/bjs/water/20160808.000.zip - Size: 1.19 MB

If you look in the index.html file, you can see where i'm calling the water material script. If you just comment that off/on and reload, you can see the diff.

exc_html5 · August 19, 2016

*bump* Hi @Luaacro! Did you have a chance to take a look at this glitch?

thanks!

Nabroski · August 20, 2016

@exc_html5

Hello
i downloaded your file ftw, it seem this is already a Battelfield Hardline II Preview-Release 500lines of code in different js files.

I like to find a bug in a scripts, its kind of challenge. But here i would say, the bug could be anywhere.

I just a hobby programmer , let me tell you, how i get almost every bug without time consuming looking into the debugger console jump forth and back by setting a breakpoint
.
I just comment most of the script out, or https://doc.babylonjs.com/tutorials/Creating_a_Basic_Scene

and then copy paste some of my code in the predefined file i know always should work.

You got maybe 5 Shaders and a Shadow generator. You have a much better insight of the structure of your project. From my experience the bug is somewhere in this area.

You can also try different releases, and copy paste links the the babylonjs releases to your project for convenience, maybe the Water material will work then.
https://rawgit.com/

https://github.com/BabylonJS/Babylon.js/tree/master/dist

julien-moreau · August 21, 2016

@exc_html5 can you get the latest version of the water material and re-test it ?

I found some bugs in materials due to a recent update and fixed it this week.

Thanks !

exc_html5 · August 22, 2016

I'll check it out, thanks @Luaacro!

exc_html5 · August 22, 2016

@Luaacro and @Deltakosh, is the latest version of the water material supposed to be here: https://github.com/BabylonJS/Babylon.js/tree/master/materialsLibrary/dist?

If, so, that was says it's 4 months old? Is there somewhere else I need to pull it from?

Sebavan · August 24, 2016

Hello,

I would bet on your issue being related to this one:

Basically the diffuse of your .babylon file will not be deserialized and considered white instead of [0.08888889, 0.08888889, 0.08888889, 1],

Please try replacing diffuse by diffuseColor in your .babylon file to see if that works and follow the linked thread for fix delivery. I could not resist to try and it seems to be confirmed:

Broken: http://www.babylonjs-playground.com/debug.html#2BDTWM#15

Fixed with described workaround: http://www.babylonjs-playground.com/debug.html#2BDTWM#16

CU,

gryff · August 25, 2016

@Sebavan : Two problems and a single answer - way to go

cheers, gryff

exc_html5_2 · August 25, 2016

@Sebavan
Hello again,

So when babylon.waterMaterial.js is added in the html file...
<

<script type="text/javascript" src="scripts/babylon.waterMaterial.js"></script>

...having "diffuse" and "specular" changed to "diffuseColor" and "specularColor" within the materials section of the .babylon file DOES INDEED FIX the brightness problem.

"materials" : [{
			"alpha" : 1,
			"alphaMode" : 0,
			"ambient" : null,
			"ambientTexture" : null,
			"backFaceCulling" : true,
			"bumpTexture" : null,
			"diffuseColor" : [0.08888889, 0.08888889, 0.08888889, 1],
			"diffuseFresnelParameters" : null,
			"diffuseTexture" : null,
			"emissive" : [0, 0, 0, 1],
			"emissiveFresnelParameters" : null,
			"emissiveTexture" : null,
			"id" : "1beb6d36-bb80-4777-a33c-2c241d302a80",
			"name" : "dark",
			"opacityFresnelParameters" : null,
			"opacityTexture" : null,
			"reflectionFresnelParameters" : null,
			"reflectionTexture" : null,
			"specularColor" : [1, 1, 1, 1],
			"specularPower" : 72.1964645,
			"specularTexture" : null,
			"wireframe" : false,
			"uSpeed" : 0,
			"vSpeed" : 0
		}
	],

HOWEVER, we discovered that if you then remove the waterMaterial line from the html file, the brightness problem comes back again!

So to summarize our discoveries:
1. Setting waterMaterial.js in the html file WITHOUT the diffuseColor and specularColor changes = brightness problem.

2. Setting the diffuseColor and specularColor changes WITHOUT the waterMaterial.js in the html file = brightness problem

Just to be clear, the properties in the materials section of the babylon file were originally called "diffuse" and "specular". We changed them to "diffuseColor" and "specularColor."

gryff · August 26, 2016

@exc_html5_2 and @exc_html5 : you should not need to manually edit your .babylon file any more as the PG has been updated here to fix the issue:

Try @Sebavan "broken" link above - it now works .

cheers, gryff

exc_html5 · August 26, 2016

Hi Gryff! A few questions:

Is the playground example loading in the water material library tho? I'd love to test this with the water material active?
If this issue is fixed in the playground, that's great, but how do I get these updated files down to the version that were hosting on our servers?

thanks!

julien-moreau · August 29, 2016

On 22 août 2016 at 8:08 PM, exc_html5 said:

@Luaacro and @Deltakosh, is the latest version of the water material supposed to be here: https://github.com/BabylonJS/Babylon.js/tree/master/materialsLibrary/dist?

If, so, that was says it's 4 months old? Is there somewhere else I need to pull it from?

Good question, I think you should build the materials to be sure the /dist folder ill contain the latest versions of the TypeScript files

I recently updated the water material but don't remember if I pushed also the dist

julien-moreau · August 29, 2016

https://github.com/BabylonJS/Babylon.js/tree/master/materialsLibrary/materials/water

The water material has changed 12 days ago, so please build the latest materials versions using gulp (everything is in the readme.md)

Thanks !

Water Material - Lighting Issues....

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members