Water in 2.1

[hw3web]

Hello there ,

 

After long brake with Babylon JS

 

I try to back to this Framework as I think is the best one for WebGL

 

I try to put water on scene, but I try to do it as old days , and I only getting errors like ReferenceError: WaterMaterial is not defined

 

 

- is there any new way to create materials like water ???

 

Regards

 

[adam]

There is some good info here:

 

https://developers.google.com/webmasters/ajax-crawling/docs/learn-more

 

Edit:  sorry wrong thread

[adam]

I'm not seeing WaterMaterial in any prior versions of Babylon.js. 

 

Maybe you used this tutorial in which they create a WaterMaterial class:

 

http://www.gamedevacademy.org/how-to-create-an-artificial-island-landscape-with-babylonjs/

[hw3web]

Sorry you are right,

 

I use this tutorial before, but some way do not want work with new 2.1

 

is there any way to make water like that in 2.1 ?

 

maybe material is include in new framework

 

regards  

[hw3web]

Now I came with other error : this.bumpTexture._computeTextureMatrix

 

so - is there not any direct shades in Babylon to simulate water effect ?

 

or if not now is any plans to add in the future ?

[jahow]

Hey!

 

It is pretty hard to understand what problems you are facing without a practical example, ideally on the playground: http://www.babylonjs-playground.com/

 

Also, you mention an error: what is it exactly? It seems the function _computeTextureMatrix does not exist anymore, but there is getTextureMatrix() that should do the trick.

 

As for your question, there is no standard water shader in BJS right now. I can't answer on future plans, obviously!

[hw3web]

so is any new tutorial for water effect that will work with v2.1 ?

[jahow]

Not that I know of... But there's a working example here: http://p215008.mittwaldserver.info/moveWithCollisions/

 

(courtesy of iiceman!)

[iiceman]

I fear that one still runs on 2.0-beta. I'll try to update it to 2.1 when I get home tonight. I'll let you know if I figured out what to do

[Dad72]

Here, this work. Fixe for version > 2
 
WaterMaterial.js

var BABYLON = BABYLON || {};//**********************//water material//********************(function () {    BABYLON.WaterMaterial = function (name, scene, light)    {        this.name = name;	this.TextureBump = "textures/water_river.jpg";			        this.id = name;        this.light = light;        this._scene = scene;        scene.materials.push(this);        this.bumpTexture = new BABYLON.Texture(this.TextureBump, scene);        this.bumpTexture.uScale = 2;        this.bumpTexture.vScale = 2;        this.bumpTexture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;        this.bumpTexture.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;        this.reflectionTexture = new BABYLON.MirrorTexture("reflection", 512, scene, true);        this.refractionTexture = new BABYLON.RenderTargetTexture("refraction", 512, scene, true);                this.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0);        this.refractionTexture.onBeforeRender = function() {            BABYLON.clipPlane = new BABYLON.Plane(0, 1, 0, 0);        };        this.refractionTexture.onAfterRender = function() {            BABYLON.clipPlane = null;        };        this.waterColor = new BABYLON.Color3(0.0, 0.3, 0.1);        this.waterColorLevel = 0.2;        this.fresnelLevel = 1.0;        this.reflectionLevel = 0.6;        this.refractionLevel = 0.8;                this.waveLength = 0.1;        this.waveHeight = 0.15;        this.waterDirection = new BABYLON.Vector2(1.0, 0);        this._time = 0;    };    BABYLON.WaterMaterial.prototype = Object.create(BABYLON.Material.prototype);    // Properties       BABYLON.WaterMaterial.prototype.needAlphaBlending = function ()    {        return false;    };    BABYLON.WaterMaterial.prototype.needAlphaTesting = function ()    {        return false;    };    // Methods       BABYLON.WaterMaterial.prototype.getRenderTargetTextures = function ()    {        var results = [];        results.push(this.reflectionTexture);        results.push(this.refractionTexture);        return results;    };    BABYLON.WaterMaterial.prototype.isReady = function (mesh)    {        var engine = this._scene.getEngine();                if (this.bumpTexture && !this.bumpTexture.isReady) {            return false;        }		        this._effect = engine.createEffect("Shaders/water",		["position", "normal", "uv"],		["worldViewProjection", "world", "view", "vLightPosition", "vEyePosition", "waterColor", "vLevels", "waveData", "windMatrix"],		["reflectionSampler", "refractionSampler", "bumpSampler"], "");        if (!this._effect.isReady()) return false;                return true;    };    BABYLON.WaterMaterial.prototype.bind = function (world, mesh)    {        this._time += 0.0001 * this._scene.getAnimationRatio();        this._effect.setMatrix("world", world);        this._effect.setMatrix("worldViewProjection", world.multiply(this._scene.getTransformMatrix()));        this._effect.setVector3("vEyePosition", this._scene.activeCamera.position);        this._effect.setVector3("vLightPosition", this.light.position);        this._effect.setColor3("waterColor", this.waterColor);        this._effect.setFloat4("vLevels", this.waterColorLevel, this.fresnelLevel, this.reflectionLevel, this.refractionLevel);        this._effect.setFloat2("waveData", this.waveLength, this.waveHeight);        // Textures                this._effect.setMatrix("windMatrix", this.bumpTexture.getTextureMatrix().multiply(BABYLON.Matrix.Translation(this.waterDirection.x * this._time, this.waterDirection.y * this._time, 0)));        this._effect.setTexture("bumpSampler", this.bumpTexture);        this._effect.setTexture("reflectionSampler", this.reflectionTexture);        this._effect.setTexture("refractionSampler", this.refractionTexture);    };    BABYLON.WaterMaterial.prototype.dispose = function ()    {        if (this.bumpTexture) this.bumpTexture.dispose();                if (this.reflectionTexture) this.reflectionTexture.dispose();        if (this.refractionTexture) this.refractionTexture.dispose();        BABYLON.Material.dispose.call(this);    };})();

