

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
You may be looking for this:

[https://developer.mozilla.org/fr/docs/Web/API/window.request...](https://developer.mozilla.org/fr/docs/Web/API/window.requestAnimationFrame)

~~~
Timmmmbob
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
<script> should be in the body, but the type attribute is optional in HTML5.

------
vicapow
If you're familiar with D3, I recommend DZ. (disclaimer: I'm the author)
[https://github.com/vicapow/dz](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](http://vicapow.github.io/dz/example/plane-blur.html)

------
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.).

------
burnte
If you like this, visit ctho's own site where all his toys are available.
[http://ctho.org/toys/](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](http://liveweave.com/1POv7l/index-alert.html) and seeing a 404.

~~~
chewmieser
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
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/](http://www.kevs3d.co.uk/dev/phoria/)

repo:
[https://github.com/kevinroast/phoria.js](https://github.com/kevinroast/phoria.js)

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

------
cordite
Too bad, still down.

