3D testing

After playing around with some math, I created a 3D-software engine with JavaScript that operates on a HTML5-canvas.

This guide was really helpful:
http://blogs.msdn.com/b/davrous/archive/2013/06/13/tutorial-series-learning-how-to-write-a-3d-soft-engine-from-scratch-in-c-typescript-or-javascript.aspx

It is a working solution with a step-by-step tutorial.
When I got stuck at some point in the matrix-multiplication, I adopted their math-library to fit my own environment and removed things I didn´t need.

Later I went to WebGL (like OpenGL for the browser).
With knowledge of how a basic software-engine works, It´s easier to understand how to work with a WebGL-canvas.
WebGL will try to use the device GPU so you can work with shaders for textures & lightning, without burning up the CPU.

Testing-room for my WebGL-script:
http://www.sonartree.net/members/zoi/Zoi-TheNest/TheNest.php?xcode=3D

Inspired by the three.js library: http://threejs.org/

20150409-20150522


Textures & Lightning


Cube in 3D-space


Projection-matrix


Dedicated canvas (Lower resolution for performance gain)


Imported mesh (simple sphere in blender, exported as JSON)


Flat shading


Gouraud shading

Leave a comment

Design a site like this with WordPress.com
Get started