5 ms·

Show HN: 3D Renderer Built using 2D HTML Canvas

54 points by vivekseth 9y ago

onion2k 9y ago
three.js has a canvas renderer that doesn't require WebGL - https://threejs.org/examples/?q=canvas#canvas_materials https://threejs.org/examples/?q=canvas#canvas_materials
mrspeaker 9y ago
I wish there was some details around this! Recently I've been getting into writing a software 3D renderer thanks to this fantastic set of tutorials: https://github.com/ssloy/tinyrenderer/wiki https://github.com/ssloy/tinyrenderer/wiki. Here's my creepy 3D rendering: http://mrspeaker.net/dev/head2/ http://mrspeaker.net/dev/head2/ It's not using a real z-buffer (just canvas's path rendering for triangles, and sorted back-to-front) but it's still pretty cool!
- pjmlp 9y ago
  A very good book for graphics programming, covering all kinds of algorithms is "Computer Graphics: Principles and Practice" from Foley and van Dam. The 1st edition used Pascal, the 2dn C and now the third one uses C++ and C# on their examples.
JasonSage 9y ago
Worth mentioning that the page takes keyboard arrow input to move around. Very smooth, thanks for sharing!
themadcreator 9y ago
I'll also plug my own canvas rendering 3d library: http://seenjs.io/ http://seenjs.io/
- vortico 9y ago
  Really cool that it also renders to SVG!
- 52-6F-62 9y ago
  This is seriously cool! Do you know if anybody has used your library (especially SVG masking) in production? You should pump that website up a bit and make sure to name drop people who use it, though I appreciate your humility in that way. Anyway, awesome work
- badsectoracula 9y ago
  Even though i tanked the CPU, i really liked the SVG masking demo, initially i thought it was just playing some video :-P.
- appleflaxen 9y ago
  i love what you made; this is seriously awesome.
donatj 9y ago
I have been working on this thing on and off for six+ years, I know almost nothing about graphics so this has just been a fun little exploration for my and probably nothing to base anything on: https://github.com/donatj/3D-Package-JS https://github.com/donatj/3D-Package-JS
- vivekseth 9y ago
  One of the other commenters mentioned this: https://github.com/ssloy/tinyrenderer/wiki https://github.com/ssloy/tinyrenderer/wiki If you’re interested in learning graphics, this is a great place to start!
bbales 9y ago
I did something similar to this https://github.com/bbales/Simple3DCanvas https://github.com/bbales/Simple3DCanvas Its a great exercise, and I found that rendering basic .obj files was a great place to start - the spec is quite easy to follow: https://en.wikipedia.org/wiki/Wavefront_.obj_file https://en.wikipedia.org/wiki/Wavefront_.obj_file
badsectoracula 9y ago
Neat, although the fun begins when you try to fill them since you cannot just ignore the primitives anymore if a vertex touches the near plane but instead you have to clip the primitive :-). Also without a z-buffer hidden surface removal becomes tricky if you want to avoid bad overlaps. For fun i made a 3D thing a few years ago, you can check it here: http://runtimeterror.com/pages/badsector/nyan/test.html http://runtimeterror.com/pages/badsector/nyan/test.html The code does the clipping part (triRender function) although HSR is painter's algorithm with a simple sorting (triSort) with a heuristic (triCompare) that i came out through trial and error (because of the distortion introduced by the perspective projection this doesn't always work and IIRC i'd need to actually split the polygons for better result but i was too lazy for that :-P). Note that i wrote this for fun a few years ago, i am not a web dev nor really follow web tech. This is the biggest block of JavaScript code i've written for years :-P.
- yummybear 9y ago
  I liked the game - even if simple. Reminds me of Hunter: https://en.wikipedia.org/wiki/Hunter_(video_game) https://en.wikipedia.org/wiki/Hunter_(video_game)
- mysterydip 9y ago
  Those two things are what got me with mine I made back in 2009. I had filled and shaded polygons, models with animations, and good framerate for the time, but then I ran into issues with z sorting and frustum culling in larger scenes. Still, was a great learning experience and I'm actually using some of the knowledge again for a retro game I'm working on.
- cr0sh 9y ago
  For something you wrote for fun, this particular engine is pretty impressive. It was reminiscent of the old PC virtual reality software engine, REND386 (by Bernie Roehl and Dave Stampe): http://buter.software/rend386/ http://buter.software/rend386/ I played around a lot with that engine "back in the day". Modded a Power Glove to hook up to the parallel port (I also did the same for the Amiga), and I used a slightly modified VictorMaxx Stuntmaster for an HMD when it became available. I had fun playing the little game you made in this engine. I think its very impressive (heck, you should throw it up on github). There used to be a thing in the late 1990s and early 2000s of something called the "3D Engine List" that listed all the 3D engines in various languages and whatnot (both open source and commercial). Eventually, that all went away for one reason or another. I kinda wish it still existed. When someone shares such work, it always brings a smile to my face. So thank you for sharing your work with us!
