Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	3D engine V2
ID	2398428159
Created	12 years ago, 1383533970886
Updated	12 years ago, 1389097668751
Code	//Coming soon: Z-buffering and Gourad (Possibly Phong) shading! If you don't think it's exciting then you have no idea how beautiful it will look. //You can keep up with my changes in the EPERIMENTAL spin-off I made of this project / My first 3D engine was a huge mess, but I still wanted to keep it anyway. Either way, I started this whole project from scratch and I'm hoping to improve performance and implement curves (so that you don't need a huge amount of polygons to make a curved surface) / /** This code is separated into segments for easier managing: * Global values for use in functions * Helper functions, sort of like macros and to make code easier to read * lower level functions for the nitty gritty stuff * higher level functions for abstractions, so that you can draw a pyramid with 2 statements and 5 or 6 coordinates as opposed to 20 statements and 50 or 60 coordinates! * Shape definitions where you can add shapes * Input handling functions (which will probably dominate the space of the code as soon as I code them. I prmoise they're coming!) / / TODO * Performance doesn't seem to be much better. Fix that too (I think it's because the registry array is sorted all the time) * Implement an easy way to change your POV (like mouselook) * Clean up code a little more * Add a way to not draw offscreen objects * Make it so objects between your eye and the drawplane don't cause problems (they do) * / ////// /GLOBAL VALUES/ var _i = 0; //For the rotating done in the beginning var plane = [10,-10,7]; //Coordinates of plane center //Plane is always 10 by 10 var pnorm = []; //Determines where you're looking by means of a unit vector orthognal to the plane var eye = 15; //Distance from eye to center of the plane var eyePos = []; var px; //The plane's 'x component' (will be a unit vector) var py; //Ditto but for y component var registry = []; //Stores all the triangles and various properties for use in drawing var lightSource = [3/13,4/13,12/13]; //Has to be a unit vector var center = []; //Stores the center for when shading objects var gfill = [0,255,0]; //Yay green! var outlines = 0; //If 0, no outlines. If 1, outlines noStroke(); var colourin = 1; //ditto, but with fill ////// /HELPER FUNCTIONS/ var X = function(v) { return v[0]; }; var Y = function(v) { return v[1]; }; var Z = function(v) { return v[2]; }; //These don't actually make typing the code any faster, but make readability better and seriously cut down on bugs caused by typos (which are devilishly hard to find). var unit = function(v) { var tmp = mag(X(v), Y(v), Z(v)); return [X(v) / tmp, Y(v) / tmp, Z(v) / tmp]; }; var sub = function(v1, v2) { //Vector subtraction return [X(v1) - X(v2), Y(v1) - Y(v2), Z(v1) - Z(v2)]; }; var add = function(v1, v2) { //Vector addition return [X(v1) + X(v2), Y(v1) + Y(v2), Z(v1) + Z(v2)]; }; var sMul = function (c, v) { //Scalar multiplication return [c X(v), c * Y(v), c * Z(v)]; }; var vmag = function (v) { //Shorthand for getting magnitude return mag(X(v), Y(v), Z(v)); }; var dot = function(v1,v2) { //Standard dot product return X(v1) * X(v2) + Y(v1) * Y(v2) + Z(v1) * Z(v2); }; var cross = function(v1, v2) { //Normal cross product return [Y(v1) * Z(v2) - Z(v1) * Y(v2), Z(v1) * X(v2) - X(v1) * Z(v2), X(v1) * Y(v2) - Y(v1) * X(v2)]; }; var proj = function(v1,v2) { //Plain ol' projection function return dot(v1,v2)/dot(v2,v2); }; ////// / LOWER LEVEL FUNCTIONS / var lookAtOrigin = function() { pnorm = unit(sMul(3, plane)); //Multiplying by 2 points your view towards the origin }; lookAtOrigin(); //So that we have an initial POV var getGVals = function() { //Gets various global values used in functions eyePos = add(sMul(eye, pnorm), plane); px = unit([-1 * Y(pnorm), X(pnorm), 0]); py = unit(cross(px, pnorm)); if (proj(py, [0,0,-1]) > 0) { py = sMul(-1, py); //So that your view doesn't go upside down } }; getGVals(); //For initial placement var pnt = function(p) { p = sub(p, eyePos); var tmp = proj(p, pnorm); var Q = sMul(tmp, pnorm); var QP = sub(p, Q); //Q comes out of the plane, orthogonally, and extends until the vector needed to add to it to get to point p is parallel to the surface of the plane. QP is the vector you add to it to get p var CI = sMul(eye / (eye + vmag(Q)), QP); //CI is the vector from the center of the plane to the point where an imaginary line traced from point p to eyePos would intersect the plane. This was found using similar triangles. return [(proj(CI, px) + 5) * 40, 400 - (proj(CI, py) + 5) * 40]; //The plane is always 10 by 10. So, we add 5 to the x and y components of the projected vector since they are measured from the center of the plane (5,5) and then multiplied by 40 to scale up to the canvas. The y coordinates of this drawing API are upside down, so we have to flip it. }; var display = function() { registry.sort(function(a,b) { //Source of the bottleneck return (vmag(sub(eyePos, a.centroid)) < vmag(sub(eyePos, b.centroid))) ? 1 : -1; }); //I'm researching a way to get around this for (var i = 0; i < registry.length; i++) { var shade = proj(registry[i].shade, lightSource) / 2 + 1; var tmp1 = pnt(registry[i].v1); var tmp2 = pnt(registry[i].v2); var tmp3 = pnt(registry[i].v3); if (colourin) { fill(X(registry[i].fill) * shade, Y(registry[i].fill) * shade, Z(registry[i].fill) * shade); } triangle(X(tmp1), Y(tmp1), X(tmp2), Y(tmp2), X(tmp3), Y(tmp3)); } }; ////// / HIGHER LEVEL FUNCTIONS / var tri = function(p1, p2, p3) { var tmp; if (center.length !== 3) { //Don't draw shaders if we're not asked for them tmp = 1; } else { tmp = unit(cross(sub(p1,p2),sub(p2,p3))); if(proj(tmp, sub(p1,center)) < 0) { tmp = sMul(-1, tmp); //So that shaders are consistent } } registry[registry.length] = { v1: [X(p1), Y(p1), Z(p1)], v2: [X(p2), Y(p2), Z(p2)], v3: [X(p3), Y(p3), Z(p3)], centroid: /add(sMul(1/3,sub(p3,add(sMul(0.5,sub(p2,p1)),p1))),p1)/ sMul(1/3,add(p1,add(p2,p3))), //Average of the three points. Commented out is the algorithm to get the centroid, but the average seems to work better fill: [X(gfill), Y(gfill), Z(gfill)], shade: tmp }; }; var startShaderObject = function(x, y, z) { center = [x, y, z]; }; var endShaderObject = function() { center.length = 0; }; var polycpp = function(n, v) { /* cpp stands for current-previous-previous This function takes a number of points of given to it (specified by the n parameter) and an array of 3D points. It will cycle through the points and draw triangles between the point it's currently on, the previous point, and the point before that. / if (n < 3) { return; } for (var i = 2; i < n; i++) { tri(v[i - 2], v[i - 1], v[i]); } return; }; var polycpf = function(n, v) { if (n < 3) { return; } for (var i = 2; i < n; i++) { tri(v[0], v[i - 1], v[i]); } return; }; ////// /* SHAPE DEFINITIONS */ startShaderObject(5.5, 0.5, 0.5); gfill = [0, 255, 0]; polycpp(10, [[5,0,0], [5,1,0], [6,0,0], [6,1,0], [6,0,1], [6,1,1], [5,0,1], [5,1,1], [5,0,0], [5,1,0]]); polycpp(4, [[6,1,1], [6,1,0], [5,1,1], [5,1,0]]); polycpp(4, [[5,0,0], [5,0,1], [6,0,0], [6,0,1]]); endShaderObject(); startShaderObject(0, 0, 6); //Yellow Octahedron gfill = [200, 200, 0]; polycpf(6, [[0,0,8], [-1,-1,6], [-1,1,6], [1,1,6], [1,-1,6], [-1,-1,6]]); polycpf(6, [[0,0,4], [-1,-1,6], [-1,1,6], [1,1,6], [1,-1,6], [-1,-1,6]]); endShaderObject(); startShaderObject(0,0,-3); //Brown Icosahedron gfill = [160,82,45]; polycpf(7, [[0,-1,-3],[2,0,-4],[0,1,-3],[-2,0,-4],[-1,-2,-5],[1,-2,-5],[2,0,-4]]); polycpp(12,[[-1,-2,-5],[0,-1,-7],[1,-2,-5],[2,0,-6],[2,0,-4],[1,2,-5],[0,1,-3],[-1,2,-5],[-2,0,-4],[-2,0,-6],[-1,-2,-5],[0,-1,-7]]); polycpf(7, [[0,1,-7],[-2,0,-6],[0,-1,-7],[2,0,-6],[1,2,-5],[-1,2,-5],[-2,0,-6]]); endShaderObject(); startShaderObject(0,-5,0); //Blue Sphere gfill = [0, 200, 200]; var step = 20; var _n = 0; var _m = 90; var r = 6; for(var i = 0; i < 180 / step; i++) { for (var j = 0; j < 180 / step; j++) { polycpp(4, [[rcos(_n)cos(_m), rsin(_n)cos(_m) - 8, rsin(_m)], [rcos(_n + step)cos(_m + step), rsin(_n + step)cos(_m + step) - 8, rsin(_m + step)], [rcos(_n + step + step)cos(_m), rsin(_n + step + step)cos(_m) - 8, rsin(_m)], [rcos(_n + step + step + step)cos(_m + step), rsin(_n + step + step + step) cos(_m + step) - 8, rsin(_m + step)]]); _n += 2 step; } _m += step; if (360 / step % 2 === 0) { _n += step; } } endShaderObject(); startShaderObject(0,5,2.5); //Orange cylinder gfill = [255, 140, 0]; var _n = 0; var step = 30; var r = 1; for (var i = 0; i < 360 / step; i++) { polycpp(6, [[0,5,0], [rcos(_n), rsin(_n) + 5 , 0], [rcos(_n+step), rsin(_n+step) + 5, 0], [rcos(_n), rsin(_n) + 5, 2], [rcos(_n+step), rsin(_n+step) + 5, 2], [0,5,2]]); _n += step; } endShaderObject(); startShaderObject(-5,0,2); //Purple cone gfill = [160, 0, 240]; step = 20; _n = 0; r = 2; for (var i = 0; i < 360 / step; i++) { polycpp(4, [[-5, 0, 5], [r * cos(_n) - 5, r * sin(_n), 0], [r * cos(_n+step) - 5, r * sin(_n+step), 0], [-5,0,0]]); _n += step; } endShaderObject(); startShaderObject(0,0,0); //Blue Hexagonal Prism gfill = [0,80,210]; polycpf(8, [[0,0,-1], [-1,0,-1], [-0.5, sqrt(3)/2, -1], [0.5, sqrt(3)/2, -1], [1,0,-1], [0.5, -sqrt(3)/2,-1], [-0.5, -sqrt(3)/2, -1], [-1,0,-1], [-0.5, sqrt(3)/2,-1]]); polycpp(14, [[-1,0,-1],[-1,0,1],[-0.5,sqrt(3)/2,-1],[-0.5,sqrt(3)/2,1],[0.5,sqrt(3)/2,-1],[0.5,sqrt(3)/2,1],[1,0,-1],[1,0,1],[0.5,-sqrt(3)/2,-1],[0.5,-sqrt(3)/2,1],[-0.5,-sqrt(3)/2,-1],[-0.5,-sqrt(3)/2,1],[-1,0,-1],[-1,0,1]]); polycpf(8, [[0,0,1], [-1,0,1], [-0.5, sqrt(3)/2, 1], [0.5, sqrt(3)/2, 1], [1,0,1], [0.5, -sqrt(3)/2,1], [-0.5, -sqrt(3)/2, 1], [-1,0,1], [-0.5, sqrt(3)/2,1]]); endShaderObject(); //Red torus (part one) /startShaderObject(1.414213562, -3.585786438, 3); gfill = [200, 0, 0]; _n = 0; _m = 0; step = 20; var mstep = 18; r = 2; var lr = 1; for (var i = 0; i < 90 / mstep; i++) { for (var j = 0; j < 180 / step; j++) { polycpp(4,[[r cos(_m) + lr * cos(_n) * cos(_m), r * sin(_m) + lr * cos(_n) * sin(_m) - 5, lr * sin(_n) + 3],[r * cos(_m+mstep) + lr * cos(_n+step) * cos(_m+mstep), r * sin(_m+mstep) + lr * cos(_n+step) * sin(_m+mstep) - 5, lr * sin(_n+step) + 3], [r * cos(_m) + lr * cos(_n+2step) cos(_m), r * sin(_m) + lr * cos(_n+2step) sin(_m) - 5, lr * sin(_n+2step) + 3], [r cos(_m+mstep) + lr * cos(_n+3step) cos(_m+mstep), r * sin(_m+mstep) + lr * cos(_n+3step) sin(_m+mstep) - 5, lr * sin(_n+3step) + 3]]); _n += 2 step; } _m += mstep; if(360 / step % 2 === 0) { _n += step; } } endShaderObject(); //Red torus (part two) startShaderObject(-1.414213562, -3.585786438, 3); for (var i = 0; i < 90 / mstep; i++) { for (var j = 0; j < 180 / step; j++) { polycpp(4,[[r * cos(_m) + lr * cos(_n) * cos(_m), r * sin(_m) + lr * cos(_n) * sin(_m) - 5, lr * sin(_n) + 3],[r * cos(_m+mstep) + lr * cos(_n+step) * cos(_m+mstep), r * sin(_m+mstep) + lr * cos(_n+step) * sin(_m+mstep) - 5, lr * sin(_n+step) + 3], [r * cos(_m) + lr * cos(_n+2step) cos(_m), r * sin(_m) + lr * cos(_n+2step) sin(_m) - 5, lr * sin(_n+2step) + 3], [r cos(_m+mstep) + lr * cos(_n+3step) cos(_m+mstep), r * sin(_m+mstep) + lr * cos(_n+3step) sin(_m+mstep) - 5, lr * sin(_n+3step) + 3]]); _n += 2 step; } _m += mstep; if(360 / step % 2 === 0) { _n += step; } } endShaderObject(); //Red torus (part three) startShaderObject(-1.414213562, -6.414213562, 3); for (var i = 0; i < 90 / mstep; i++) { for (var j = 0; j < 180 / step; j++) { polycpp(4,[[r * cos(_m) + lr * cos(_n) * cos(_m), r * sin(_m) + lr * cos(_n) * sin(_m) - 5, lr * sin(_n) + 3],[r * cos(_m+mstep) + lr * cos(_n+step) * cos(_m+mstep), r * sin(_m+mstep) + lr * cos(_n+step) * sin(_m+mstep) - 5, lr * sin(_n+step) + 3], [r * cos(_m) + lr * cos(_n+2step) cos(_m), r * sin(_m) + lr * cos(_n+2step) sin(_m) - 5, lr * sin(_n+2step) + 3], [r cos(_m+mstep) + lr * cos(_n+3step) cos(_m+mstep), r * sin(_m+mstep) + lr * cos(_n+3step) sin(_m+mstep) - 5, lr * sin(_n+3step) + 3]]); _n += 2 step; } _m += mstep; if(360 / step % 2 === 0) { _n += step; } } endShaderObject(); //Red torus (part four) startShaderObject(1.414213562, -6.414213562, 3); for (var i = 0; i < 90 / mstep; i++) { for (var j = 0; j < 180 / step; j++) { polycpp(4,[[r * cos(_m) + lr * cos(_n) * cos(_m), r * sin(_m) + lr * cos(_n) * sin(_m) - 5, lr * sin(_n) + 3],[r * cos(_m+mstep) + lr * cos(_n+step) * cos(_m+mstep), r * sin(_m+mstep) + lr * cos(_n+step) * sin(_m+mstep) - 5, lr * sin(_n+step) + 3], [r * cos(_m) + lr * cos(_n+2step) cos(_m), r * sin(_m) + lr * cos(_n+2step) sin(_m) - 5, lr * sin(_n+2step) + 3], [r cos(_m+mstep) + lr * cos(_n+3step) cos(_m+mstep), r * sin(_m+mstep) + lr * cos(_n+3step) sin(_m+mstep) - 5, lr * sin(_n+3step) + 3]]); _n += 2 step; } _m += mstep; if(360 / step % 2 === 0) { _n += step; } } endShaderObject(); ////// / var draw = function() { _i+=3; _i %= 360; background(255, 255, 255); plane[0] = 12 cos(_i); //X-component of your viewPos plane[1] = 12 * sin(_i); //ditto, but with lookAtOrigin(); //Otherwise who knows what could happen? getGVals(); //Necessary to keep the program happy lightSource = unit([X(px), Y(px), 1.5]); display(); //Or else registry[] is not drawn }; /USER INPUT/ var keyPressed = function() { if (keyCode === 83) { //'S' key outlines = outlines ? 0: 1; if (outlines) { stroke(0, 0, 0); } else { noStroke(); } } if (keyCode === 70) { //'F' key colourin = colourin ? 0: 1; if (!colourin) { noFill(); } } };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBj_t9T3CAw
Votes	204
Spin-Offs	30
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Marco Merlini
Author Name	Mahkoe
Author ID	kaid_1199279143182457876804805
Author Profile Access	COACH

Archive Data

Added	11 months ago, 1736754749714
Updated	11 months ago, 1736754749714
Source Deleted	unknown