User Tools

Site Tools



Python Tutorials

WebGL Tutorials

Node.js Tutorials

Node.js in WebStorm

Martin Christen

View Martin Christen's profile on LinkedIn


Timeline of @MartinChristen

MartinChristen avatar

I just signed up as @europython volunteer. Still many spaces available! Do it now!
About 1 day, 23 hours ago by: Martin Christen (@MartinChristen)

MartinChristen avatar

@Mr_Robinini I will do a talk about this at @EuroSciPy in August...
About 2 days, 22 hours ago by: Martin Christen (@MartinChristen)

MartinChristen avatar

@Mr_Robinini Try jupyterhub, you can start jupyterlab too (change config file).
About 2 days, 22 hours ago by: Martin Christen (@MartinChristen)

WebGL Tutorial 1: Creating a WebGL Canvas

First we need to create a HTML5 index.html. In Line 3,4 and 5 the function “init” is added which will be extended to initialize the WebGL rendering context.

        <script type="text/javascript">
           function init() {}
    <body onload="init()">
        <div style="text-align: center">
            <canvas id="canvas" width="640" height="480"></canvas>

The code to initlize the WebGL context would look like this:

   function init() {
   var canvas = document.getElementById("canvas");
   var gl = canvas.getContext("webgl") || 

To retrieve the WebGLRenderingContext some browsers still need “experimental-webgl” instead of “webgl”, therefore we try both. In future “experimental-webgl” shouldn't be used anymore.

if the gl variable is not null we have a valid WebGL rendering context.

Now you can add some clear color and clear the canvas with a color:

gl.clearColor(1, 0, 0, 1);

Of course it is nicer if we try to catch errors when setting up WebGL. A function “initWebGL()” to initialize WebGL is created here, which returns the WebGLRenderingContext or null if there is a problem.

function initWebGL(canvas) {
   var gl = null;
   try {
      gl = canvas.getContext("webgl") || 
   catch(e) { 
      gl = null;
   return gl;

webgl/tutorial01.txt · Last modified: 2013/09/07 21:48 by mchristen