[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] software polygon graphics style



On Mon, Jun 18, 2012 at 12:08 PM, Tom Sparks <tom_a_sparks@yahoo.com.au> wrote:
rend386 had these shading modes
* flat shading
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

* cosine shading
You can do it per face as in:
uniform mat4 proj, view, model;
uniform mat3 view_rot, model_rot;
attribute vec3 position, face_center, face_normal, color;
varying vec3 vFace_normal, vFace_center, vColor;
void main(){
    vFace_center = (view * model * vec4(face_center, 1.0)).xyz;
    vFace_normal = view_rot * model_rot * face_normal;
    vColor = color;

    gl_Position = proj * view * model * vec4(position, 1.0);
}

uniform vec3 lightpos;
varying vec3 vFace_normal, vFace_center, vColor;
void main(){
    vec3 lightdir = normalize(lightpos - vFace_center);
    vec3 incident = dot(-lightdir, vFace_normal);
    vec3 excident = vColor * incident;
    gl_FragColor = vec4(excident, 1.0);
}

Or per fragment as in:
uniform mat4 proj, view, model;
uniform mat3 view_rot, model_rot;
attribute vec3 position, face_normal, color;
varying vec3 vFace_normal, vPosition, vColor;
void main(){
    vPosition = (view * model * vec4(position, 1.0)).xyz;
    vFace_normal = view_rot * model_rot * face_normal;
    vColor = color;
    
    gl_Position = proj * view * model * vec4(position, 1.0);
}   

uniform vec3 lightpos;
varying vec3 vFace_normal, vPosition, vColor;
void main(){ 
    vec3 lightdir = normalize(lightpos - vPosition);
    vec3 incident = dot(-lightdir, vFace_normal);
    vec3 excident = vColor * incident;
    gl_FragColor = vec4(excident, 1.0);
}   

* screen door transparency
WebGL does not have screen door blending natively. There is a feature called alpha to coverage which does do screen door transparency, but that implies anti-aliasing and the blend will be smoothed out. If you want that retro screen door transparency look, the easiest would be to create a texture that has a transparency pattern in it (as in say a 16x16 pattern where you have one of each value between 0 and 255, and distribute them randomly inside), then sample that texture in the fragment shading stage like so:

uniform vec2 viewport, vec2 pattern_size;
void main(){
  float screen = texture2D(pattern, (gl_FragCoord.xy*pattern_size)/viewport).r;
  // assuming alpha from somehwere
  if(alpha > screen)
    gl_FragColor = ...;
  else
    discard;
 
* metal effect
The metal effect can be achieved without a texture, I don't know the formula but I'm sure you'll find something.
 
do the screen-door and metal effect need to be textures?
Metal no, screen door yes.
 
star fox had affine texture mapping system
i've read though the opengl texture options, but I cant find any way of setting the texture options to affine
I don't know how you can trick the GPU not to produce non-affine interpolation. There probably is some way to escape it, but none occurs to me right now. You can't set it as an option on any account, you'll have to come up with a shader that breaks it on purpose.