Beginners Guide to WebGL From Scratch with Scripts

2015-04-09

I have prepared bundle of very basic tutorials on WebGL to draw points, line,line strip, triangle, triangle strip , rectangle , circle and changing the color of the object drawn on the canvas. What is WebGL ? The principles are generic: WebGL is based on OpenGLES 2.0 (OpenGL for Embedded Systems – which is a subset of the OpenGL 2.0 computer graphics rendering application programming interface (API) for rendering 2D and 3D computer graphics). Webpage using WebGL Why WebGL ? Rendering 3D object directly on the web browser. The tutorials prepared here is tested on Windows 7 with Chrome Version 41.0.2272.118 m. Click here to check the work samples live Demo. Beginners guide to WebGL

Sample Output

Steps:

To draw Point : Click any where on the canvas

To draw Line: Click the starting point and drag until endpoint

To draw Triangle: Click three points to define three edge of triangles. It will draw triangle for you.

To draw Rectangle: Drag the mouse and will form rectangle.

To draw Circle: Drag the mouse and will form circle.

To draw Triangle Fan: Define four points with four clicks.

To draw line strip : Define points and drag .

Download All Here Comments are Welcome !