I'm trying to understand the ambient occlusion technique described here, but I've trouble comprehending what exactly is the pixel shader doing.
Is the pixel shader invoked on points that belong to the surfaces of occlusion volumes? Can anyone explain on a simple scene (like a cube corner seen from inside) how pixels get their AO values?
(Crossposted from game stackexchange)
Basically Pixel Shader is responsible for reflecting the light in a object depending on what angle the poligons is facing the virtual light source. in that case AO is made possible by the help of pixel shader emulating the light and its amount in every single texture. Note: Pixel Shading is real time so if the object or the viewing point moves, the light also move and make a realistic textures.
Related
I'm building a simulation with directional lighting where multiple sprites will be rendered in the scene. The sprites will be simple geometry layered with a normal map.
I'm using this example as a starting point for my code.
The problem is that if an object is rotated, the lighting within the scene no longer reflects off the normals on the rotated sprite correctly. For instance, lighting up the right-hand side of an object that is rotated by 180° will brighten the left-hand side of the object. I tested this by rotating block1 in the above example.
No rotation.
180° rotation.
I understand why this is happening. But I'm not sure how to approach resolving it. Is it possible to allow rotated normal maps to correctly reflect light? How?
I'd like to know what's reason to use Ray Marching/Ray casting over rasterization? Is it better only in specific cases?
Thanks for your answers.
Ray casting and rasterization are two totally different methods of rendering. Rasterization is designed to be very fast, and lighting is typically computed on a per-fragment basis in a fragment shader (or pixel shader). Ray casting (a type of ray tracing) actually simulates light rays in a sense, creating a more accurate render, with a much larger computation time.
The main advantage of ray tracing(in general) is in the quality of the image.ray traced image vs rasterized. Ray tracing actually simulates a ray of light from the camera through each and every pixel of your screen while also taking into effect natural phenomena like reflection and refraction while computing the final color for the pixel,whereas in rasterization the 3D objects are simple squashed onto the pixels of the screen.
i'm programming in WebGL (using OpenGL shaders) simple model loader. I've implemented phong shading in fragment shader. However when i load larger objects than simple monkey/cube and turn camera out of light source, meshes looks strange (aliased?). Some of them are even lightened although they should be hidden (black).
Lightened side is OK:
Other side is wrong:
I calculate normals for every vertex same way, so normals should be OK (when i turn camera on lightened side of car, everything goes right).
Thank you very much for your tips.
This looks like an single sided vs two sided lighting issue to me. In case your mesh consists of only a single "layer" of faces, those will have normals that point into only one direction. If single sided lighting is used, then the backface, i.e. if the light is on the side from which the normal points away, will look weird.
There are three ways to overcome this:
Use two sided illumination
draw the object twice with back faces culled, then flip the normals and culling the front face
Give the mesh thickness, so that there are two sides (you should enable backface culling then)
I think i found bug in my Collada Parser where i do not respect exported normals but i'm calculating new one. This causes inverted normals from time to time (this door mesh of this car for example). Anyway two sided rendering has to be implemented too.
Thank you.
I understand the difference between Lambert and Phong in general computer graphics. I also understand how we can change and create our own materials using three.js. But I cannot work out the difference between MeshLambertMaterial and MeshPhongMaterial in their default states.
I have tried switching them on a scene with one directional light source and 125 spheres, I cannot see any differences whatsoever. Three.js is being used in a chapter of my book and so I need to make sure all information is accurate and precise.
Thanks,
Shane
Shane, it's not your fault that you're confused.
Lambert is an illumination model (with a physical basis) for the light reflected off a surface, expressed in terms of the incoming illumination's direction with respect to the surface normal at the point of incidence.
Phong is a more nuanced shading model (albeit a more hacky one) which says that light is composed of ambient + diffuse + specular components. It treats the ambient component as constant everywhere (hack!), the diffuse component using the Lambertian model above, and the specular component using a power-law falloff (which is a clever hack, roughly approximating actual BRDFs).
The word "Phong" is also an interpolation method (when used in the context of modern triangle-based rendering pipelines). When computing the illumination at a pixel in the interior of a triangle, you have two choices:
Gouraud shading: Compute the color at the three vertices and interpolate in the interior, using barycentric coordinates, or
Phong shading: Using the normal at the three vertices, interpolate the normal in the interior and compute the shading using this interpolated normal at each pixel.
This is why (as #RayToal pointed out), if your specular "highlight" falls in the interior of a triangle, none of the vertices will be bright, but Phong shading will interpolate the normal and there will be a bright spot in the interior of your rendered triangle.
I am assuming you want the exact difference between MeshLambertMaterial and MeshPhongMaterial as implemented in three.js.
You have to differentiate between the shading model and the illumination model. Three.js does not implement 'pure' Phong or Lambert models.
For MeshLambertMaterial, the illumination calculation is performed at each vertex, and the resulting color is interpolated across the face of the polygon. ( Gouraud shading; (generalized) Lambert illumination model )
For MeshPhongMaterial, vertex normals are interpolated across the surface of the polygon, and the illumination calculation is performed at each texel. ( Phong shading; (generalized) Phong illumination model )
You will see a clear difference when you have a pointLight that is close to a face -- especially if the light's attenuation distance is less than the distance to the face's vertices.
For both materials, in the case of FlatShading, the face normal replaces each vertex normal.
three.js.r.66
In computer graphics, it is very common to confuse Phong reflection model with Phong shading. While former is a model of local illumination of points like Lambertian, the later is an interpolation method like Gouraud shading. In case you find it hard to differentiate between them, here's a list of detailed articles on each of these topics.
http://en.wikipedia.org/wiki/List_of_common_shading_algorithms
If you know a little GLSL, I think the best thing for you to do is to look at the vertex/fragment shaders generated in both cases and look for the differences. You can use http://benvanik.github.com/WebGL-Inspector/ to get the code of the programs, or put a console.log() at the right place in three js sources (look for buildProgram, you should output prefix_fragment + fragmentShader and prefix_vertex + vertexShader to see the program code).
Also, you can have a look to the building blocks used to create both shaders:
Lambert: https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L2036
Phong: https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L2157
It may be more readable than to look at the source program code.
I'm trying to produce a shader to replicate a white plastic object with a colored light inside. Either by having a shader that will be translucent and if I put a light inside the object the light will show through or by having a shader that fakes the effect of a light inside.
The effect im going for is kinda like a light going through a lamp shade similar to these pictures:
Ideally I would be able to control the strength and colour of the light to get it to pulse and rotate through some nice bright fluro colours
Though I'm not sure where to start!
My question is does anyone know the techniques I should be researching to be able to produce such a shader or have an example of the same/similar shader I can use as a starting point? Or even if you want to provide a shader that might do the job
You might want to do some research on Subsurface Scattering to get an idea of how to go about recreating this kind of effect. Subsurface scattering is important for rendering realistic skin but in that case you are generally dealing with a light in front of or behind a translucent object rather than inside it. The same basic principles apply but some of the tricks and hacks used for real time subsurface scattering approximations may not work for your case.
Nice photos. It looks like the type of translucent plastic you use can make a big difference. What I see is that the brightness of the plastic at each point is based on the angle between the ray from the light source to that point, and the surface normal at that point. (The viewer angle is irrelevant.)
When the vector from internal light source to surface point is nearly parallel to the surface normal vector, the surface point is bright; when they're nearly perpendicular to each other, the surface point is dark. So try using the dot product of those two vectors. Don't forget to normalize.
In other words, it's basically diffuse reflection, except that you're adding the effect of internal light sources (transmitted) to the effect of external light sources (reflected). See Lambertian_reflectance as a starting point.
You may also want to add a little specular reflection on top of that.
The third image is more complex: I think it's showing the shadows of the inner surfaces on the outer ones.
You can also fake this effect, by translating diffuse lighting from back face to front face. More specifically, you should mix lighting on both sides using some transfer function. But this method only appicable for thin walled objects.