Photography

WebGL by example  is a series of live samples with short explanations that showcase WebGL concepts and capabilities.  The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more. Examples by topic The examples are sorted in order of increasing difficulty. But rather than just presenting them in a single long list, they are additionally divided into topics. Sometimes we revisit a topic several times, such as when needing to discuss it initially at a basic level, and later at intermediate and advanced levels. Instead of trying to juggle shaders, geometry, and working with  GPU  memory, already in the first program, the examples here explore WebGL in an incremental way. We believe that it leads to a more effective learning experience and ultimately a deeper understanding of the underlying concepts. Explanations about the examples are found in both the main te...

Matrices can be used to represent transformations of objects in space, and are an important tool to use in visualizations on the Web. This article explores how to create matrices and use them with  CSS3 transforms  and the  matrix3d  transform type. While this article uses CSS3 for the ease of explanations, matrices are a core concept used by many different technologies including WebGL and shaders. This article is also available as an  MDN content kit . The live examples use a collection of  utility functions  availabile under a global object named "MDN". What is a transformation matrix? There are many types of matrices, but the ones we are interested in are the 3D transformation matrices. These matrices consist of a set of 16 values arranged in a 4x4 grid. In JavaScript, it is easy to represent a matrix as an array. The typical starting point is to show the identity matrix. When this matrix is multiplied against another point or matrix then the result...

Making the square rotate Section Let's start by making the square rotate. The first thing we'll need is a variable in which to track the current rotation of the square: var squareRotation = 0.0 ; Now we need to update the  drawScene()  function to apply the current rotation to the square when drawing it. After translating to the initial drawing position for the square, we apply the rotation like this: mat4 . rotate ( modelViewMatrix , // destination matrix modelViewMatrix , // matrix to rotate squareRotation , // amount to rotate in radians [ 0 , 0 , 1 ] ) ; // axis to rotate around This rotates the modelViewMatrix by the current value of  squareRotation , around the Z axis. To actually animate, we need to add code that changes the value of  squareRotation  over time. We can do that by creating a new variable to track the time at which we last animated (let's call it  then ), then adding the foll...

Having created a square plane in the  previous demonstration , the next obvious step is to add a splash of color to it. We can do this by revising the shaders. Applying color to the vertices In WebGL, objects are built using sets of vertices, each of which has a position and a color; by default, all other pixels' colors (and all its other attributes, including position) are computed using interpolation, automatically creating smooth gradients. Previously, our vertex shader didn't apply any specific colors to the vertices; between this and the fragment shader assigning the fixed color of white to each pixel, the entire square was rendered as solid white. Let's say we want to render a gradient in which each corner of the square is a different color: red, blue, green, and white. The first thing to do is to establish these colors for the four vertices. To do this, we first need to create an array of vertex colors, then store it into a WebGL buffer; we'll do that by addin...

Fragment shader Section Next comes the fragment shader. Its role is to return the color of each pixel in the shape being rendered. Since we're drawing a solid, untextured object with no lighting applied, this is exceptionally simple: < script id = " fragment-shader " type = " x-shader/x-fragment " > #ifdef GL_ES precision highp float ; #endif uniform vec4 uGlobalColor ; void main ( ) { gl_FragColor = uGlobalColor ; } </ script > This starts by specifying the precision of the  float  type, as required. Then we set the global  gl_FragColor  to the value of the uniform  uGlobalColor , which is set by the JavaScript code to the color being used to draw the square. HTML Section The HTML consists solely of the  element with either the canvas scripting API or the WebGL API to draw graphics and animations." href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" data-mce-href="https://developer.mozi...