ThNdl 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.
drojdjou/J3D » 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
uncontrol | A collection of experiments using fancy shmancy code 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.”
Free 3D Models, Free CAD Models OutsideOfSociety Another year have almost passed by, time for my yearly blogpost… The trend at work is no Flash at all this year, it have mostly moved over towards WebGL and Canvas, and I kinda enjoy it for the most part. Lately I have worked on a large project where we tried to experiment with what we could do in modern browsers on modern mobile devices, as everything is supposed to be “mobile” these days. Finally time to unplug for a couple of weeks and celebrate christmas. So, have a great holiday and see you in 2014! Here’s a tool to convert *.md5mesh and *.md5anim files to the json format(3.1) used by three.js. It’s skeletal animation(skinning), the earlier MD2 format for example is vertex animation(morphTargets). Here’s how you use it: 1. Then save the file. You can also tick “Lock rootbone” this locks the root bone to position 0,0,0 and the rotation to 0,0,0. Also posted a fairly simple example of how to load a model and some animations, see here. A small note about materials. (Small note. Stresstest
Uniforms types · mrdoob/three.js Wiki These mappings are also available since r68: These still work: Shader (GLSL) uniform int uInt;uniform float uFloat; uniform vec2 uVec2;uniform vec3 uVec3;uniform vec4 uVec4; uniform vec3 uCol; uniform mat4 uMat4; uniform sampler2D uTex;uniform samplerCube uTexCube; uniform int uIntArray[ 5 ];uniform ivec3 uIntArray3[ 2 ]; uniform float uFloatArray[ 5 ];uniform vec3 uFloatArray3[ 2 ]; uniform vec2 uVec2Array[ 2 ];uniform vec3 uVec3Array[ 2 ];uniform vec4 uVec4Array[ 2 ]; uniform mat4 uMat4Array[ 2 ]; uniform sampler2D uTexArray[ 2 ]; Host your 3D printer projects. Version control included.
WebGL: All about OpenGL ES 2.0 for the Web