water rendering black

Recommended Posts

I must be doing something incorrect with the water, as it is rendering black:


I pasted the code from this playground, and included the files for the waterbump.png and skybox: https://www.babylonjs-playground.com/#1SLLOJ#17



Here's my code, although its very similar to the PG. My guess is the error isn't in this code, though I'm not sure what else would affect the water. It is as if it has nothing in its render list -- but I can definitely see the sky, and the sky is added to the list.

this.canvasEle = document.getElementById('main-canvas')
this.engine = new BABYLON.Engine(this.canvasEle, true)
this.engine.enableOfflineSupport = false
this.scene = new BABYLON.Scene(this.engine)
//this.scene.collisionsEnabled = true
//this.scene.clearColor = new BABYLON.Color4(0.3, 0.5, 0.75, 1.0)
this.scene.fogMode = BABYLON.Scene.FOGMODE_EXP
this.scene.fogDensity = 0.0005
this.camera = new BABYLON.TargetCamera('camera', new BABYLON.Vector3(0, 0.5, 0), this.scene)
this.camera.fov = 0.8
this.camera.minZ = 0.1       
//this.scene.autoClear = false
//this.scene.autoClearDepthAndStencil = false   

var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0.66, -0.75, 1.25), this.scene)
light.position = new BABYLON.Vector3(1, 40, 10)
light.intensity = 0.5

var light3 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-0.5, 0.75, -1.25), this.scene)
light3.position = new BABYLON.Vector3(1, 40, 1)
light3.intensity = 0.5

var light2 = new BABYLON.HemisphericLight('h', new BABYLON.Vector3(0, 1, 0), this.scene)
light2.intensity = 0.6

var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, this.scene)
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", this.scene)
skyboxMaterial.backFaceCulling = false
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/TropicalSunnyDay", this.scene)
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0)
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0)
skyboxMaterial.disableLighting = true
skybox.material = skyboxMaterial

var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 2048, 2048, 16, this.scene, false)
var water = new BABYLON.WaterMaterial("water", this.scene, new BABYLON.Vector2(512, 512))
water.backFaceCulling = true
water.bumpTexture = new BABYLON.Texture("images/waterbump.png", this.scene)
water.windForce = -10
water.waveHeight = 1.7
water.bumpHeight = 0.1
water.windDirection = new BABYLON.Vector2(1, 1)
water.waterColor = new BABYLON.Color3(0, 0, 221 / 255)
water.colorBlendFactor = 0.0
waterMesh.material = water

Any ideas?

Share this post

Link to post
Share on other sites

Everything seems to work in the PG. Multiple times I've taken some seemingly encapsulated function out of a PG and pasted into my game and not had it do quite the same thing. I'm not sure how to reproduce it.

I'm starting to think I may have a more fundamental issue, like perhaps I accidentally have multiple instances of BABYLON's global scope, engine, or scene.

Maybe this is a hint:

BABYLON.Engine.audioEngine.setGlobalVolume(0.1) does not change the volume of sounds in my game. I have to invoke setVolume on every sound individually to change volume.

Does that point at any general type of issue? I'm using const BABYLON = require('babylonjs') in most files instead of an html script tag, as most of the code runs in node... i wonder if that is related.

Share this post

Link to post
Share on other sites


It looks awesome!!

I took your advice and tried to make sure that babylon was the same version everywhere that I was using it. I'm not sure what I really did, but somewhere along the process of trying to change out 3.3 for 4, and then undoing it, little things started working.

In the end I made a new custom deploy of babylon 4.0, and then I copied and pasted *just* the water material from that directly above my own code. This gave the water reflections, but no animation. I couldn't really figure out a way to get 4.0 running NullEngine (I'll just wait until it is released on npm, and then untangle things).

As for the water animation, that part does make sense to me now, I was missing this:

engine.runRenderLoop(() => {})

^ my previous code only called scene.render(), which might explain why some pg code doesn't work the same for me... i'm not sure what invoking runRenderLoop with an empty function does, but i'm guessing it triggers some important core-level update logic..? in this case passing variables to the water shader maybe.

I also learned that I *can* setGlobalVolume if I do it inside of setTimeout -- I'm not sure what mess I've made, but I'm either accidentally overwriting the audioEngine or things aren't initialized quite when I think they are.


Share this post

Link to post
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.