(WebGL) Max to Three.js workflow tips and tricks - Blog - (BKcore) Thibaut Despoulain Ever since I started working with the WebGL technology, I've been trying out a few frameworks like SpiderGL and SceneJS. Most recently, I've been giving a try to Three.js, and it is by far the best WebGL framework I've ever tested. So as I'm advancing on my learning of this framework, I'll be giving out on this blog a few tips and tricks that I found useful when using Three.js. The first one being an advice on the Max-to-Three.js workflow, readable after the break. Demo This is what I came up with during my workflow experiment.
Learning WebGL A year ago, at a biggest-ever, record-breaking HTML5 Meetup in San Francisco all about WebGL, I predicted we were a tipping point; I think I was right. Let’s take a look at 2014, a banner year for 3D on the web! A Year of Great Content John Cale and Liam Young’s City of Drones brought together experiments in music and architecture; Isaac Cohen continued to blow minds with visualizations like Weird Kids and Webby; Google’s A Spacecraft for All chronicled the 36-year journey of the ISEE-3 space probe; and SKAZKA showed us an alternate world created by The Mill and powered by Goo. A Year of Killer Apps Physijs - a physics plugin for threejs Examples Physics plugin for three.js Physijs brings a very easy to use interface to the three.js framework. One of the reasons three.js is so popular is because it is so incredibly easy for graphics newbies to get into 3D programming. Physijs takes that philosophy to heart and makes physics simulations just as easy to run.
DELIGHT ‐ Native to the Web Realistic Camera Model Demo This demo features a physically based camera which includes techniques like bokeh depth of field, glare, lens flares, film grain, dynamic color grading and more. It uses advanced techniques such as physically based shading, deferred rendering, HBAO and variance shadow mapping. Please select medium quality if your computer is not on the high-end. Play around with this DELIGHT Engine powered demo. P.S. Thanks to Crytek for the awesome sponza model.
Making MathBox Viewports, Primitives and Renderables At its core, Three.js matches pretty directly with WebGL. You can insert objects such as a Mesh, Line or ParticleSystem into your scene, which invokes a specific GL drawing command with high efficiency. As such, I certainly didn't want to reinvent the wheel. Hence, MathBox is set up as a sort of scene-manager-within-a-scene-manager. THREEx - Game Extensions for Three.js threex.text It makes it easy to add 3d text in your scene. You can fine tune lots of parameters to make it fit your needs. You can choose the fonts, the size, the bevel, the weight etc... Demo Github Tags: content tool first example web gl- check if your browser support or not WebGL First of all, you should have an editor like as notepad ++ or sublime text and a browser that does support web gl like Mozilla, Chrome , Opera etc, (but not Internet Explorer) ! Copy this code into you editor >>> <body onload="runWebGLApp()"> <canvas id="myCanvas" width="800" height="600"> Your browser does not support canvas !!! </canvas>
NeHe Three.js tutorials Introduction To render amazing 3D scenes, nowadays no more plugins or additional installations are required. The most widespread Browsers like Chrome, Firefox, Safari, Opera and Internet Explorer support WebGL, the hardware accelerated OpenGL for browser. Learning pure WebGL from scratch is hard.