align-toparrow-leftarrow-rightbackbellblockcalendarcamerachatcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-crosscrosseditemptyheartfacebookfullheartglobegoogleimagesinstagramlocation-pinmagnifying-glassmailmoremuplabelShape 3 + Rectangle 1outlookpersonplusImported LayersImported LayersImported Layersshieldstartwitteryahoo

WebGL – Back to basics

I think it's time to revisit the basics, for those who have no experience of WebGL. In this session we'll cover the WebGL basics – setting-up, debugging, basic interaction and simple animation and, time permitting, the same with Three.js.

Prerequisites  
A laptop with a browser that supports WebGL (get.webgl.org) and an editor that can handle HTML and JavaScript.

Some knowledge of HTML and programming, preferably JavaScript (or similar).

Some features will require a server, although there are workarounds. (Brackets.io and Visual Studio provide one, or you can use node.js or whatever you’re comfortable with.)

Register  
If you're planning on attending, please RSVP and register on the Skills Matter site (https://skillsmatter.com/meetups/6467-webgl-back-to-basics).

Join or login to comment.

  • Carl B.

    Re: identifying/using the colour buffer

    A buffer is created, bound and populated:
    cubeVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
    ...
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColors), gl.STATIC_DRAW);
    cubeVertexColorBuffer.itemSize = 4;
    cubeVertexColorBuffer.numItems = 24;

    The location of the attribute in the shader program is stored:
    shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");

    The buffer is updated / written to by the line:
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, cubeVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

    At this point it's just a data buffer with no special meaning... The vertex shader declares an attribute:
    attribute vec4 aVertexColor;

    which is used to set:
    varying vec4 vColor;

    which in turn is interpolated and passed to the fragment shader where it is used to set the fragment colour:
    gl_FragColor = vColor;

    August 1, 2014

  • Carl B.

    Re: emissive in Three.js
    From the OpenGL Programming Guide
    "In the OpenGL lighting model, the emissive color of a surface adds intensity to the object, but is unaffected by any light sources. Also, the emissive color does not introduce any additional light into the overall scene."

    In Three.js, Lambert and Phong materials support emissive, but if you're modelling a light the basic material should be sufficient, (see my demo: http://webglworkshop.com/04/07.light.shadows.html).

    August 1, 2014

  • Damon H

    Possible to stream such a useful event? Google Hangouts or other?

    1 · July 30, 2014

    • Carl B.

      It's not something I'd considered, but I'll look into it.

      August 1, 2014

  • Carl B.

    Re: books on Three.js, try

    Learning Three.js- The JavaScript 3D Library for WebGL by Jos Dirksen

    Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages by Tony Parisi

    and the older
    WebGL: Up and Running also by Tony Parisi

    One problem is the rapid evolution of Three.js, web searches may be a better option, or could always ask me :)

    There is also the excellent Udacity online course "Interactive 3D Graphics" which uses Three,js - https://www.udacity.com/course/cs291

    1 · August 1, 2014

  • Gen A.

    Sorry to miss this. I was really looking forward to it, but I mixed up (it rarely happens) some dates. I thought I was supposed to go to a Women in Engineering event today, but it's actually tomorrow (same date as this).

    Hope you'll offer this WebGL Basic workshop again in the future.

    Have fun at the workshop!

    July 30, 2014

Our Sponsors

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy