A step into webGL

  • A step into webGL

    WebGL is a gaming language that is compatible with all web browsers. It allows for a lot of really fun things, but I am just scratching the surface of it currently.

    My first induction do webGL included JavaScript’s three.js addition. I saw a cool video that allowed a programmer, programming in three.js to have an interactive world where he could program on the fly and see the results of his coding by looking over. This, with the capability of Google cardboard, made me very interested in creating my own programming environment. There are multiple iterations to this project that I will have to do to accomplish this, but I feel it will be an extremely rewarding experiment.

    Step one for me was finding out how to make the simplest thing show up. It’s not that complicated, but lets go through how I made a spinning green cube.

    CODE IMAGE | EXPLANATION

    In the head, we do some styling, making the canvas full sized.

    In the body we make sure we include the three.js script <script src=“js/three.min.js”></script>

    Then we start building our scene – our 3d world. And then we add a camera, so we have some eyes to see our world.

    The next set of code creates the renderer, used to actually render the world. This is important because we have to do this so that the camera can actually see the objects that we create. Such a vicious circle.

    The next chunk deals with creating our first object. Up until this point, there still isn’t anything to see. A black scene, with a camera pointed towards nothing, that renders perfectly (because there is nothing).

    The render function loops to keep redrawing the scene, because we keep moving the box, and because this is a moving type of thing.

    My next step was trying to figure out how websites can be incorporated into webGL. The idea of a 3D world sounds like a fun futurama style way of going through the internet, and knowing how that works seems like useful information to me.

    CODE IMAGE | EXPLANATION

    I found this example and edited to make sure I knew what I was doing. Basically, we iFrame a website, and paste it to 2D box. The example I found also had these nifty knots, and I kept them because they really show off the 3d effects of webGL and three.js. Currently you can’t click on any links or scroll on the pages, but that would be my next step.

    mikegustafson

    Leave a comment