Three.js - examples Three.js Examples The goal of this collection is to provide a set of basic and instructive examples that introduce the various features in Three.js. The source code for each page contains detailed comments. Hosted at GitHub. Total examples: 83. Basic Examples • Hello World • Template • Info Box • Materials - Solid • Color Explorer • Wireframe • Lines and Dashed Lines • Helpers • Outline Effect • Face/Vertex Colors • Shapes • Extrusion • Text3D Texture Examples • Textures • Texture - Repeat • Texture - Text3D • Translucence • Shadow • Subdivision Modifier - Cube • SkyBox • Reflection • Refraction • Bubble • Texture from Canvas • Texture Animation Sprite Examples • Sprites • Sprite Text Labels • Labeled Geometry Mouse and Keyboard Examples • Mouse Sprite • Mouse Click • Mouse Hovering • Mouse Tooltip • Keyboard Events Camera/Renderer Examples • Mesh Movement • Chase Camera • Multiple Cameras • Camera to Texture • Viewports - Dual • Viewports - Quad • Embedded HTML • Red/Blue Anaglyph GUI Examples
WebGL Inspector An advanced WebGL debugging toolkit About WebGL Inspector is a tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier. What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL. Note: this is alpha software - if you find bugs, let me know (or better yet, fork and fix them! Check out the readme on github for more information. Status There hasn't been an update in awhile, but the project is not dead! Features Extension for injecting into pages Embed in an existing application with a single script include Capture entire GL frames Annotated call log with stepping/resource navigation and redundant call warnings Pixel history - see all draw calls that contributed to a pixel + blending information GL state display Resource browsers for textures, buffers, and programs Live Demo Click here to view a live demo (in a browser that supports WebGL, of course): Install ATTENTION: The extension is now hosted on the Chrome Web Store.
» Subdivision surfaces with three.js KadrmasConcepts Blog Subdivision surfaces are a technique for transforming a lower polygon model into a more detailed model. The algorithm subdivides each face in a model into smaller faces, while maintaining the same approximate surface. The advantage when using subdivision surfaces are that the modeler can continue to work with the less detailed model. This makes the process easier since it is less to keep track of for the modeler. Then when complete, the modeler can “bake” in the subdivisions to create a more detailed model. More Info on Subdivision Surfaces – Wikipedia When dealing with large JSON models in three.js they can get large in file size. For an example I modeled a very simple flashlight in Blender. Making this all happen is pretty easy. For complex scenes subdivision surfaces give the ability to only send the “blueprint” of a mesh over the wire and let three.js do the heavy lifting.
GLSL 1.2 Tutorial In this tutorial shader programming using GLSL 1.2 will be covered. Although many parts are now considered deprecated, the essence of GLSL has remained constant. Besides, this tutorial will continue to be online because learning the basics of deprecated OpenGL is easier than learning the new versions. If you’re looking for a GLSL tutorial that deals only with non-deprecated features visit the GLSL Core tutorial, here in Lighthouse3D. Shaders are a hot topic and 3D games have shown that they can be put to good use to get remarkable effects. The tutorial contains an introduction to the specification, but reading the OpenGL 2.0 and GLSL official specs is always recommended if you get serious about this. GLSL stands for GL Shading Language, often referred as glslang, and was defined by the Architectural Review Board of OpenGL, the governing body of OpenGL. I won’t go into disputes, or comparisons, with Cg, Nvidia’s proposal for a shading language that is also compatible with OpenGL. Index
Performance: Caching Material This article is about performance and how caching can improve them. In WebGL, it is important not to push the same textures multiple times to the GPU. It uselessly slow down the rendering. As a rules of thumbs, the less data are exchanged between the cpu and the gpu, the better it is for performance. A Basic Caching three.js handles cache cleanly and eleguantly. Then you use this material as many times as you want, foo.jpg will be sent only once to the GPU. This solution is simple and eleguant but may not be practical with a large code, like a game. So Let’s Cache with microcache.js It needs only 3 lines. To instanciate a cache, use the following line. This is it. Now Let’s Diagnose You can check what is pushed to the GPU with WebGL inspector. That’s All Folks As Terje Mathisen said, “All programming is an exercise in caching.”
Voidworld Loading JSON into three.js | Blog Recently I've been working on a project requiring rendering 3D VTK models into WebGL. We're using three.js as the WebGL framework which has a JSON loader. So we require conversion from VTK to JSON, and it took a while to figure out how the JSON should be formatted for THREE.JSONLoader. The JSON file needs to have the following strings: The contents of the metadata tag is optional, and can be left empty. Scale sets the overall scaling of the scene. Faces use indexed set notation. The vertices are structured like so: [bitmask, x, y, z] where the 3D coordinates are x, y, z. This will create a face with the first (), second () and third () vertices in the vertex array. "faces" : [0, 0, 1, 2] This renders a triangle like so: Note that the face normals are on the wrong side! "faces" : [0, 0, 2, 1] Which will now render correctly: Here's a demo JSON file that renders a cube.