Jump to content

Water in 2.1


Recommended Posts

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 ???




Link to comment
Share on other sites



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!

Link to comment
Share on other sites

Here, this work. Fixe for version > 2

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);    };})();


#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.);}}


#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;}
Link to comment
Share on other sites

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 ?


http://localhost/www/test/hadersShaders/water.vertex.fx [HTTP/1.1 404 Not Found 532ms]
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
Link to comment
Share on other sites

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


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.

Link to comment
Share on other sites

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:




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



Link to comment
Share on other sites

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 ?



Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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  ? :)




iiceman : why this page of your example is so heavy? my computer almost frozen when I  open this link.  
Link to comment
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.
  • Create New...