Vector/Matrix library in Javascript voor Browser Based Real-Time 3dmensionale Rendering.

Door

Kaj Dijkstra

Proeve van bekwaamheid voor MBO Friesland college.

Leeuwarden, Friesland College, Media technologie niveau 4, Nederland 2008

Een Snelle, robuuste en complete bibliotheek die Matrix en vector wiskunde mogelijk maakt met behulp van javascript In het browser, Met voornamelijk applicaties in Real Time rendering Met behulp van WebGL .

Herfst 2010 Kaj Dijkstra

Abstract
Renderen van 3dmensionale objecten met behulp van desktop programmeer talen als c++ en
c# zijn alweer 2 decennia een populaire ontwikkeling, De ontwikkelde technieken zijn van een wetenschappelijke applicatie gevalueerd naar een populaire commercile technologische markt. De laatste 10 jaar is er veel initiatief getoond om deze techniek te implementeren in het browser, er zijn veel browser based apis en plugins ontwikkelt. Maar doordat er nooit een als standaard is omarmd door de communities, zijn deze technieken nooit echt ontwikkeld tot een snelle, robuuste en ondersteunde technologie die voor iedereen in alle browsers te gebruiken zijn. Met de komst van WebGL gaat dit allemaal veranderen WebGL is een openGL ES 2.0 Based api die is gemaakt voor browser based 3d rendering, Dit initiatief is al geimplmenteerd in de eerst volgende versie van firefox en chrome en nog een aantal browsers. Met deze ontwikkeling zullen alle mensen met een dergelijk browser zonder iets te downloaden jouwn 3dmensionale applicaties kunnen uitvoeren, en zal het internet net als de desktop wereld een 3d transformatie ondergaan. Veel nuttige applicaties krijgen weer een extra stuk vrijheid. Ook is in de nieuwste firefox een nieuwe real-time audio api ingebouwt. All deze nieuwe functionaliteiten worden aangestuurd door de script taal javascript.

Deze Javascript library maakt het mogelijk om alle lineaire algebra, Die nodig is bij manipuleren van 3d/4dmensionale objecten, te doen met simpele methodes en objecten. Jammer genoeg ondersteund javascript geen operator overload dus methodes als addition, subtraction en dividing moeten worden gedaan via functies en niet met de wel bekende symbolen (-.+, *, /). Ik heb enkele optimalisaties doorgevoerd als: het meiden van loops, het gebruiken van webglfloatarray, gebruik maken van local caching.

Ik heb gekozen voor deze opdracht omdat het ten eerste uitdagend en ik dit nog nooit geschreven heb, Ook omdat ik hiermee eigenlijk veel aspecten van wat ik de laatste jaren heb geleerd kan gebruiken. Ik wil mezelf graag verder ontwikkelen in het maken van 3dmensionale applicaties (ook in het browser). En daardoor is het denk ik zeer nuttig om al deze materie nog 1 keer allemaal te verwerken in deze opdracht. Alles wat ik hierin definieer is eigenlijk de basis van het programmeren in 3d. En ik zal deze bibliotheek ook nog kunnen gebruiken in de toekomst dus dat is ook nog een plus punt.

II

Inhoudsopgaven
Hoofdstuk 1 Introductie Hoofdstuk 2 Definities .. Hoofdstuk 3 Vector Operations ...
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 Create . Add Subtract .. Negate . Scale . Normalize Division . Cross . Dot product

1 2 3

3.10 Length . 3.11 Direction ..

Hoofdstuk 4 Matrix Operations ..

4.1 4.2 4.3 Identity . Transpose . Determinant ..

Hoofdstuk 5 Matrix on Vector Operations

5.1

Multiplication ...

Hoofdstuk 1 Introductie

Ik gebruik Engelse terminologie omdat dit het beste aansluit bij de toepassingen waar deze library voor gebruikt kan worden,

Hoofdstuk 2 Definities

Orthogonal: in het Nederlands orthogonaal betekent dat twee objecten recht op elkaar staan als een rechthoek

Scalar: in het Nederlands scailar is een eenheid wat bestaat uit alleen een nummer en als deze word vermenigvuldigd met een matrix of vector verandert hij alleen de lengte en niet de richting.

Unit length: In dit geval altijd 1.

Columns en Rows: In het Nederlands columns en rijen, elke metrix heeft net als een normale tabel rijen in de verticale richting en columns in de horizontale.

Vector: Een getal met meerdere dimensies. Een vector heeft altijd 1 richting en
1 lengte en voor elke dementie een rij. Een vector heeft altijd evenveel rijen als dimensies. Matrix: Een tabel met nummers, een matrix kan rijen en columns hebben en heeft veel handige eigenschappen en word gebruikt om transformaties uit te voeren met vectoren of andere matrices zoals schalen, roteren of verplaatsen.

Hoofdstuk 3 Vector Operations

3.1

Create

Maakt een collumn vector en slaat deze op in een webglfloatArray. Formule: Code:

vector3 = function(x, y, z) { var vector = initVectorSpace(3); this.x = 0, this.y = 0, this.z = 0; vector = { 0 1 2 "x" "y" "z" : : : : : : x, y, z, x, y, z };

return vector; }

3.2

Add

Neemt twee vectors en telt de overeenkomende scalars met de zelfde index bij elkaar op.

Formule: Code:

