Stereographic Camera

[CodeIain]

Hi All,

 

Am looking for some advice.

 

Am currently working on a project the will display a mesh on a scene. this will them be projected inside a dome with a warped lens.

 

For this to look correct when projected I need to warp the scene like this.

 

So I was wondering is I could do this via a custom camera that would inherit from the standard Arc camera but display the scene like the above image.

 

I have come across this project on GitHub that has a shader that  warps google map images how I would want me scene to warp

http://notlion.github.io/streetview-stereographic/#o=.729,-.483,.346,.34&z=1.743&mz=18

 

So I was wondering is there was any tutorials or examples on how to attach a shader to a camera or scene?

 

Any help would be great!

[iiceman]

About the shaders: did you see this one already: http://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx

[CodeIain]

I have had a quick look at that page but I have the shader, but am not 100% on how to apply it to a camera rather that a mesh.

[iiceman]

I don't really know much about shaders, but I think it it applies to what's on the screen... so it's for the whole scene as far as I know. But let's wait for somebody who knows a bit more about it than I do

[CodeIain]

I have been trying this on the CYOS but my shader compiles but all I get is a black screen.

 

Could anyone help?

 

http://www.babylonjs.com/CYOS/#2L9YGY

[GameMonetize]

This comes from your vertex shader where you only use projection and not worldViewProjection

[CodeIain]

Hi thanks for this any chance you could supply me an example.

Am still struggling with how to apply a shader to the camera or scene rather than a model.

[GameMonetize]

To apply a shader to a scene or camera, you have to use postprocesses:

http://doc.babylonjs.com/tutorials/How_to_use_PostProcesses

[CodeIain]

Ok am still struggling with this!!!!!!!!

 

this is where i have got but the error in the logs are not very helpful

 

http://www.babylonjs-playground.com/#1DVN04 

 

Could anyone show me where am going wrong?

[iiceman]

My Chrome says: http://www.babylonjs-playground.com/Babylon/Shaders/customFragmentShader.fragment.fx Failed to load resource: the server responded with a status of 404 (Not Found)

 

..as the first error. Not sure why it is looking for that file but it seems missing.

 

Did you already get it working in the CYOS? I tried copying your shader definitions, it seems to compile but the object just turns black: http://www.babylonjs.com/cyos/#1MVZJN

 

But since it compiles it might just be a problem about how you use the shader in the playground. I know some people have done that before but I couldn't find a working example in the forum yet. Did you already try to use the shader on your local pc or a webspace with separate files? Does that make any difference?

 

Edit: found one where shader is working in the playground: http://www.babylonjs-playground.com/#1WBBW0#1 Maybe you can compare and check ifthis one does something differently. (I know I am not a big help, sorry about that. I am just providing ideas )

[CodeIain]

All ideas, have been great, i think it is a issue with my shader i have never built a shader before so its a big learning curve.

[CodeIain]

When I run my playground example i get the following in the logs but my shader compiles in the CYOS

 

[17:38:51]: Error: ERROR: 0:1: 'The' : syntax error

 

[17:38:51]: Defines:

 

[17:38:51]: Fragment shader:customFragmentShader

 

[17:38:51]: Vertex shader:postprocess

 

[17:38:51]: Unable to compile effect:

[CodeIain]

also when i run this locally I get 

 

If I use my Vector Shader 

BJS - [09:24:22]: Error: ERROR: 0:1: '' : No precision specified for (float) 

ERROR: 0:2: 'attribute' :  supported in vertex shaders only  

ERROR: 0:2: '' : No precision specified for (float) 

ERROR: 0:3: 'attribute' :  supported in vertex shaders only  

ERROR: 0:3: '' : No precision specified for (float) 

ERROR: 0:4: '' : No precision specified for (float) 

ERROR: 0:6: 'assign' :  l-value required "v_texcoord" (can't modify a varying)

ERROR: 0:7: 'gl_Position' : undeclared identifier 

ERROR: 0:7: 'assign' :  cannot convert from '4-component vector of float' to 'float'

 

 

And If i use my fragmentShader I get 

Error: Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: v_texcoord

 

 

my Vector Shader looks like this

 

    uniform mat4 worldViewProjection;        attribute vec3 position;        attribute vec2 texcoord;        varying vec2 v_texcoord;        void main(){            v_texcoord = texcoord;            gl_Position = worldViewProjection * vec4(position, 1.);        }

and my fragment shader looks like this 

precision mediump float;uniform sampler2D texture;uniform float scale, aspect, time;uniform mat3 transform;varying vec2 v_texcoord;#define PI 3.141592653589793void main(){	vec2 rads = vec2(PI * 2., PI);	vec2 pnt = (v_texcoord - .5) * vec2(scale, scale * aspect);	// Project to Sphere	float x2y2 = pnt.x * pnt.x + pnt.y * pnt.y;	vec3 sphere_pnt = vec3(2. * pnt, x2y2 - 1.) / (x2y2 + 1.);	sphere_pnt *= transform;	// Convert to Spherical Coordinates	float r = length(sphere_pnt);	float lon = atan(sphere_pnt.y, sphere_pnt.x);	float lat = acos(sphere_pnt.z / r);	gl_FragColor = texture2D(texture, vec2(lon, lat) / rads);}

and am using the BABYLON.PostProcess like this.

 var postProcess = new BABYLON.PostProcess("Down sample", "../shaders/fragmentShader", ["worldViewProjection"], null, 0.25, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, true);                return scene;

 

Just don't why this is not working any help would be great

[CodeIain]

Ok I am making some progress

 

My shader not renders in the CYOS http://www.babylonjs.com/CYOS/#2L9YGY#5 doesn't give the result I want but I can work on that but when ever I try and run this as a BABYLON.PostProcess i get the error

Error: Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: v_texcoord

So how do I define what vertex shader is used on a PostProcess?

[CodeIain]

Am I just being a complete idot?

 

Lets take a step back, I am trying to take a 3D view like this http://www.babylonjs-playground.com/#QSMQ0#1 and apply a shader to it so it rather that render in 3D renders like the image in my first post

 

I have been trying to do this with a fragment shader but as i want to apply this to all Meshes in the scene not there textures.

 

So would I need to the do this via a vector shader to manipulate the points of each vector?

[GameMonetize]

Hello did you read the documentation? http://doc.babylonjs.com/tutorials/How_to_use_PostProcesses

 

You have to use only the defined values:

varying vec2 vUV;

uniform sampler2D textureSampler;

 

And do not forget to add .fx MIMETYPE to your web server