Jump to content

water material error


Recommended Posts

Hi there

I don't know if any of you, but I expirance water material effect problem.

I am using Linux and on my Firefox all is fine / greate but when I open it with windows 8 IE or even Firefox over there water just not shown. Is there could by regarding of graphic card????

I must admit that even when I load page on my android phone water appear so is strange behaviour of this effect.

At the moment I am away and just type from my phone but when I will be back tomorrow evening home I will link example.

I know I love my linux and I will stick with it but as I try too build corss platform web page with 3D model on is important that work everywhere exacly that some way. I make compromise that some browsers do not support webgl but at least this that support should display scene this same way.

I try go away from flash as3 which I love as all project look 100 % look this same every where but I know that flash have not future of web ;( even Adobe go HTML5 so I try have a go with web gl on html5 and Babyoon.js is in my opinion the bast and straight forward way to do it.

I must say if flash do not need flash player I probobly will stick with it but I blive future of web is plugin free web browsers.

Please any comments and advised welcome.


Link to comment
Share on other sites

Hello, you see -  it is not problem with my pc, as I using Linux and all working , is few other people who I show project, one was on windows 7 , and other one on new windows 8 straight from shop.


But I will make more research.


thank you , I will post results shortly.

Link to comment
Share on other sites

I ask few friends and they look on this page - that what they see ?!


2 on windows 7 one x32 one x64, one on windows 8 , testing on firefox on windows 8 on Chromium,Firefox , IE not showing water !?


I really confuse as it is so grate effect but is not really cross-platform - how it that as new pc do not show it when on yours and on my ( linux ) work perfectly !!!


most of resons to do things online is to share it not look only us self :(


that screen shot of that what they see when open this page

Link to comment
Share on other sites

It's weird... With this link in Chrome/Win7 http://hw3web.co.uk/web/babylon/cube_water, I don't have water, as the previous screenshot... And it is on my gaming PC, so no driver issues here ! 

Weirder : with this link from the tutorial http://www.babylonjs.com/tutorials/blogs/customShaders/customShaders.html, here is the result I get : http://imgur.com/YbukkD2

Link to comment
Share on other sites

A lot of warnings :  


WebGL: INVALID_OPERATION: getUniformLocation: program not linked

3WebGL: INVALID_OPERATION: getAttribLocation: program not linked customShaders.html:1
2WebGL: INVALID_OPERATION: useProgram: program not valid customShaders.html:1
3WebGL: INVALID_ENUM: activeTexture: texture unit out of range customShaders.html:1
Link to comment
Share on other sites

I have the "pause on all exceptions" activated, but when I reload the page, no pause is done for the tutorial.


However, I got a breakpoint with OP scene.


Here is the complete stacktrace : 

BABYLON.Engine.createShaderProgram (babylon.1.5.2.js:1)BABYLON.Effect._prepareEffect (babylon.1.5.2.js:1)(anonymous function) (babylon.1.5.2.js:1)BABYLON.Tools.LoadFile.request.onreadystatechange (babylon.1.5.2.js:1)

And the complete error : 

  1. <exception>Error
  2. defines""
  3. error"Precisions for uniform waveData do not match between the vertex and fragment shader↵"
  4. fragmentCode"#ifdef GL_ES ↵precision mediump 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(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.); ↵}"
  5. fragmentShaderWebGLShader
  6. shaderProgramWebGLProgram
  7. thisBABYLON.Engine
  8. vertexCode"// 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; ↵}"
  9. vertexShaderWebGLShader
Link to comment
Share on other sites

I still have some feedback about new setting , please let me ask more in next few days ,


I believe is important to be compatible with all webgl working browsers


as after update I have feedback as blank page : ( !


just need check it .


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