In this series I’ll show you how we create your own basic webGL viewer. We will use blender for creating the 3d models. The webGL coding itself will be done with three.js. You have no coding experience?- No problem! We try to explain everything as best as we can and three.js makes webGL coding really easy. So there are no reasons for being afraid. To have a good start it’s necessary that you install some software but I’ll come back on that later.
How I came across webGL
I came in contact with webGL some months ago. A good friend of mine who also authors for quaintproject asked me to help him with a piece of software he is secretly working on. (It’s an online creation tool for a raspberry pi accessory but psst…;)) I suggested to create a 3d viewport. As I didn’t wanted to be dependent from plugins my first choice was web GL….To sum this up we basically have created a 3d viewport displaying 3d-models with textures that depend on the user’s input. It might be available on GitHub one day….
This will come in handy when creating an online viewer for your beautiful 3d models. Your webGL could be part of a bigger online project or be a standalone viewer for your website.
I thought it would be good to compare a selfmade viewer with some ready-made viewers. So here it is:
|+ No upload limits||+ No web-server needed|
|+No adds||+ It’s really easy to upload 3d models|
|+ Private showing possible||+ your 3d models are presented on a well know website|
|– web-server needed||– upload limit 50 mb per file (free account)|
|– requires a bit of coding||– requires plugin for blender|
Further more you might want to check out p3d.in
Click here to view the final result.
Press the middle mouse button to dolly in and out. Press the left mouse button to orbit around the object. By pressing the right mouse button you can grab the camera.
A proper texteditor
Windows users might want to work with notepad ++.
For Mac I’d recommend to use sublime text as well or the powerful on-board tools. 🙂
A browser that supports Web GL
If you are not sure, whether your browser supports WebGL by default check out this link. By the way I’ am using Firefox 26. (Mozilla for Canonical 1.0)
Xampp is a development tool that allows you to test and develop websites and applications on a local machine without the need of uploading your files to a webserver. Xampp is available for Mac, Windows, Linux and even Solaris for free.
Blender is a free and open-source 3D computer graphics software product used for creating animated films, visual effects, art, 3D printed models, interactive 3D applications and video games. You can download Blender for Windows, Mac, Linux and Solaris from blender.org
I’ m using filezilla to push my files to the web. By the way Filezilla is a free Open Source FTP program. The program is designed for Windows, Linux and Mac OS X. On April 18, 2011 was FileZilla Client the 7 most popular download from SourceForge.net.
That’s it for the software. Let’s start with setting up XAMPP.
Setting up XAMPP
Download of the three.js folders
Change to Github and download the .zip folder. Alternatively you could clone the directory. The three.js master folder contains many interesting examples you can learn from. Further more it contains script we e. g. can use to navigate in the view port.
Folders over folders…
Go into your working folder and create two sub folders. Name them js and models. Of course you can give them different names, but keep in mind that you’ll have to adjust the paths for the scripts in the html document. So for beginner’s I’ d recommend to draw on the shown structure. Right click in the main folder and create a new document and call it index.html.
We will start with the most basic HTML-template you can think of. Just navigate to your main folder and open the index.html file with your text editor and copy the script below. We have provided many comment’s so it should be easy for you to understand what every line of code does.
<!--doctype html> <html lang="en"> <head> <title>test of webGL</title> <meta charset="utf-8"> </head> <body style="margin: 0;"> http://js/three.min.js //paste your code from part 2 here </body> </html>
This line of code is important for the character set. It makes sense to use utf-8 for European and utf-16 for African and Asian languages. It can slightly influence the memory consumption.
Copy the three.min.js from the three.js master folder into the newly created js folder. This prompt will include the script to our HTML file.
That’s it for part one. In part two we’ll go ahead and do the webGL coding itself.
If you have any questions or if you ran into any issues feel free to drop a comment. 🙂