WaterMaterial is not defined

[firlyndi]

Hello, So I am trying to create a water texture for my scene. I loaded the waterMaterial.js, water.fragment.fx, and the vertex.fragment.fx files with a bump map into my water directory. However, when I try to load my game inside firefox and chrome, the console says "WaterMaterial is not defined". I was following a tutorial and downloaded the example files and their file has the same error.

 

I am using the newest version of Babylon js and I have no idea why this is happening. Do you know why this could be happening? I checked my code and I don't see anything wrong. Maybe there is something I am missing. Thanks for your help in advance!

 

here is the code for the water plane.

 

// Water
            var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 32, scene, false);
            var water = new BABYLON.WaterMaterial("water", scene, new BABYLON.Vector2(512, 512));
            water.backFaceCulling = true;
            water.bumpTexture = new BABYLON.Texture("Water/bump.png", scene);
            water.windForce = -5;
            water.waveHeight = 0.2;
            water.bumpHeight = 0.05;
            water.waterColor = new BABYLON.Color3(0.047, 0.23, 0.015);
            water.colorBlendFactor = 0.5;
            water.addToRenderList(skybox);
            water.addToRenderList(ground);
            waterMesh.material = water;

 

// 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("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 shader -- vertex

 

#ifdef GL_ES
precision highp float;
#endif

// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

// Uniforms
uniform vec2 waveData;
uniform mat4 windMatrix;
uniform mat4 world;
uniform mat4 worldViewProjection;

// Normal
varying 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;
}
 

 

// water - fragment -- shader

#ifdef GL_ES
precision highp float;
#endif

uniform vec3 vEyePosition;
uniform vec4 vLevels;
uniform vec3 waterColor;
uniform vec2 waveData;

// Lights
varying vec3 vPositionW;
varying vec3 vNormalW;
uniform vec3 vLightPosition;

// Refs
varying 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.);
}
}
 

[Temechon]

Hello, 

 

Are you using the last WaterMaterial (available here: http://doc.babylonjs.com/extensions/Water) ?

[jodurpar]

Hello, i am new user of babylonjs and try to use watermaterial (an other) but ....

 

I have the same problem. When i try to load the watermaterial, after load babylon.js code , i have an error and water material there are not loaded:

 

<script src="librerias/babylon2/babylon.2.2.max.js" type='text/javascript'></script>
<script src="librerias/babylon2/Materiales/babylon.simpleMaterial.js"  type='text/javascript'></script>    <!-- Here are the error --!>
<script src="librerias/babylon2/Materiales/babylon.normalMaterial.min.js"  type='text/javascript'></script> <!-- if I delete de line before, here are the error --!>
<script src="librerias/babylon2/Materiales/babylon.waterMaterial.min.js"  type='text/javascript'></script> <!-- and if I delete de two lines before, here are the error --!>

 

All tree material  have same error:

 

0x800a138f - Error en tiempo de ejecución de JavaScript: No se puede obtener la propiedad 'prototype' de referencia nula o sin definir (Javascript execution time error. an obtain 'prototype' property from null reference)

 

if i delete the load of the materials, all are ok, but have no materials .

 

Can any help me ?. (in Explorer, firefox and edge).

[jodurpar]

Hello again:

 

I have another post with a similar problem.

The was solved using 2.3.beta version of babylon engine because anterior version may be not suport this extensions.

 

Thank you for all.

[firlyndi]

On 12/22/2015 at 0:05 PM, Temechon said:

Hello, 

 

Are you using the last WaterMaterial (available here: http://doc.babylonjs.com/extensions/Water) ?

Yes!!!!

[MarianG]

And are you using the last babylon js file (2.3)?

If not, you can find it  here.