Tuesday, December 31, 2013

3D in the Browser- using Three.js (Part 1)



I've been using Three.js for the past year couple of years now. Running your creations directly in the browser using JavaScript makes things very easy. Three.js abstracts away a lot of the mundane chores that usually makes 3D development time consuming. 

You might wonder if JavaScript would slow things down too much to be usable. The reality is that the Graphics Processing Unit (GPU) that's on board most computers today has incredible power and ends up doing 99% of the work. You can verify this by running any of the Three.js examples and checking your CPU performance. For instance, in the WebGL example below, I'm only utilizing 12% of the CPU. It's randomly drawing 2000 pieces of pasta and barely stressing the processor. (I also had a number of applications running and 5-6 browser windows open at the time, any of which could have been taking lots of processor cycles.)






Here's the screencast..part 1 one of an ongoing series I'm producing which demonstrates the incredible capabilities of Three.js. I hope you enjoy the series and find the time to try Three.js yourself. Note: Visit Threejs.org to learn more.





http://threejs.org/examples




http://www.chromeexperiments.com/