3D Models on the '2D' canvas context

[MikeSourceCode]

I would like to share my steps on how to render 3D models on a canvas element in a '2D' context; i'm open to any editorial improvements.

The images attached are not WebGL rather this.context = this.canvas.getContext('2d');

[ebidel]

Sounds interesting! Can you propose an outline?

cc @paullewis

[paullewis]

I'm slightly reticent on this one. While it's interesting, you're going to end up covering some pretty heavy math on modelview and projection matrices. Also given Three.js has a canvas renderer, I fear that most developers wouldn't gain much from rolling their own.

[MikeSourceCode]

Hmmm the math is not thaaat complicated, and the reason i originally did it this way, was because Three.js and some other variants are not cross browser, for example WebGL is not supported by IE; I stumbled upon a solution for cross browsing by using a library that would pick webgl/dx as needed dont remmeber the name right now.

[paullewis]

We're going a little OT here, but the Three.js CanvasRenderer should work in IE, no?

Edit: CanvasRenderer works in IE9+

[MikeSourceCode]

Yes, that's correct

Being objective; given the fact that we are at IE10 with Windows 8 though interesting it would give little benefits in terms of actual application for 3D rendering. What I can do, is to modify my idea and as it is already pretty much a little library, i can tweak the code a little bit so i can turn the tutorial into writing cross-browser 3D letters (for logo, headers, or something like that) using the same technique as i did for the AK47 model; I would leave the math part as a blackbox, and the technical explanation to the calling/implementation of the JS that graphs on the canvas.

I did not mention this earlier but the renderer moves the 3D objects with the mouse movements; this would apply to the text as well; can do it in a Hello World sort of thing.

I am grateful for your responses and again open to any suggestions or ideas into how to turn this into a good article.

Edit: My proposal works on IE8+

[MikeSourceCode]

Something like this

[MikeSourceCode]

Haven't forgotten about providing the outline; i just want to get the idea straight first

:)

[MikeSourceCode]

There, what i did basically is to make a catalog of A-Za-z

What i did is to parse the text on the designated div; match the models against the catalog and now this writes the 3D letters (it still could be used for any 3D models if needed); the explanation can be summarized on the crawling of the Text3D div, matching the catalog, and drawing 3D as a blackbox; the calling code is as follows:

$.get('abc.txt', function(response) { // abc.txt is the catalog of A-Za-z $("canvas").mousemove(function(e){ var myGraph = new Graph({ canvasId: 'Canvas3D', minX: 2, minY: -15, minZ: -10, maxX: 10, maxY: 10, maxZ: 10, unitsPerTick: 1, rotateX: e.pageX * 0.734693877551, // Width rotateY: e.pageY * 0.734693877551, // Height data: response, charSpacing: 60 // Self-explanatory }); }); });

The HTML is as simple as

`

Miguel

`

[MikeSourceCode]

Another Example:

[MikeSourceCode]

OUTLINE: 3D Models on the '2D' Canvas context

• <Canvas> Overview

  Short definition intro with link references and visual example.

• Pixels and 2D Coordinates

  Paragraph sized explanation of how coordinates on Canvas work, and equivalency with 2D Coordinates (Cart. Coord. Sys)

• Transforming 3D Vertex to 2D Vertex

  Paragraph explanation on how to draw static 3D Vertexes into 2D vertex with three very, very simple arithmetic multiplications.

  Figure "LOGOS" like on how to draw a 3D vertex on 2D. http://i.msdn.microsoft.com/gg685458.Picture3(en-us,MSDN.10).png

• 3D Models in Triangles

  Brief mention on models exported as raw triangles, which are basically 3 vertexes, and the part of the code that draws it.

  Reference to a tutorial on 3D Coordinates found in HTML5Rocks. http://www.html5rocks.com/en/tutorials/webgl/webgl_orthographic_3d/

  context.save(); context.beginPath(); context.moveTo(this.centerX-this.tickSize_(triangle.pointX1_Math.sin(triangle.angleHorizontal_0.01745329251)-triangle.pointY1_Math.cos(triangle.angleHorizontal0.01745329251)), this.centerY-this.tickSize(triangle.pointZ1_Math.sin(triangle.angleVertical_0.01745329251)-triangle.pointY1_Math.sin(triangle.angleHorizontal_0.01745329251)-triangle.pointX1_Math.cos(triangle.angleHorizontal0.01745329251))); context.lineTo(this.centerX-this.tickSize(triangle.pointX2_Math.sin(triangle.angleHorizontal_0.01745329251)-triangle.pointY2_Math.cos(triangle.angleHorizontal0.01745329251)), this.centerY-this.tickSize(triangle.pointZ2_Math.sin(triangle.angleVertical_0.01745329251)-triangle.pointY2_Math.sin(triangle.angleHorizontal_0.01745329251)-triangle.pointX2_Math.cos(triangle.angleHorizontal0.01745329251))); context.lineTo(this.centerX-this.tickSize(triangle.pointX3_Math.sin(triangle.angleHorizontal_0.01745329251)-triangle.pointY3_Math.cos(triangle.angleHorizontal0.01745329251)), this.centerY-this.tickSize(triangle.pointZ3_Math.sin(triangle.angleVertical_0.01745329251)-triangle.pointY3_Math.sin(triangle.angleHorizontal_0.01745329251)-triangle.pointX3_Math.cos(triangle.angleHorizontal0.01745329251))); context.lineTo(this.centerX-this.tickSize(triangle.pointX1_Math.sin(triangle.angleHorizontal_0.01745329251)-triangle.pointY1_Math.cos(triangle.angleHorizontal0.01745329251)), this.centerY-this.tickSize(triangle.pointZ1_Math.sin(triangle.angleVertical_0.01745329251)-triangle.pointY1_Math.sin(triangle.angleHorizontal_0.01745329251)-triangle.pointX1_Math.cos(triangle.angleHorizontal_0.01745329251))); context.closePath(); context.fillStyle = "#AABBCC"; context.fill(); context.strokeStyle = "#AABBCC"; context.lineWidth = 1; context.stroke(); context.restore();

  Explanation that this can be parse natively by webkit GL: gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); Reference URL

• Drawing the 3D Model from an Array

  Figure of the 3D Model of the AK47

  Rethorical challenge on what if each letter was a 3D model on a file, and if we could parse the text of a div into a - 3D banner/image.

  Figure of the HTML/Rocks banner and

• Lesson Code Downloads

[paullewis]

I appreciate all the work you're putting in here, but I'm going to go with my gut on this one. Developers generally don't need to know about 3D math or how to build an engine. Those that need that functionality from a canvas would simply use Three.js rather than roll their own. And those that do roll their own would need a series of articles or a book to do things properly.

Thanks again for putting together the proposal, but I don't feel it's the right fit for HTML5 Rocks.