Drawing an image as background

[jbarton]

Hi
I would like to draw an image as background in a WebGL scene.Searching through the web, i found the following in this G-Group:

You should be able to do it by rendering a simple quad with a texture.
One way to render a quad as a background is to get rid of the matrices
in the vertex shader, and size the quad -1 to 1 in both directions.

My vertex shader now looks like this:
void main(){
gl_Position = vec4( position, 1.0 );
}
this fills the whole canvas with the color I defined in the fragment shader. Now my questions:
How can I put it somehow in the background? Now, it's drawn over all other objects, making them invisible.
How can I draw an image instead of a color there?

Thanks in advance

[jbarton]

PS: I need to have the background image in the image data, so setting the image as CSS background won't work.

[Jan Scheurer]

I dont really understand what your problem is, 

if you want it behind everything you have to draw it first.

2011/7/31 jbarton <jungl...@gmail.com>

[Robert Steckroth]

Ok I got it! After fooling around with my shaders I was able to use
blending on the canvas
to expose the html background. Then turn off or decrease the alpha on
the scene you
need to draw.

--
Bringing game to younix
Bust0ut Entertainment  ---
PureBreedDefense.com --> TheLinuxGame.com --> PBDefence.com
"Finding the exit without looking"

[jbarton]

Ok, i probably have to explain it better :-)
When right clicking on a WebGL scene, you can save the image, but only the parts that you have rendered. HTML/CSS backgrounds are not included in the image. See this example: http://mrdoob.github.com/three.js/examples/webgl_materials_grass.html
In Firefox, when right-clicking on the image and selecting "Show image", you can see the grass but the background is gone (because the background is defined in the HTML part). It's the same with a background image.
This is why I have to render my image with WebGL in order to show up in the image when it's saved/viewed.

[Gregg Tavares (wrk)]

There are a few relatively simple ways to do this. Here's 2 of them.

#1) gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

#2) Draw your background image

#3) call ctx.clear(gl.DEPTH_BUFFER_BIT);

#4) draw the rest of your scene.

Or

#1) gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

#2) call gl.depthMask(false);

#3) Draw your background image

#4) call gl.depthMask(true);

#5) draw the rest of your scene.

The second method is probably more efficient than the first.