TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

3D graphics in JavaScript (no libraries)

47 pointsby browserspotover 11 years ago

8 comments

Scene_Cast2over 11 years ago
Something I often see missing in JS demos is fps-correct animations. Sure, the<p><pre><code> drawInterval = setInterval(plot, 10); </code></pre> and<p><pre><code> angle += .05; </code></pre> will work on default settings with no bottleneck, but put in &quot;Manual Bresenham&quot; and the animation slows down.<p>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.<p>Here&#x27;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.
评论 #7220545 未加载
yohaover 11 years ago
Use HTML labels with your radio buttons, <i>please</i>; I don&#x27;t want to have to aim for the little circle.<p><pre><code> &lt;&#x2F;body&gt; &lt;&#x2F;html&gt; &lt;script&gt; </code></pre> hem. use this instead:<p><pre><code> &lt;script type=&quot;text&#x2F;javascript&quot;&gt; … &lt;&#x2F;script&gt; &lt;&#x2F;body&gt; &lt;&#x2F;html&gt; </code></pre> 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.
评论 #7220163 未加载
vicapowover 11 years ago
If you&#x27;re familiar with D3, I recommend DZ. (disclaimer: I&#x27;m the author) <a href="https://github.com/vicapow/dz" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;vicapow&#x2F;dz</a><p>Here&#x27;s an example of DOF blurring using SVG filters. (no WebGL)<p><a href="http://vicapow.github.io/dz/example/plane-blur.html" rel="nofollow">http:&#x2F;&#x2F;vicapow.github.io&#x2F;dz&#x2F;example&#x2F;plane-blur.html</a>
CmonDevover 11 years ago
It actually uses libraries: one for DOM traversal and another which provides a canvas. It&#x27;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 &quot;software rendering&quot; would be a better word combination. Would be interesting to see similar projects in other scripting languages (Lua, Python etc.).
burnteover 11 years ago
If you like this, visit ctho&#x27;s own site where all his toys are available. <a href="http://ctho.org/toys/" rel="nofollow">http:&#x2F;&#x2F;ctho.org&#x2F;toys&#x2F;</a><p>This particular one is the &quot;3D engine&quot; link. he later turned it into the Tie Fighter&#x2F;Roller Coaster one. When looking for inspiration, I directed him to the xscreensaver module that he created Popsquares from.
double051over 11 years ago
We&#x27;re being redirected to <a href="http://liveweave.com/1POv7l/index-alert.html" rel="nofollow">http:&#x2F;&#x2F;liveweave.com&#x2F;1POv7l&#x2F;index-alert.html</a> and seeing a 404.
评论 #7219392 未加载
leeoniyaover 11 years ago
and if you dont mind libraries, but need to work without WebGL, i recently discovered <a href="http://www.kevs3d.co.uk/dev/phoria/" rel="nofollow">http:&#x2F;&#x2F;www.kevs3d.co.uk&#x2F;dev&#x2F;phoria&#x2F;</a><p>repo: <a href="https://github.com/kevinroast/phoria.js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;kevinroast&#x2F;phoria.js</a>
评论 #7220153 未加载
评论 #7222456 未加载
corditeover 11 years ago
Too bad, still down.