background preloader


Related:  three.js3D

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.”

uncontrol | A collection of experiments using fancy shmancy code 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 ]; Free 3D Models, Free CAD Models Francesco Giorlando :: Displaying fMRI images in 3D on the web using three.js Publishing fMRI results usually involves the presentation of slice images that show regions of increased BOLD (Blood Oxygen Dependent Signal). However, fMRI data is inherently three dimensional and often it is difficult to visualise or appropriately present data in 2D formats. Therefore, it can be useful to implement a method for displaying graphics in 3D form.Luckily, there are some good javascript libraries that interact with the HTML5 canvas attribute to present 3D objects. I chose to use the three.js library as it allows easy loading of the .VTK object format that my favourite desktop fMRI image viewer, Mango, can export.(incidentally, Mango also has it's own full featured web based viewer but I wanted a lighter solution for displaying images). The view below shows how a 3D image can be easily embedded in a web page. click here to open in new window. The code for loading these objects is very similar to one of the three.js examples (see: examples/webgl_loader_vtk.html). Links:

Host your 3D printer projects. Version control included. Three.js and Babylon.js: a Comparison of WebGL Frameworks Today’s web browsers have come a long way since the days of Sir Tim Berners-Lee and his Nexus software. Thanks to fantastic JavaScript APIs like WebGL, modern browsers are fully capable of rendering advanced 2D and 3D graphics without help from third-party plugins. By leveraging the horsepower of dedicated graphics processors, WebGL gives our web pages access to dynamic shading and realistic physics. As you might have guessed, such powerful APIs typically come with a drawback. The humble origins of 3D frameworks The ever popular Three.js along with the newer Babylon.js offer web developers an abstract foundation for crafting feature rich WebGL creations ranging from animated logos to fully interactive 3D games. Three.js got its start back in April of 2009 and was originally written in ActionScript before being translated to JavaScript. Babylon.js, being the relative newcomer, broke onto the scene in the summer of 2013. A subtle difference in design Three.js: Babylon.js:

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 ([0]), second ([2]) and third ([3]) 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.