3D graphics in JavaScript (no libraries)

by browserspot • 12 years ago

47 15 12 years ago

yoha2• 12 years ago

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• 12 years ago

double051• 12 years ago

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

chewmieser• 12 years ago

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• 12 years ago

seems to be working again now...

leeoniya• 12 years ago

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• 12 years ago

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

sebastianavina• 12 years ago

nice lib. thanks

cordite• 12 years ago

Too bad, still down.

vicapow• 12 years ago

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

Scene_Cast2• 12 years ago

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.

yoha2• 12 years ago

You may be looking for this:

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

Timmmmbob• 12 years ago

No he means it doesn't do:

angle += time_taken_to_render_previous_frame * speed;

burnte• 12 years ago

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.

CmonDev• 12 years ago

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

3D graphics in JavaScript (no libraries)

Related Stories