My WebGL site for more:
how to create a webgl application webgl html5
webgl tutorial for beginners webgl tutorial 3d webgl tutorial youtube webgl tutorial video webgl tutorial 2017
This WebGL tutorial's source code available for download is here: http://www.tigrisgames.com/webgl/1
Rats! WebGL hit a snag solution:
WebGL Tutorial For Beginners [Lesson 1]
This tutorial started as a write up titled "WebGL Lesson 1 - Cross-Browser Initialization of WebGL And Setting Up A Blank Window;" Then I converted it into this video tutorial. You see here. It's definitely not a full blown webgl game tutorial, only a first step for setting up your webgl pipeline. No webgl shaders here, Unity or terrain rendering either. But all it is, it's just a webgl demo.
Note: To check if your browser supports WebGL, visit http://get.webgl.org/
First, let’s define a basic HTML canvas area. At this point the code has nothing to do with WebGL itself. It’s simply an HTML5 tag:
First, let’s grab an object handle to the canvas tag: // Get a handle to canvas var canvas = document.getElementById("gl");
There are even more ways to identify a context in different browsers. For example using the literal string moz-webg instead of webgl, we can check for Mozilla’s (Firefox) implementation. And webkit-3d will try to grab GL context from a Webkit based browser. Our final initialization source code will check for these too. I’m just trying to keep things simple for now.
Please take a look at the __proto__(or prototype, in browsers where available) object property attached to the WenGL context object gl in its initialized state, by expanding the small arrow in Google Chrome console, after running the WebGL initialization code below. This prototype property contains all initialized OpenGL properties, as well as all available OpenGL functions we can call to create our 3D graphics.
WebGL and OpenGL Extensions
Before we move on to implementing a robust cross-browser WebGL initialization function, let’s briefly talk about OpenGL Extensions.
In order to grab a list of supported extensions we can use getSupportedExtensions command. This function is attached to the WebGL context object and it is called as follows: gl_context.getSupportedExtensions();
Note that in the example source code below our WebGL context object is simply called gl.
Clearing the Screen With a Solid Color
Once the WebGL context object is initialized and stored in gl variable, the following commands are issued as a minimum requirement for clearing the screen with a solid color. In this case we simply chose black (r=0,g=0,b=0). And value of 1.0 for alpha.
*** SOURCE CODE LINK WILL APPEAR HERE SHORTLY ***
And there we have it. We have just initialized WebGL in most modern browsers, set the viewport to 640x480 and cleared it out with solid black color.