A+B = [a1+b1, a2+b2 ... an+bn]

vector3.add = function(a, b) { return vector3( a[0]+b[0], a[1]+b[1], a[2]+b[2]); }

3.3

Subtract

Neemt twee vectors en Trekt van elke element in de vector de overeenkomende scalars van elkaar af.

Formule: Code:

A-B = [a1-b1, a2-b2 ... an-bn]

vector3.subtract = function(a, b) { return vector3( a[0]-b[0], a[1]-b[1], a[2]-b[2] ); }

3.4

Negate

draait de vector 180 graden door alle elementen te vermenigvuldigen met -1.

Formule: Code:

Negate(A) = -1A = [-1*a1, -1*a2 -1*an]

vector3.nagete = function(a) { return vector3( }

-1*a[0], -1*a[1], -1*a[2] );

3.5

Scale

Vermenigvuldigt alle elementen van de vector met de scalar, maar laat de richting hetzelfde.

Formule: Code:

A*Scalar = [Scalar *a1, Scalar*a2 Scalar*an]

vector3.scale = function( v, s ) { return vector3( s*v[0], s*v[1], s*v[2] ); }

3.6

Normalize

Berekent een vector van unit length en laat de richting hetzelfde, Komt overeen met de direction methode.

Formule: Code:

Waar

de lengte van de vector is.

vector3.normalize = function( a ) { if(a[0]==0&&a[1]==0&a[2]==0) return vector3.zero(); var l = 1/vector3.size(a); return vector3( a[0]*l, a[1]*l, a[2]*l ); }

3.8

Cross product

Neemt 2 vectoren en berekent een nieuwe vector die loodrecht op de andere 2 staat. Er zijn altijd 2 vectoren mogelijk beide tegenovergesteld, het Crossproduct geeft de vector volgens de right hand rule. Voor tegenovergestelde kijk bij Negate.

Formule:

Code:
vector3.cross = function( a, b ) { return vector3( (a[1]*b[2])-(a[2]*b[1]), (a[2]*b[0])-(a[0]*b[2]), (a[0]*b[1])-(a[1]*b[0]) ); }

3.9

Dot product

Formule:

Code:
vector3.dot = function(a, b) { return (a[0]*b[0])+(a[1]*b[1])+(a[2]*b[2]); }

3.10 Length
Geeft de lengte van de vector zonder richting als scalar, met behulp van de stelling van pythagoras. De square van alle elementen bij elkaar opgeteld en over dat geheel de square root.

Formule:

Code:
vector3.size = function( a ) { return Math.sqrt( (a[0]*a[0]) + (a[1]*a[1]) + (a[2]*[2]) ); }

3.11 Direction
Zelfde als de unit vector kijk voor meer informatie bij 3.6 Normalize

Formule:

Code:
vector3.direction = function ( a, b ) { var subtr = vector3.subtract( a, b ); if(a[0]==0&&a[1]==0&a[2]==0) return vector3.zero(); var unitv = vector3.normalize( subtr ); return unitv; }

Hoofdstuk 4 Matrix Operations

4.1 Identity

Een Matrix met de eigenschap dat als je er een andere vector of matrix mee vermenigvuldigt, je dezelfde matrix of vector weer terugkrijgt.

Formule:

Code:
matrix3.identity = function() { return matrix3([ } 1, 0, 0, 0, 1, 0, 0, 0, 1

]);

4.2

Transpose

Een matrix waar de column en row indexen worden verwisseld. Dus bijvoorbeeld 3x1 wordt 1x3 enz..

Formule:

Code:
matrix3.transpose = function(a) { return matrix3([ a[0], a[3], a[6], a[1], a[4], a[7], a[2], a[5], a[8] }

]);

4.3

Determinant

Alleen van toepassing op een matrix met evenveel columns als rows, als het een eindige matrix is geeft hij een scalar van het bereik van de matrix.

Formule:

if

then det (A) = aei + bfg + cdh afh bdi ceg.

Code:
matrix3.determinant = function(a) { return (a[0]*a[4]*a[8])+ (a[1]*a[5]*a[6])+ (a[2]*a[3]*a[7])(a[2]*a[4]*a[6])(a[1]*a[3]*a[8])(a[0]*a[5]*a[7]); }

4.5

Multiplication

Vermenigvuldigd elke rij met de overeenkomende column, dus stel dat het 1x1 element wordt berekend (dat is altijd de meest links boven), dan word de eerste rij van de row matrix vermenigvuldigd met de eerste column van de column matrix.

Formule:

Code:
matrix3.multiply = function(a, b) { return matrix3([ (a[0]*b[0])+(a[1]*b[3])+(a[2]*b[6]), (a[0]*b[1])+(a[1]*b[4])+(a[2]*b[7]), (a[0]*b[2])+(a[1]*b[5])+(a[2]*b[8]), (a[3]*b[0])+(a[4]*b[3])+(a[5]*b[6]), (a[3]*b[1])+(a[4]*b[4])+(a[5]*b[7]), (a[3]*b[2])+(a[4]*b[5])+(a[5]*b[8]), (a[6]*b[0])+(a[7]*b[3])+(a[8]*b[6]), (a[6]*b[1])+(a[7]*b[4])+(a[8]*b[7]++), (a[6]*b[2])+(a[7]*b[5])+(a[8]*b[8])

]);