5 ms·

3D graphics in JavaScript (no libraries)

47 points by browserspot 13y ago

yoha 13y 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 13y ago
  <script> should be in the body, but the type attribute is optional in HTML5.
double051 13y ago
We're being redirected to http://liveweave.com/1POv7l/index-alert.html http://liveweave.com/1POv7l/index-alert.html and seeing a 404.
- chewmieser 13y 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 13y ago
    seems to be working again now...
ocfx 13y ago
Yay 404 thanks!
leeoniya 13y ago
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 13y ago
  This looks nice, can you do a quick compare/contrast with three.js canvasrenderer?
- sebastianavina 13y ago
  nice lib. thanks
cordite 13y ago
Too bad, still down.
vicapow 13y ago
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
deleted 13y ago
[deleted]
Scene_Cast2 13y 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.
- yoha 13y ago
  You may be looking for this: https://developer.mozilla.org/fr/docs/Web/API/window.requestAnimationFrame https://developer.mozilla.org/fr/docs/Web/API/window.request...
  - Timmmmbob 13y ago
    No he means it doesn't do: angle += time_taken_to_render_previous_frame * speed;
burnte 13y ago
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.
CmonDev 13y 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.).

47 points by browserspot 13y ago

yoha 13y 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 13y ago
<script> should be in the body, but the type attribute is optional in HTML5.

double051 13y ago

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

chewmieser 13y 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 13y ago
  seems to be working again now...

ocfx 13y ago

Yay 404 thanks!

leeoniya 13y ago

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 13y ago
This looks nice, can you do a quick compare/contrast with three.js canvasrenderer?
sebastianavina 13y ago
nice lib. thanks

cordite 13y ago

Too bad, still down.

vicapow 13y ago

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

deleted 13y ago

[deleted]

Scene_Cast2 13y 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.

yoha 13y ago
You may be looking for this: https://developer.mozilla.org/fr/docs/Web/API/window.requestAnimationFrame https://developer.mozilla.org/fr/docs/Web/API/window.request...
- Timmmmbob 13y ago
  No he means it doesn't do: angle += time_taken_to_render_previous_frame * speed;

burnte 13y ago

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.

CmonDev 13y 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.).