water material error

[hw3web]

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.

Hubert

[GameMonetize]

It should work:) Perhaps it is a driver issue but I prefer waiting for your sample to propose a fix:)

[hw3web]

try this one ?

http://hw3web.co.uk/web/babylon/cube_water

 

thank you 

 

please try on different systems and browsers 

 

that how it should look like:

 

 

 

It is working on linux mint 15 Firefox(ver 20) and Chromium (ver28)

 

 

 

[GameMonetize]

It works on Firefox and IE11 on my machines (surface pro, surface, hd4000 and nvidia 780)

 

I think you can have an issue with your video driver

[hw3web]

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.

[hw3web]

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

[GameMonetize]

Have they errors on the console?

[GameMonetize]

Could you also tell us the graphics cards models?

[Temechon]

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

[GameMonetize]

latest chrome version?

[Temechon]

Yes... Version 30.0.1599.101 m

[GameMonetize]

Could you look at the javascript console? (f12)

[Temechon]

A lot of warnings :  

 

WebGL: INVALID_OPERATION: getUniformLocation: program not linked

customShaders.html:1

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

[GameMonetize]

The first line: program not linked indicates that the shader is not compiled

Could you run with F12 opened and "break on all exception" activated in order to get the compilation message error?

[Temechon]

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. fragmentShader: WebGLShader
6. shaderProgram: WebGLProgram
7. this: BABYLON.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. vertexShader: WebGLShader

[GameMonetize]

Ok just try to add this code on vertex shader:

#ifdef GL_ES

precision mediump float;

#endif

[GameMonetize]

I fixed my tutorial, it should work now

[Temechon]

Your tutorial is working great now

I'll let OP fix his code.

[hw3web]

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 .

  

[Temechon]

Babylon should be compatible with all webgl-able browsers : http://caniuse.com/webgl

 

In your case, only the vertex shader was causing the problem, not Babylon.

 

Cheers,