More info on the optional parameters can be found at the WebGL Specification page, section 5.2.1. The setupWebGL() function takes care of initializing WebGL for us, as well as pointing the user to a browser that supports WebGL or further troubleshooting if there were errors initializing WebGL. The webgl-utils.js script provides us with two functions to get things going: function setupWebGL(canvas, opt_attribs) įunction window.requestAnimFrame(callback, element) With WebGL, it is just as easy to get things setup and running. We also provided a class which overrode GLSurfaceView.Renderer and provided methods which were called by the system. For those of you who followed the Android lesson, you may remember that getting an OpenGL context consisted of creating an activity and setting the content view to a GLSurfaceView object. Getting startedĪs I write this, I am also learning WebGL, so we’ll be learning together! We’ll look at how to get a context and start drawing stuff to the screen, and we’ll more or less follow lesson one for Android as this lesson is based on it.

The Khronos WebGL Public Wiki is a good place to start out. The reader should be familiar with programming and 3D concepts on a basic level. webgl-utils.js - for basic initialization of an OpenGL context and rendering on browser request.

This lesson uses the following third-party libraries:

The latest stable releases of Chrome and Firefox support WebGL, so you can always start there. You can visit Get WebGL to see if your browser supports WebGL and if not, it will tell you where you can get a browser that supports it. You’ll need a browser that supports WebGL, and you should also have the most recent drivers installed for your video card. Since WebGL runs inside a web browser, we’ll also need to use JavaScript to control it. WebGL is based on OpenGL ES 2, which means that we’ll need to use shaders. However, there is currently a push to bring hardware-accelerated graphics to the web called WebGL. Previously, if you wanted to do real-time 3D graphics on the web, your only real option was to use a plugin such as Java or Flash. There will also be an introduction to shaders and matrices. In this lesson, we’ll look at how to create a basic WebGL instance and display stuff to the screen, as well as what you need in order to view WebGL in your browser. WebGL Lesson One.This is the first tutorial for learning OpenGL ES 2 on the web, using WebGL.

Opengl es 2.0 shader 3d object