javascript - How to implement a scene graph to WebGL -

i have trouble organizing various matrix-multiplications implement scene graph webgl-scene.

until now, used have 3 matrices, projectionmatrix, viewmatrix , modelmatrix (the normalmatrix aside), multiplicated in same order. have node-object, holds information needed draw something.

while projectionmatrix , viewmatrix updated separately drawscene-function, modelmatrix equal each nodes localmatrix, - every drawing-call - set identity , transformed way want.

the nodes stored in array (nodelist) , when drawscene-function called, loop through list , tell each node draw itself.

now i've read tutorial implementing scene graph webgl on www.webglfundamentals.org , tried add feature scene-function, though tutorial written, still bit confused of how done.

following tutorial, each node has have not localmatrix, worldmatrix. then, if node root-element (i.e. when has no parent-node), localmatrix , worldmatrix identical, otherwise, if there is parent-node, worldmatrix of child-node computed multiplying localmatrix worldmatrix of parent-node, worldmatrix of each node in former code used modelmatrix / localmatrix.

maybe can't see forest trees, ask myself when , call function update world-matrices of nodes , when set matrices identity, once all, root-node or each node separately?

i mean, code provided in said tutorial traversing recursively through children of node, nodelist-array doesn't reflect potential hierarchical relations of nodes , every drawing-call, local-matrices set identity. so, cannot work way, can it?

edit

sorry previous answer else , not implemented way in tutorial (sadly).

which - every drawing-call - set identity , transformed way want.

why set identity? shouldnt that.

but nodelist-array doesn't reflect potential hierarchical relations of nodes , every drawing-call, local-matrices set identity. so, cannot work way, can it?

purpose of scene graph simplify , avoid additional mathematical operations. require nodes in tree hierarchy.

initialization

lest have nodes tutorial:

var node = {    localmatrix: ...,  // "local" matrix node    worldmatrix: ...,  // "world" matrix node    children: [],      // array of children    thingtodraw: ??,   // thing draw @ node }; 

then have 2 things, root node of entire scene , nodelist important nodes (these might transformed in future).

var rootnode = new node(); var nodelist = []; 

now put stuff in node hierarchy, nodes part of rootnode. , these might transform in future save in nodelist.

stages repeat each tick()

stage 1 - update

update location of elements want, means pick stuff nodelist , transform localmatrix. doesnt parent or children.

stage 2 - find world position

when updates done, need recalculate worldmatrices. means destroy old worldmatrix , create new one. rootnode.updateworldmatrix(). go top bottom , calculate new worldmatrix each node in tree based on parent worldmatrix , node localmatrix. not change localmatrix.

stage 3 - drawcall

now old known projection, view , model matrix. rootnode.draw(), recursive function draw each node in hierarchy. model matrix = worldmatrix.

about

as see there no setidentity in whole process (worldmatrix might set identity insted of being destoried dont see advantage in this). bad thing if have forest full of trees , trees doesnt move nor ground, every tree recalculate world position anyway. can prevented augumenting stage 1 , 2 , extending node flag.

edit 2

model matrix representation how model transformed (understand translated, rotated , scaled) 0,0,0 position (understand base point).

scenegraph 1 thing, changes each models basepoint static (= static position 0,0,0) relative (another model position).

each model still has own model matrix, represent transformation base point.

but think cannot transform matrices on , on , , again , in different ways without set-back, can you?

this can , should do! matrix 4x4 contain 16 numbers , has predefined operations. position, rotation , scale 3 vectors, each 3 numbers, 9 numbers , these represent current state of model (in 3d, in 2d have different transformations). componed them 1 mat4, mat4 contains current state of model , dont need maintain 3 vectors anymore, in matrix.

when call mat4.translate(), mat4.rotate(), mat4.scale() transfrom model. mat4.multiply(mat4) applies not 1 set of transformations.

in addition, matrix designed to not have operations commutative! mata * matb != matb * mata. helpful example, if first rotate camera , translate it, move in direction looking. doesnt want it, of time want it.

in case doesn't want it, set matrix identity, reset model default position , transformation in way want.

for example car velocity, each tick() small delta translation on matrix , move in direction heading. , if player turning right, small delta rotation right , translation. , have nice smooth , easy car movement few lines of code.

in scene graph there world position each model, sum of previous parent matrices , model matrix one. prevents multiplications each model separately deep simbling models doenst require lot of multiplications. important, imagine need multiplications 60 times per sec , cpu.

this not mind, stuff matrices native in glsl already. graphic cards prepared work matrices.

i mean, have recognized i'm not matrix-math

you dont have to, need use 4 functions: translate, rotate, scale , mutliply , know model state represent 1 matrix , all. behind ment in blackbox. dont have know how model distance matrix, need know: once modelviewprojectionmatrix * vertex, model rendered.