exc_html5 Posted August 9, 2016 Share Posted 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! Quote Link to comment Share on other sites More sharing options...
gryff Posted August 9, 2016 Share Posted 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 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
exc_html5 Posted August 9, 2016 Author Share Posted 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? Quote Link to comment Share on other sites More sharing options...
gryff Posted August 9, 2016 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
exc_html5 Posted August 9, 2016 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
gryff Posted August 9, 2016 Share Posted August 9, 2016 @exc_html5 : Well hopefully someone with a better understanding of water.js will be able to answer your question. cheers, gryff Quote Link to comment Share on other sites More sharing options...
RaananW Posted August 9, 2016 Share Posted 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. gryff 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted August 9, 2016 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted August 9, 2016 Share Posted August 9, 2016 Summoning @Luaacro Quote Link to comment Share on other sites More sharing options...
exc_html5 Posted August 9, 2016 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
exc_html5 Posted August 9, 2016 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
julien-moreau Posted August 10, 2016 Share Posted 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 ! Quote Link to comment Share on other sites More sharing options...
exc_html5 Posted August 10, 2016 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
exc_html5 Posted August 19, 2016 Author Share Posted August 19, 2016 *bump* Hi @Luaacro! Did you have a chance to take a look at this glitch? thanks! Quote Link to comment Share on other sites More sharing options...
Nabroski Posted August 20, 2016 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
julien-moreau Posted August 21, 2016 Share Posted 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 ! Quote Link to comment Share on other sites More sharing options...
exc_html5 Posted August 22, 2016 Author Share Posted August 22, 2016 I'll check it out, thanks @Luaacro! Quote Link to comment Share on other sites More sharing options...
exc_html5 Posted August 22, 2016 Author Share Posted 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? julien-moreau 1 Quote Link to comment Share on other sites More sharing options...
Sebavan Posted August 24, 2016 Share Posted 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 1 Quote Link to comment Share on other sites More sharing options...
gryff Posted August 25, 2016 Share Posted August 25, 2016 @Sebavan : Two problems and a single answer - way to go cheers, gryff Quote Link to comment Share on other sites More sharing options...
exc_html5_2 Posted August 25, 2016 Share Posted 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." Quote Link to comment Share on other sites More sharing options...
gryff Posted August 26, 2016 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
exc_html5 Posted August 26, 2016 Author Share Posted 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! Quote Link to comment Share on other sites More sharing options...
julien-moreau Posted August 29, 2016 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
julien-moreau Posted August 29, 2016 Share Posted 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 ! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.