firlyndi

WaterMaterial is not defined

Recommended Posts

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! :D

 

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

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.