javascript

Tutorial 5 Drawing Methods This tutorial introduces drawing gl.LINE_STRIP, gl.TRIANGLES, and gl.TRIANGLE_STRIP using vertex indices (gl.ELEMENT_ARRAY_BUFFER). The shapes to draw are shown on the left in the figure the below: The hexagon is drawn as a line strip. Because it is a line primitive, the shape is not filled with any colour. The triangle is […]

Tutorial 08 Animation and User Input 1. Animation This tutorial implements a WebGL animation application, based upon the work done in the previous tutorials. The animation will implement two types of motions: the motion of the box on top of the table and real-time viewport control (or scene navigation). The motion of the box will

Tutorial 1 HTML 5 Canvas In this unit, we are going to use WebGL API to develop 3D graphics for web applications. This API is developed in and for JavaScript and use HTML 5 canvas to create and draw 3D graphics. Therefore, developing a WebGL application will involve programming in JavaScript and HTML. In this

Tutorial 4 Draw using Colours We explore the use of colour data in this tutorial. In last tutorial, we drew a triangle of constant colour, which means the entire triangle has been drawn using a single colour. The shaders we had used look like: The colour we used to draw the triangle was specified in

Tutorial 6 Draw in 3D This session practices drawing a simple 3D scene (Figure a). The scene consists of the floor, a table and a cube. The floor is a plane. The cube is of size 2x2x2 and the origin of its local coordinate system has been chosen at the centre of the cube, as

Tutorial 09 Lighting This tutorial introduces the use lighting/reflection model in WebGL applications. The Phong lighting/reflection model is implemented in the vertex shader. Because vertex shader performs per operations, the lighting evaluation will be carried out on each vertex, hence the name of per-vertex shading. Figure A Figure B Figure C These vectors are calculated: