TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: Weekend project - a WebGL Orrery

17 点作者 rvkennedy将近 14 年前
This was my recent weekend project, aimed at teaching me JavaScript, a bit of HTML5, and (mostly) WebGL. The orbital data are from NASA JPL. I was inspired in part by this Flash app: http://www.dynamicdiagrams.com/wp-content/uploads/2011/04/orrery_2011_bce.swf, but wanted to do something in 3D.<p>Coming from the games-dev world, this is my first introduction to web coding. The UI is jquery. I mostly used http://learningwebgl.com/blog for the 3D stuff. Being WebGL, it will work mostly on Chrome, Firefox 4 Beta. Forget about IE.<p>I needed to figure out how to render text to the WebGL canvas - I won't say I have the perfect solution, but the general approach is to use a conventional HTML5 canvas, then copy it once per frame into a WebGL texture. There's something funky going on in this process - the textures get corrupted, and resizing the window leads to slowdown.<p>For the future I'd like to make the planets clickable and zoomable, maybe put in a search box to zoom to objects of interest. I'd like to build it up to a full catalogue of the Solar System - comets, the larger asteroids, dwarf planets - and maybe add the capability to put in known space mission trajectories.

2 条评论

rvkennedy将近 14 年前
This was my recent weekend project, aimed at teaching me JavaScript, a bit of HTML5, and (mostly) WebGL. The orbital data are from NASA JPL. I was inspired in part by this Flash app: <a href="http://www.dynamicdiagrams.com/wp-content/uploads/2011/04/orrery_2011_bce.swf" rel="nofollow">http://www.dynamicdiagrams.com/wp-content/uploads/2011/04/or...</a>, but wanted to do something in 3D.<p>Coming from the games-dev world, this is my first introduction to web coding. The UI is jquery. I mostly used <a href="http://learningwebgl.com/blog" rel="nofollow">http://learningwebgl.com/blog</a> for the 3D stuff. Being WebGL, it will work mostly on Chrome, Firefox 4 Beta. Forget about IE.<p>I needed to figure out how to render text to the WebGL canvas - I won't say I have the perfect solution, but the general approach is to use a conventional HTML5 canvas, then copy it once per frame into a WebGL texture. There's something funky going on in this process - the textures get corrupted, and resizing the window leads to slowdown.<p>For the future I'd like to make the planets clickable and zoomable, maybe put in a search box to zoom to objects of interest. I'd like to build it up to a full catalogue of the Solar System - comets, the larger asteroids, dwarf planets - and maybe add the capability to put in known space mission trajectories.
thristian将近 14 年前
Looks pretty great, well done!<p>In Firefox 6, the knob of the speed slider appears at the top of the page, instead of inside the slider track. It looks like this is caused by having "display: inline-table" on the #time_slider element. That seems a strange choice, given that there's no child-elements with "display: table-row" or "display: table-cell". If I change #time_slider to be "display: inline-block" instead, the knob appears in the right place and works as expected.
评论 #2649818 未加载