3D graphics in JavaScript (no libraries)

[browserspot]

http://liveweave.com/1POv7l/demo

[Scene_Cast2]

Something I often see missing in JS demos is fps-correct animations. Sure, the

  drawInterval = setInterval(plot, 10);

and

  angle += .05;

will work on default settings with no bottleneck, but put in "Manual Bresenham" and the animation slows down.

Back in the days of Flash, this was solved with tweening libraries that took in a curve (how to interpolate between the end values), and passing a variable reference that could be updated in an fps-agnostic fashion.

Here's my idea for a framerate-independent graphics library. Have a function pointer to the main draw( time T ) call, and one of the requirements would be that time T does not represent the current time and can be out of order ( draw(1), draw(3), draw(2) ). In other words, draw() would have to be pseudo-functional. This approach would allow for some neat tricks such as cashing, multithreaded and split-rendering, motion blur tricks, etc.

[yoha → Scene_Cast2]

You may be looking for this:

https://developer.mozilla.org/fr/docs/Web/API/window.request...

[Timmmmbob → yoha]

No he means it doesn't do:

angle += time_taken_to_render_previous_frame * speed;

[yoha]

Use HTML labels with your radio buttons, please; I don't want to have to aim for the little circle.

   </body>
 </html>
 <script>

hem. use this instead:

      <script type="text/javascript">
      …
      </script>
    </body>
 </html>

I doubt it will be any efficient compared to native implementation. Cool hack though, it reminds my when I played around with basic real 3D drawing with Quick Basic.

[bbosh → yoha]

<script> should be in the body, but the type attribute is optional in HTML5.

[CmonDev]

It actually uses libraries: one for DOM traversal and another which provides a canvas. It's just that they are typically readily available in modern browsers and you have to go somewhere else to see the sources in a programming language. Perhaps "software rendering" would be a better word combination. Would be interesting to see similar projects in other scripting languages (Lua, Python etc.).

[vicapow]

If you're familiar with D3, I recommend DZ. (disclaimer: I'm the author) https://github.com/vicapow/dz

Here's an example of DOF blurring using SVG filters. (no WebGL)

http://vicapow.github.io/dz/example/plane-blur.html

[burnte]

If you like this, visit ctho's own site where all his toys are available. http://ctho.org/toys/

This particular one is the "3D engine" link. he later turned it into the Tie Fighter/Roller Coaster one. When looking for inspiration, I directed him to the xscreensaver module that he created Popsquares from.

[double051]

We're being redirected to http://liveweave.com/1POv7l/index-alert.html and seeing a 404.

[chewmieser → double051]

I guess LiveWeave is making some changes. From their footer:

  We are making changes to the server. Database I/O operations have been disabled. You can still "Download" your weaves

[browserspot → chewmieser]

seems to be working again now...

[leeoniya]

and if you dont mind libraries, but need to work without WebGL, i recently discovered http://www.kevs3d.co.uk/dev/phoria/

repo: https://github.com/kevinroast/phoria.js

[smrtinsert → leeoniya]

This looks nice, can you do a quick compare/contrast with three.js canvasrenderer?

[sebastianavina → leeoniya]

nice lib. thanks

[cordite]

Too bad, still down.