water.fragment.fx

#ifdef GL_ESprecision highp float;#endifuniform vec3 vEyePosition;uniform vec4 vLevels;uniform vec3 waterColor;uniform vec2 waveData;// Lightsvarying vec3 vPositionW;varying vec3 vNormalW;uniform vec3 vLightPosition;// Refsvarying vec2 vBumpUV;varying vec4 vUV;uniform sampler2D refractionSampler;uniform sampler2D reflectionSampler;uniform sampler2D bumpSampler;void main(void) {	vec3 viewDirectionW = normalize(vEyePosition - vPositionW);	// Light	vec3 lightVectorW = normalize(vLightPosition - vPositionW);	// Wave	vec3 bumpNormal = 2.0 * texture2D(bumpSampler, vBumpUV).rgb - 1.0;	vec2 perturbation = waveData.y * bumpNormal.rg;	// diffuse	float ndl = max(0., dot(vNormalW, lightVectorW));	// Specular	vec3 angleW = normalize(viewDirectionW + lightVectorW);	float specComp = dot(normalize(vNormalW), angleW);	specComp = pow(abs(specComp), 256.);	// Refraction	vec2 texCoords;	texCoords.x = vUV.x / vUV.w / 2.0 + 0.5;	texCoords.y = vUV.y / vUV.w / 2.0 + 0.5;	vec3 refractionColor = texture2D(refractionSampler, texCoords + perturbation).rgb;	// Reflection	vec3 reflectionColor = texture2D(reflectionSampler, texCoords + perturbation).rgb;	// Fresnel	float fresnelTerm = dot(viewDirectionW, vNormalW);	fresnelTerm = clamp((1.0 - fresnelTerm) * vLevels.y, 0., 1.);	// Water color	vec3 finalColor = (waterColor * ndl) * vLevels.x + (1.0 - vLevels.x) * (reflectionColor * fresnelTerm * vLevels.z + (1.0 - fresnelTerm) * refractionColor * vLevels.w) + specComp;		gl_FragColor = vec4(finalColor, 1.);}}

water.vertex.fx

#ifdef GL_ESprecision highp float;#endif// Attributesattribute vec3 position;attribute vec3 normal;attribute vec2 uv;// Uniformsuniform vec2 waveData;uniform mat4 windMatrix;uniform mat4 world;uniform mat4 worldViewProjection;// Normalvarying vec3 vPositionW;varying vec3 vNormalW;varying vec4 vUV;varying vec2 vBumpUV;void main(void) {	vec4 outPosition = worldViewProjection * vec4(position, 1.0);	gl_Position = outPosition;		vPositionW = vec3(world * vec4(position, 1.0));	vNormalW = normalize(vec3(world * vec4(normal, 0.0)));	vUV = outPosition;	vec2 bumpTexCoord = vec2(windMatrix * vec4(uv, 0.0, 1.0));	vBumpUV = bumpTexCoord / waveData.x;}

[hw3web]

thank you very much, but do you know why I am getting this error :

 

I see problem is with address : hadersShaders but whay this address is like this , not just Shaders ? - any idea ?

 

