This is aimed at the complete beginner. Most will skip-read this.

You will need a single library file to get started (only 100Kb unzipped!). Download It

MakeGL will draw it's stuff inside any canvas element you give it. So lets add that to your page and give it a canvas element to draw to. We do not want an empty scene so lets add something. You can Download this asset.

<script src="mgl.js"></script>
<canvas id="makeGLCanvas"></canvas>

<script>
    new MGL.Scene('makeGLCanvas', 'MakeGL.glb');
</script>

Our script to actually get things going is one line. We just call the constructor of the MakeGL Scene class, giving it the id of the canvas element we want it to use. The second parameter is the url of the 3D asset. All MakeGL classes are prefixed with MGL.

We can size/style our canvas with CSS and everything will automatically adjust. Let's make our canvas fill the screen area with a little CSS.

<style>
    #makeGLCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
    }
</style>

I added the touch-action: none; line so that interactions within the canvas are ignored by the browser. When you drag around you will see we get a few controls by default (that we can later change if we want).

You can see a live display of what we have so far Here

The object takes light from it's environment and the environment is plain. We are about to make this look a million times more impressive with one short hop...

Adding Environment

You may have noticed we didn't add lights. We can if we like, however we don't need too. In real life there is light all around you bouncing of your environment everywhere. MakeGL does that too by looking at the environment you give it. So let's go ahead and give it one.

<script>
    new MGL.Scene('makeGLCanvas', {
        assets:[{url: 'MakeGL.glb'}],
        environments:[{ url: "img/env/park/", ext: "jpg" }]
    });
</script>

Instead of passing the url of a 3D asset, we passed a javascript Object telling what 3D asset to use as well as a path where it can find pictures for a simple environment box. (for more complicated scenes we can put this info into a separate JSON file and pass the url).

The environment box is simply a collection of six images of the view in each direction as per the diagram below. You can download the ones I used (helpfully provided by Emil Persson). And extract the files into directory. Make sure you point the url field to the same directory you extract the files.

MakeGL will take these 6 images and calculate the environmental lighting that would naturally come from what is imaged. It will also calculate how different materials would react. This takes a few moments then .. Well you will see..

You can see a live display of what a difference that makes Here

Animation

We are going to give our object life. We do this by moving it little by little every time the screen is updated.

Each update cycle will automatically run a function for each object if it is supplied. So we will supply a little function to rotate our asset a little bit at a time.

<script>
    new MGL.Scene('makeGLCanvas', {
        assets:[{url: 'MakeGL.glb', name: 'myAsset'}],
        environments:[{ url: "img/env/park/", ext: "jpg" }]
    });
    function myAsset_update(time) {
       this.rotateY(time*Math.PI); 
    }
</script>

You will see where I defined my assets, I added a name string. This just serves to rename whatever asset I loaded.

Next I add a function with the name of my asset appended with _update. This function will be passed one parameter which is the time passed since the last update.

In these functions this will always refer to the object it refers to. In this case our 3D asset. So we call our objects own rotateY method which requires an angle in radians.

If I add another asset and give it the same name, then it would run the same function each frame and so also rotate in an identical manner.

You can view the results Here