solved water rendering black

[timetocode]

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.engine.setHardwareScalingLevel(1)
this.scene = new BABYLON.Scene(this.engine)
//this.scene.freezeActiveMeshes()
//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
water.addToRenderList(skybox)
waterMesh.material = water

Any ideas?

[Guest]

Well I see nothing wrong if I compare with https://www.babylonjs-playground.com/#1SLLOJ#20

Can you share a repro?

[timetocode]

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.

[Guest]

Tough to say /

Can you make sure to have the latest (and same) version for all your bjs packages?

[timetocode]

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.

 

[Guest]

Ok so at least it works:)