GET 

http://localhost/www/test/hadersShaders/water.vertex.fx [HTTP/1.1 404 Not Found 532ms]

GET 

http://localhost/www/test/hadersShaders/water.fragment.fx [HTTP/1.1 404 Not Found 1ms]

Error: WebGL: compileShader: String contains the illegal character '34'. babylon.js:4:25321

"BJS - [16:56:15]: Unable to compile effect: " babylon.js:4:17505

 

"BJS - [16:56:15]: Vertex shader:Shaders/water" babylon.js:4:17505

 

"BJS - [16:56:15]: Fragment shader:Shaders/water" babylon.js:4:17505

 

"BJS - [16:56:15]: Defines: " babylon.js:4:17505

 

"BJS - [16:56:15]: Error: ERROR: 0:? : '' : syntax error 

" babylon.js:4:17505

 

 

 

 

 

 

I found problem with French letter :

 

#ifdef GL_ES

highp précision flotter;

#fin si

[jahow]

dad72, it seems someone had your fragment shader translated by google

 

hw3web, there is obviously something wrong with your code outside of the WaterMaterial, but again, without being able to take a look at it, there's not much more we can tell.

[hw3web]

Maybe I do wrong BABYLON.Engine.ShadersRepository

 

and put files in wrong folder 

 

if dad72 will be so kind and let me know hierarchy of files and folders please

 

regards 

[iiceman]

using some 2.2-alpha version now, works perfectly with no changes made at all: http://p215008.mittwaldserver.info/moveWithCollisions/ (shadow seems messed up - I fixed that - and my graphics card seems to do some heavy work according to the fan noise, anybody knows if that's normal?)

[dbawel]

Am I supposed to see a water material (shader) applied in the above playground scene?  I didn't see any rendered water materials in any of the scene links on this entire post.  Using Windows and the latest Chrome browser, line 264 returns an undefined:

 

waterMaterial.reflectiontexture.renderList.push(meshPlayer);

 

I can't imagine I'm the only one with this result in the render scene.

 

DB

[hw3web]

uffff , I thought is only me

 

I manage copy all vertex  and fragment .fx with js for water - but all I see is green plane (

 

- is definitely problem with water effect in BabylonJS

 

is not way to make it standard and include babylon.js as so do not need any other files and manipulation ?

 

Regards

[Dad72]

dad72, it seems someone had your fragment shader translated by google

oops.  it's my fault. I fix the problem on my previous post.

hw3web : create a folder "Shaders/"  and add your shaders has indoor and adjust: BABYLON.Engine.ShadersRepository = "./data/" (for exemple)

 

if you see here:

 this._effect = engine.createEffect("Shaders/water",		["position", "normal", "uv"],		["worldViewProjection", "world", "view", "vLightPosition", "vEyePosition", "waterColor", "vLevels", "waveData", "windMatrix"],		["reflectionSampler", "refractionSampler", "bumpSampler"], "");

I create a folder "Shaders" => engine.createEffect("Shaders/water",

 

water is the name of the fragment and vertex shader file

[iiceman]

I think I fixed mine, too (seems like I accidentally wrote reflectiontexture instead of reflectionTexture)  Try again and let me know if it's okay now or something still goes wrong

[hw3web]

I sorry guys , I really try to get it right , I try with different versions and I do not have any luck

 

Is any chance to put just necessary files together and upload here as zip file to download just simple plane as water effect material,

 

please  ?

 

 

PS. 

iiceman : why this page of your example is so heavy? my computer almost frozen when I  open this link.  

[iiceman]

I really don't know. I try to make a version with only the water material in it if I have time tonight.

[hw3web]

or if you don't mind just zip that what you have working and upload here so I believe I and other can see what we doing wrong to achieve this effect. 

[adam]

http://playground.babylonjs.com/#BHX7Q#1

http://playground.babylonjs.com/#BHX7Q#6

[iiceman]

cleaned it up before I saw that adam already made a playground for it. sooo... anyways...

 

http://p215008.mittwaldserver.info/waterMaterial/

[adam]

I changed the size of the reflection texture from 4096 to 512 and I gained about 40 fps on my crappy computer.

http://playground.babylonjs.com/#BHX7Q#10

[adam]

On 7/23/2015 at 3:21 PM, iiceman said:

cleaned it up before I saw that adam already made a playground for it. sooo... anyways...

http://p215008.mittwaldserver.info/waterMaterial/

 

I couldn't help myself.  This playground is addictive.  Thanks for providing the code.