Water shader in a simple plane

[Temechon]

Hi, 

 

I have a problem when I try to use the water shader created in the sample "WorldMonger". Here is my code : 

        var canvas = document.getElementById("renderCanvas");        var engine = new BABYLON.Engine(canvas, true);        var scene;        // Resize        window.addEventListener("resize", function () {            engine.resize();        });        scene = new BABYLON.Scene(engine);        var camera = new BABYLON.FreeCamera("cam", new BABYLON.Vector3(0,10,-10), scene);        var light0 = new BABYLON.PointLight("light0",new BABYLON.Vector3(0,10,-10), scene );        // Skybox        var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);        skyboxMaterial.backFaceCulling = false;        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("skybox/skybox", scene);        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);        skybox.material = skyboxMaterial;        var extraGround = BABYLON.Mesh.CreateGround("extraGround", 1000, 1000, 1, scene, false);        var waterMaterial = new WaterMaterial("waterMat", scene, light0);        waterMaterial.reflectionTexture.renderList.push(skybox);        extraGround.material = waterMaterial;        scene.activeCamera.attachControl(canvas);

When i do this, the water is correctly applied.

 

However, the skybox is not displayed anymore. The skybox is only displayed when my camera is under the water plane. 

What is this sorcery ?

 

Thank you for your help.

[GameMonetize]

Could you try with the babylon.js available on the root of www.babylonjs.com?

[Temechon]

Same issue with the babylon.js at the root of the website... http://imgur.com/a/nM8BW

 

Edit : I have several error in my console : 

 

WebGL: drawElements: texture bound to texture unit 1 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.

babylon.1.6.0.js:1818

GL_INVALID_ENUM : glActiveTexture: texture was GL_LINES babylon.1.6.0.js:1818

WebGL: drawElements: texture bound to texture unit 1 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled. babylon.1.6.0.js:1818

GL_INVALID_ENUM : glActiveTexture: texture was GL_FALSE babylon.1.6.0.js:1818

 

GL_INVALID_ENUM : glActiveTexture: texture was GL_LINES

 

 

The line 1818 in babylon is the following : 

BABYLON.Engine.prototype.draw = function (useTriangles, indexStart, indexCount) {this._gl.drawElements(useTriangles ? this._gl.TRIANGLES : this._gl.LINES, indexCount, this._gl.UNSIGNED_SHORT, indexStart * 2);};

[GameMonetize]

could you share the vs project?

[Temechon]

It's not a visual studio project, but here we are : https://dl.dropboxusercontent.com/u/17799537/TEME_TEST_SHADERS.zip

It's a simple html page with js, css folders.

 

Thank you for your help !

[GameMonetize]

Ok this is linked to an issue we have when there is no item inside the refractionTexture.

Here is a fixed version for you:

http://www.babylonjs.com/babylon.zip

[Temechon]

Awwww yeah !! Thank you very much, I'm going to try this right now !

 

Edit : And it's working !! Thanks !