pedalpete 9y ago
Can somebody please comment on why using a 2d canvas is a better solution than webgl? Or is it? I was under the impression that to get the best GPU performance, webgl is the answer.
- vivekseth 9y ago
  From a performance standpoint it’s definitely not better. I just built this for fun.
cr0sh 9y ago
I have to say, as simplistic as it is, I like this renderer. I am curious, though why an orthographic projection (?) is being used, instead of a perspective one? From the code, it looks like it could support a perspective projection; I'm not sure if there is code in there to do it, or if you'd have to add it in (it's been ages since I messed around with my own 3D software engine stuff - and that was mostly in QB and VB)...
- arnioxux 9y ago
  I didn't look at the code, but canvas only supports 3x3 transforms and you need 4x4 to do perspective: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende... So if those cubes are textured, you'd need to subdivide the texture and approximate each with affine transforms. Here's an example of this hack (which was only necessary years ago before webgl existed): https://acko.net/blog/projective-texturing-with-canvas/ https://acko.net/blog/projective-texturing-with-canvas/
  - Matheus28 9y ago
    For wireframe objects like the one in the OP (which actually does use a perspective projection it seems), that's not really a problem. Just have your own code that does all the matrix multiplication, and you get a point you can plug right into moveTo/lineTo
- vivekseth 9y ago
  Maybe it looks like it’s orthographic, but it’s actually a perspective projection. You should be able to tell if you use the arrow keys to move around. Check out drawLine3D() in until.js to see where I apply the perspective projection.
fogleman 9y ago
Here's my software renderer... https://github.com/fogleman/fauxgl https://github.com/fogleman/fauxgl :)
kosua20 9y ago
Shameless plug for my own attempt at writing a software renderer in swift... https://github.com/kosua20/PtahRenderer https://github.com/kosua20/PtahRenderer The readme lists a few useful resources; in my opinion the most difficult part was implementing clipping.
iverjo 9y ago
A friend of mine once wrote a 3D effect in a 2D canvas in only 130 bytes of JavaScript code: https://www.dwitter.net/d/914 https://www.dwitter.net/d/914
catshirt 9y ago
maybe i'm a little crazy (doesn't get much more generic than 3d cubes...) but the demo visualization brought me back to 3d animation in Flash. interesting peek/reminder of how our tooling contributes to our outputs. (or maybe i'm just crazy). awesome work!
deleted 9y ago
[deleted]

54 points by vivekseth 9y ago

three.js has a canvas renderer that doesn't require WebGL - https://threejs.org/examples/?q=canvas#canvas_materials https://threejs.org/examples/?q=canvas#canvas_materials

mrspeaker 9y ago

I wish there was some details around this! Recently I've been getting into writing a software 3D renderer thanks to this fantastic set of tutorials: https://github.com/ssloy/tinyrenderer/wiki https://github.com/ssloy/tinyrenderer/wiki. Here's my creepy 3D rendering: http://mrspeaker.net/dev/head2/ http://mrspeaker.net/dev/head2/ It's not using a real z-buffer (just canvas's path rendering for triangles, and sorted back-to-front) but it's still pretty cool!

pjmlp 9y ago
A very good book for graphics programming, covering all kinds of algorithms is "Computer Graphics: Principles and Practice" from Foley and van Dam. The 1st edition used Pascal, the 2dn C and now the third one uses C++ and C# on their examples.

JasonSage 9y ago

Worth mentioning that the page takes keyboard arrow input to move around. Very smooth, thanks for sharing!

themadcreator 9y ago

I'll also plug my own canvas rendering 3d library: http://seenjs.io/ http://seenjs.io/

vortico 9y ago
Really cool that it also renders to SVG!
52-6F-62 9y ago
This is seriously cool! Do you know if anybody has used your library (especially SVG masking) in production? You should pump that website up a bit and make sure to name drop people who use it, though I appreciate your humility in that way. Anyway, awesome work
badsectoracula 9y ago
Even though i tanked the CPU, i really liked the SVG masking demo, initially i thought it was just playing some video :-P.
appleflaxen 9y ago
i love what you made; this is seriously awesome.

donatj 9y ago

I have been working on this thing on and off for six+ years, I know almost nothing about graphics so this has just been a fun little exploration for my and probably nothing to base anything on: https://github.com/donatj/3D-Package-JS https://github.com/donatj/3D-Package-JS

vivekseth 9y ago
One of the other commenters mentioned this: https://github.com/ssloy/tinyrenderer/wiki https://github.com/ssloy/tinyrenderer/wiki If you’re interested in learning graphics, this is a great place to start!

bbales 9y ago

I did something similar to this https://github.com/bbales/Simple3DCanvas https://github.com/bbales/Simple3DCanvas Its a great exercise, and I found that rendering basic .obj files was a great place to start - the spec is quite easy to follow: https://en.wikipedia.org/wiki/Wavefront_.obj_file https://en.wikipedia.org/wiki/Wavefront_.obj_file

badsectoracula 9y ago

Neat, although the fun begins when you try to fill them since you cannot just ignore the primitives anymore if a vertex touches the near plane but instead you have to clip the primitive :-). Also without a z-buffer hidden surface removal becomes tricky if you want to avoid bad overlaps. For fun i made a 3D thing a few years ago, you can check it here: http://runtimeterror.com/pages/badsector/nyan/test.html http://runtimeterror.com/pages/badsector/nyan/test.html The code does the clipping part (triRender function) although HSR is painter's algorithm with a simple sorting (triSort) with a heuristic (triCompare) that i came out through trial and error (because of the distortion introduced by the perspective projection this doesn't always work and IIRC i'd need to actually split the polygons for better result but i was too lazy for that :-P). Note that i wrote this for fun a few years ago, i am not a web dev nor really follow web tech. This is the biggest block of JavaScript code i've written for years :-P.

