WebGL Essentials: Part I. WebGL is an in-browser 3D renderer based on OpenGL, which lets you display your 3D content directly into an HTML5 page. In this tutorial I will cover all the essentials you need to get started using this framework. Introduction There are a couple things you should know before we get started. WebGL is a JavaScript API that renders 3D content to an HTML5 canvas. It does this by using two scripts that are known in the "3D world" as Shaders.
The two shaders are: The vertex shader The fragment shader Now don't get too nervous when you hear these names; it's just a fancy way of saying, "position calculator" and "color chooser" respectively. If you want to know exactly how this calculation works, you'd need to ask a mathematician, because it uses advanced 4 x 4 matrix multiplications, which are a bit beyond the 'Essentials' tutorial.
Step 1: Setting Up WebGL WebGL has a lot of small settings that you have to setup nearly every time you draw something to the screen. Step 2: The "Simple" Cube. Introduction to Three.js. Ilmari Heikkinen Who am I? Ilmari Heikkinen @ilmarihei | fhtr.org/plus | fhtr.org Google Chrome Developer Programs Engineer I write demos, do presentations, write articles Slides available at fhtr.org/BasicsOfThreeJS Repo at github.com/kig/BasicsOfThreeJS Three.js? Three.js is a JS 3D Engine github.com/mrdoob/three.js Lightweight Easy to use Batteries included WebGL renderer (our focus today) Also has Canvas and SVG renderers Basic setup Renderer Create a WebGLRenderer Plug it in document.body.appendChild(renderer.domElement); And make it pretty renderer.setClearColorHex(0xEEEEEE, 1.0); renderer.clear(); Wow!
It gets better, I promise! Create a Camera // new THREE.PerspectiveCamera( FOV, viewAspectRatio, zNear, zFar );var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000); camera.position.z = 300; Make a Scene with a Cube And render the Scene from the Camera renderer.render(scene, camera); At least it isn't empty. Recap Create a renderer new THREE.WebGLRenderer() Create a scene new THREE.Scene() and. The OpenGL on Linux Programming Page. WebGL Cheat Sheet. Buffers Object createBuffer void void deleteBuffer Object buffer void bindBuffer ulong target, Object buffer void bufferData ulong target, Object dta, ulong usage void bufferData ulong target, long size, ulong usage void bufferSubData ulong target, ulong offset, Object data any getBufferParameter ulong target, ulong value bool isBuffer Object buffer any getParameter ulong pname Renderbuffers Object createRenderbuffer void void deleteRenderbuffer Object buffer void bindRenderbuffer ulong target, Object buffer any getRenderbufferParameter ulong target, ulong pname void renderbufferStorage ulong target, ulong format, ulong width, ulong height bool isRenderbuffer Object buffer any getParameter ulong pname Framebuffers Program objects Shaders Culling void enable|disable CULL_FACE void cullFace ulong mode void frontFace ulong mode any getParameter ulong pname Textures Blending Depth buffer Stencil buffer Array data Uniform variables Attribute variables Multisampling Misc.
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 In 2014, WebGL made its mark– an indelible impression– on advertising, e-commerce, music, news and engineering. A Year of Pro Tools Goo, Verold, Turbulenz and PlayCanvas all made great strides with their WebGL engines and development environments. A Year of Gaming WebGL is definitely up to the challenge of creating high-quality MMOs. A Year of Virtual Reality A Year of Ubiquity. Tutorial - WebGL Public Wiki. Introduction: Creating a Spinning Box This example creates the spinning textured box shown below. It uses several JavaScript utilities for common WebGL tasks: webgl-utils3d.js which contains some basic WebGL helpers, J3DI.js which contains general utilities, and J3DIMath.js, which provides matrix functions. These utilities allow the discussion to focus on the main phases of a WebGL program. Click this link to launch in a full tab. To download a browser that can display this WebGL program, follow these instructions.
Creating the Context WebGL is built on top of the HTML5 <canvas> element. Creating the Shaders Nothing happens in WebGL without shaders. All these values are passed to the fragment shader, which runs on each pixel of every transformed triangle passed in. The following code defines the vertex and fragment shaders used in the spinning box example. Initializing the Engine The next step is to get WebGL up and running. The simpleSetup() utility function takes the following parameters: Tutorials - Phong Lighting with GLSL - OpenGL Shading Language - Point Light - Spot Light - Attenuation. Spot light radiates its rays in a cone. Shaders codes are the same as for point light but in the pixel shader there is a little change.
We add a test in order to check whether or not the light ray direction is located in the cone. To perform this test, we're going to use two GLSL variables: gl_LightSource[0].spotDirection and gl_LightSource[0].spotCosCutoff. Fig.2 - Spot Light Configuration. In order to know if the ray of light is located in cone of the light, we're going to compare the angles a and b. If a is smaller than b then the ray is located in the cone. b is the spot cutoff angle (20 degrees in the demo). a is the angle between the direction of the spot and the current processing ray of light. If lightDir and spotDir are normalized vectors, then to calculate a, we can do: dot(lightDir, spotDir) = |lightDir| * |spotDir| * cos(a) dot(lightDir, spotDir) = cos(a) It would be nice to have the possibility to compare cos(a) directly without computing the inverse cosine. Here is the result: Making a cone.