3D Graphics in HTML5 Canvas - Kevs 3D

3D Graphics in HTML5 Canvas. by Kevin Roast. More HTML5 trickery at kevs3d.co.uk/dev and updates via @kevinroast. Not WebGL! WebGL ~= OpenGL ES 2.0. 3DGraphicsinHTML5Canvas byKevinRoast MoreHTML5trickeryatkevs3d.co.uk/devandupdatesvia@kevinroast NotWebGL! WebGL~=OpenGLES2.0 GPUHardware,ProgrammableShaders Graphics.Oldskool. EmulatingtheclassicOpenGL"fixedfunctionpipeline"insoftware. Forfun,notprofit. StartSimple "Fromsmallbeginningscomegreatthings."    Cartesiancoordinatesystem Signeddistancestothreemutuallyperpendicularplanes(pardon?) Xaxisgoestoright Yaxisgoesup Zaxisgoes"into"thescreen ObjectGeometry ListofPoints{X,Y,Z} ListofPolygons(triangles) ThreeverticesV0,V1,V2connectatriangletogether Materials;colour,properties,textures Hellotriangle { vertices:[ {x:0,y:0,z:0}, {x:1,y:1,z:0}, {x:1,y:0,z:0} ], polygons:[ { vertices:[0,1,2], colour:[255,255,255] } ] } MatrixMultiplication-scarymath! Homogeneouscoordinates 4DTransformationmatrices Model,viewprojection Crossproduct,dotproduct Euclideangeometry,quaternions !!!KILLMENOW!!! Homogeneouscoordinates Consider3Dverticesasa(x,y,z)triplet. Introduce4thelement'w'.Nowhave(x,y,z,w)vectors. rememberthis Ifw==1,thenthevector(x,y,z,1)-apositioninspace. Ifw==0,thenthevector(x,y,z,0)-adirection. Homogeneouscoordinatesallowofuseofasinglemathematicalformulatodealwithbothcases. Solvingofequationsforanycoordinate-includingthoseatinfinitybyusing'w'tomaptoprojectivespace. Transformationmatrices Amatrixisanarrayofnumberswithapredefinednumberofrowsandcolums. In3Dgraphicsweonlyuse4x4matrices. Allowsthetransformationof(x,y,z,w)vertices. multiplyingthevertexwiththematrix \[ \begin{bmatrix} a&b&c&d\\ e&f&g&h\\ i&j&k&l\\ m&n&o&p \end{bmatrix} \times \begin{bmatrix} x\\ y\\ z\\ w \end{bmatrix}= \begin{bmatrix} ax+by+cz+dw\\ ex+fy+gz+hw\\ ix+jy+kz+lw\\ mx+ny+oz+pw \end{bmatrix} \] Buildingmatricesishard Multiplyingbythemistedious glMatrix(seehttp://glmatrix.net/) "JavaScriptMatrixandVectorlibraryforHighPerformanceWebGLapps" varm=mat4.create(); mat4.multiply(out,m1,m2); mat4.rotateX(out,m,radians); varv=vec3.fromValues(1,0,0); mat4.scale(out,m,v); mat4.translate(out,m,v); CoordinateTransformations The3Dgraphicspipeline LocalObjectcoordinates->localmatrix Worldcoordinates->cameramatrix View(orEye)coordinates->perspectivematrix Perspective(&clip)coordinates->viewporttransformation Screencoordinates LocalObjectcoordinates Eachentitytypicallycentredontheorigin. localmatrix>Worldcoordinates Multiplybylocalmatrix;encodesscale,rotate,translate... Lightingisperformedin'worldspace' Movetheuniversenotthecamera "Iunderstandhowtheenginesworknow.Theydon'tmovetheshipatall.Theshipstayswhereitisandtheenginesmovetheuniversearoundit."  -CubertFarnsworth cameramatrix>View(orEye)coordinates Multiplyeachvertexbycameramatrix perspectivematrix>Perspective(&clip)coordinates Multiplyeachvertexbyperspectivematrix behindthefrustum(normaliseddevicecoordinates-1to1) Ignorepolygonscompletelyoutsidetheclippingbounds screencoordinates Weknowwhattodraw,andwheretodrawit... lightingandshading GlobalIllumination=AmbientLight+DiffuseLight+SpecularLight AmbientLighting-constantlightinginalldirections,colorsallpixelsofanobjectthesame. DiffuseLighting-boththelightdirectionandtheobjectsurfacenormal.Variesacrosssurfaceofanobjectduetolightdirectionandchangingsurfacenormalvector. SpecularLighting-thebrighthighlightsthatoccurwhenlighthitsanobjectandreflectsbacktowardthecamera. lightingandshading-normalvector Perpendiculartothesurface. Thecrossproductoftwosidesofthetriangleequalsthesurfacenormal. \[{a}=\{a_1,a_2,a_3\}   {b}=\{b_1,b_2,b_3\}\] \[{a}\times{b}=\{a_2b_3-a_3b_2,a_3b_1-a_1b_3,a_1b_2-a_2b_1\}\] lightingandshading-dotproduct MultiplicationwithanotherVector-the"dotproduct" Theanglebetweentwovectors. \[{a}\cdot{b}=\|{a}\|\|{b}\|\cos\theta\] distantlighting Infinitelydistantlight,parallelrays Noposition,justadirection Verysimpledotproductcalculation-inverseofthelightdirection   pointlighting Positionallightwithfall-off Withaposition,lightemitsequallyinalldirections Dotproductcalculationbasedonangletolightinsceneanddistance   rendering HTML5canvasbasicdrawingprimitives Rectangles Paths-startandendthroughNpoints Strokepath(outlines) Fillpath(solidshape) ArcsandBeziercurves Images-veryflexible;anysection,resize,cliptopath Puttingitalltogether phoria.js https://github.com/kevinroast/phoria.js http://www.kevs3d.co.uk/dev/phoria Puttingitalltogether Objectdefinition,3Dtransformationpipeline,renderingtoHTML5canvas... Wheredoyougonext? Physics,animation,texturing,particles... Resources HTML53Dlibrariesandtutorials Thispresentation https://github.com/kevinroast/phoria.js https://code.google.com/p/jsc3d/ https://code.google.com/p/mea3d/ tutorial-series-learning-how-to-write-a-3d-soft-engine-from-scratch lets-build-a-3d-graphics-engine-points-vectors-and-basic-concepts WebGL3Dlibraries https://github.com/mrdoob/three.js http://www.glge.org/ http://www.babylonjs.com/ http://scenejs.org/