Hvordan bruger man WebGL shaders ?

Vertex er ikke en kant, men en knude.

    *
   /|
  / |
 /  |
*---*

Vetex'ene ville være * i det ovenstående og ikke -


En vertex shader tager unikke (varying i GLSL) værdier for, hver knude og konstante værdier (uniform i GLSL) i alle knuder.

Vertex shaderen bruger de givet værdier og foretager transformationer af disse (Hvis det er nødvendigt.) På din side for eksempel tages en knudes position i verdenskoordinatsystemet (vertexPosition) og transformeres til projectionkoordinatsystem (gl_Position) med de konstante matricer:
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

De transformeret værdier gives til rasterization (Der foretager en interpolation af værdierne mellem to knuder, som regel linæer).

 A      C       B
 *------?-------*
r = 0   r=?    r = 1

I den linære interpolation vil værdien af r i C være afhængig af afstanden mellem A og C, B og C samt værdien af r i A og B. Desto tættere C er på et af ende punkterne desto tættere er den interpoleret værdi på dette ende punkts værdi.


I en trekant foretages, der højest tre af disse udregninger:

     A(ra)
     *
    / \
   / D \
  /     \
 *-------*
 B(rb)   C(rc)

For at finde værdien af r i D, findes værdien af den interpoleret værdi over to af kanterne.

    A(ra)          A(ra)
     *             *
    /               \
  rab               rac
  /                   \
 *                    *
B(rb)               C(rc)

Når du så har rab og rac værdierne interpolere du mellem disee.

    A(ra)          A(ra)
     *             *
    /               \
  rab------r--------rac
  /                   \
 *                    *
B(rb)               C(rc)

Denne handling bliver foretaget for, hvert fragment i trekanten som fragmentshaderen skal behandle, men før du kommer til koden for fragment shaderen.


Koden i fragment shaderen her dermed inddate bestående interpoleret (varying) værdier mellem trekantens knuder. og konstante værdier (uniform) for alle fragmenter.
Disse inddataer bruger koden så til at sætte et fragments farve (I den simpleste version).



Værdier som oftest bliver givet som unikke i vertex shaderne er:
positionen i modelkoordinatsystem
normaler i modelkoordinatsystem
farve
uv koordinater i texturekoordinatsystem

Værdier som oftest bliver givet som konstante i vertex shaderne er:
transformations matricer fra model til view og view til projection.
lys (position, styrke) i verdenskoordinatsystem


Værdier som oftest bliver givet som unikke i fragment shaderne er:
positionen i projectionkoordinatsystem
normaler i verdenskoordinatsystem
farve
uv koordinater i texturekoordinatsystem

Værdier som oftest bliver givet som konstante i fragment shaderne er:
lys (position, styrke) i verdenskoordinatsystem
texture
farve




PS: forbehold for fejl i overstående

Du kan vel sagtens bare se hvordan iq bærer sig ad med hans - WebGL er jo javascript.

En shader er et program der behandler de pixels der bliver tegnet. Den er som regel delt op i to:

Fragment shaderen er per pixel
Vertex shaderen er per vertex (kant).

Det iq har gjort, og gør ved mange af hans små-effekter, er at han tegner en stor firkant der dækker hele viewet og så laver han effekten i en fragment shader.

Hvis du vil lære om 3D grafik og programmering må jeg nok anbefale at du tager at læser lidt om OpenGL. Jeg ved ikke lige noget om WebGL så jeg kan ikke rigtig lige anbefale noget der

På den side du har linket til hvis du kigger i kildekoden er der et link til et javascript fil: "effect.js". Helt øverst i denne fil har de en vertex shader og en fragment shader. Omkring midten i filen, NewShader, laver de en ny vertex og fragment shader, loader shaderkilderne, kompilerer, attacher dem til et programobject og linker program objekttet så det er klart.

Vertex er ikke en kant, men en knude.

Ja, hov - det var også det jeg mente

Wow det fatter jeg bare ikke noget af.
Kan godt se jeg nok aldrig kommer til at forstå det.

Har aldrig heller fatter det med cos og sin og sådan noget.

Ville bare gerne have lavet nogen eksempeler med textures i WebGL så man kunne se hvor fedt det så ud men fatter jo ikke en skid af det.

Hvis i andre lavet noget med WebGL nu eller senere så vil jeg gerne se det.