Aliasing generating normal map from height map

I'm doing bump mapping with webGL shaders. Everything was fine until I was generating normal map from the height map. I generated the height map with another shader and rendered it as a texture. Then read the texture (heigh map) and generate normal map from it with the way described in this thread
http://stackoverflow.com/questions/5281261/generating-a-normal-map-from-a-height-map

The normal map looks fine except it has pretty serious aliasing problem!



The aliasing problem should come from the size of the texture doesn't match the canvas's size but since The texture came from the previous rendering, they should have the same size. And the texture parameters were set with gl.NEAREST (turn off the mipmap) and gl.CLAMP_TO_EDGE (turn off the repeating) so even it's not power of two, it should be alright. The offset in the shader is like [1.0/canvas.width, 1.0/canvas.height]

Could anyone have any idea what causes the aliasing? Thank you so much,

Yi

[WebGL] Pass an array into fragment shader

At this moment (10/10/2011) is impossible!!

I wanna do multiple light sources so I have to pass a series of locations. The only way to do it now is to use texture. At this moment, webGL does support floating-point texture but my graphics card however doesn't. Here is the link to see if your card supports it (www.kludx.com/opengl_versions.php)

Here is the code to move your data into the texture:

var pix = [];

for from i=0 to n

{

for from j=0 to n

{

var x=...

var y=...

var z=...

pix.push(x,y,z);

}

}

Where n is the size of your array. I've searched on the internet, saying that using 2D array is better than 1D either performance is better or some of the hardware doesn't support 1D texture. So if you want a 1D array just use nx1 2D texture.

Here is the code you set up the texture:

texture = gl.createTexture();

gl.activeTexture(gl.TEXTURE0);

gl.bindTexture(gl.TEXTURE_2D, texture);

gl.pixelStorei(gl.UNPACK_ALIGNMENT,1);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 32, 32, 0, gl.RGB, gl.FLOAT, new Float32Array(pix));

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

However, if your card doesn't support floating-point texture (like mine,) you have to use fixed point texture.

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 32, 32, 0, gl.RGB, gl.UNSIGNED_BYTE, newUint8Array(pix));

And then you can set up the shader parameters and access the texture like the normal image textures.

[Ignore this part if you can use floating-point texture]

If you only can use fixed point texture. The input value will be automatically scaled from [0,255] to [0,1]. So you will lose some precision and also you will have a fixed range of data. If you want to have data in [-100,100], All you have to do is to scale to [0,255], get [0,1] in the shader and then scale back to [-100,100]

Project Journal 10/06 [Multiple Light Sources]

[Finished]

1. Part of the scene graph. Now it can add transform groups, and models. Besides, it can change the model matrices under the transform groups.

2. Model loading: The model hierarchy is Scene->Transform Group->Model->Mesh.

A Scene can contain several Transform Group.

A Transform Group can have other transform groups and Models.

A Model will contain several meshes that compose of ONE entire model.

A Mesh is where the real vertices locate. A complicated model might have several meshes object.

[To do]

1. Multiple Light Sources:

I just found out that in webGL, pixel shader doesn't support uniform array indexing which means you can pass an array into the shader but only the vertex shader can access it.

So to do multiple light sources, the only way is to use texture.

Quote:

http://www.khronos.org/registry/webgl/specs/latest/#DYNAMIC_INDEXING_OF_ARRAYS "WebGL only allows dynamic indexing with constant expressions, loop indices or a combination. The only exception is for uniform access in vertex shaders, which can be indexed using any expression."

Work Journal 10/04

[Finished]

1. Place of indication selection system. (Interactively select the place you want to highlight)

[Bug]

1. The mini lights don't work along with global light sources.

2. Some selected place don't have light emitted there.

Project Journal 10/03

[Finished]

1. I've finished the new model loading mechanism. I use the utf8 model format from the google group. It works pretty good.

2. New scene management utilities are installed named "spidergl." It provides the basic animation like function: load, update, draw.

[To Do list]

Since I've changed pretty much the whole architecture, there are many things need to be fixed.

1. A strong aliasing shows up in the model.

2. Lighting.

3. Scene control (like where to add lights and where to add new objects.)

4. Draw functions.

Project Journal 10/01

[Finished]

1. Per pixel shading

2. OOP design

[To DO List]

1. Scene graph

2. Model importing

3. Multiple light sources

Nice website for normal matrix

When importing an object, both the vertices and normals are defined in Object Space. However, in the shader, if we want to do the calculation in camera space, we multiply the vertex with the Model View Matrix (M) to make it from object space to world space but we multiply (M^-1)^T

with the normal to make it from object space to world.

This article is pretty clear why there is the difference.

http://www.lighthouse3d.com/tutorials/glsl-tutorial/the-normal-matrix/