yummybear 9y ago
I liked the game - even if simple. Reminds me of Hunter: https://en.wikipedia.org/wiki/Hunter_(video_game) https://en.wikipedia.org/wiki/Hunter_(video_game)
mysterydip 9y ago
Those two things are what got me with mine I made back in 2009. I had filled and shaded polygons, models with animations, and good framerate for the time, but then I ran into issues with z sorting and frustum culling in larger scenes. Still, was a great learning experience and I'm actually using some of the knowledge again for a retro game I'm working on.
cr0sh 9y ago
For something you wrote for fun, this particular engine is pretty impressive. It was reminiscent of the old PC virtual reality software engine, REND386 (by Bernie Roehl and Dave Stampe): http://buter.software/rend386/ http://buter.software/rend386/ I played around a lot with that engine "back in the day". Modded a Power Glove to hook up to the parallel port (I also did the same for the Amiga), and I used a slightly modified VictorMaxx Stuntmaster for an HMD when it became available. I had fun playing the little game you made in this engine. I think its very impressive (heck, you should throw it up on github). There used to be a thing in the late 1990s and early 2000s of something called the "3D Engine List" that listed all the 3D engines in various languages and whatnot (both open source and commercial). Eventually, that all went away for one reason or another. I kinda wish it still existed. When someone shares such work, it always brings a smile to my face. So thank you for sharing your work with us!

pedalpete 9y ago

Can somebody please comment on why using a 2d canvas is a better solution than webgl? Or is it? I was under the impression that to get the best GPU performance, webgl is the answer.

vivekseth 9y ago
From a performance standpoint it’s definitely not better. I just built this for fun.

cr0sh 9y ago

I have to say, as simplistic as it is, I like this renderer. I am curious, though why an orthographic projection (?) is being used, instead of a perspective one? From the code, it looks like it could support a perspective projection; I'm not sure if there is code in there to do it, or if you'd have to add it in (it's been ages since I messed around with my own 3D software engine stuff - and that was mostly in QB and VB)...

arnioxux 9y ago
I didn't look at the code, but canvas only supports 3x3 transforms and you need 4x4 to do perspective: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende... So if those cubes are textured, you'd need to subdivide the texture and approximate each with affine transforms. Here's an example of this hack (which was only necessary years ago before webgl existed): https://acko.net/blog/projective-texturing-with-canvas/ https://acko.net/blog/projective-texturing-with-canvas/
- Matheus28 9y ago
  For wireframe objects like the one in the OP (which actually does use a perspective projection it seems), that's not really a problem. Just have your own code that does all the matrix multiplication, and you get a point you can plug right into moveTo/lineTo
vivekseth 9y ago
Maybe it looks like it’s orthographic, but it’s actually a perspective projection. You should be able to tell if you use the arrow keys to move around. Check out drawLine3D() in until.js to see where I apply the perspective projection.

fogleman 9y ago

Here's my software renderer... https://github.com/fogleman/fauxgl https://github.com/fogleman/fauxgl :)

kosua20 9y ago

Shameless plug for my own attempt at writing a software renderer in swift... https://github.com/kosua20/PtahRenderer https://github.com/kosua20/PtahRenderer The readme lists a few useful resources; in my opinion the most difficult part was implementing clipping.

iverjo 9y ago

A friend of mine once wrote a 3D effect in a 2D canvas in only 130 bytes of JavaScript code: https://www.dwitter.net/d/914 https://www.dwitter.net/d/914

catshirt 9y ago

maybe i'm a little crazy (doesn't get much more generic than 3d cubes...) but the demo visualization brought me back to 3d animation in Flash. interesting peek/reminder of how our tooling contributes to our outputs. (or maybe i'm just crazy). awesome work!

deleted 9y ago

[deleted]