6.12 - Coding Issues

We have discussed the theory of rendering and transformations and you have studied several demonstration programs. But how can you create your own independent WebGL program? It is suggested that you start with a working program and modify it to meet your needs. This lesson explains the software modules of the demo programs you have been experimenting with.

The HTML Code:

A WebGL program need a significant number of data files from the server. A server responds to file download requests asynchronously, which means that the files will be downloaded at the first available opportunity but not necessary in the order you requested them. So the first order of business is to download all of the files you need.

The JavaScript file learn_webgl_02.js contains a class called Learn_webgl. An object of this class can download all of your files. At the bottom of your HTML file, but inside the body element, include a <script> element like the following example:

<script>
  var models = ["../../lib/models/RobotBase.obj",
                "../../lib/models/Forearm.obj",
                "../../lib/models/Upperarm.obj"];
  var shaders = ["../../lib/shaders/shader05.vert", "../../lib/shaders/shader05.frag"];
  var controls = ["W1_forearm_angle", "W1_upperarm_angle", "W1_pause"];
  var my_program = new Learn_webgl("W1_canvas", "SceneRender", models, shaders, controls);
</script>

This JavaScript code creates a list of model files to download, a list of shader programs to download, and a list of HTML control element ID’s. It then creates an instance of the Learn_webgl class and sends it the following parameters:

  • The ID of the canvas to render into.
  • The name of your “render” class. (This class knows how to initialize a canvas for WebGL rendering and how to render a scene in the canvas.)
  • A list of model file names.
  • A list of shader program file names.
  • A list of HTML input control element ID names.

The Learn_webgl object will download all your files from the server, convert each .obj model to an ModelArrays object, and create an instance of your scene render class. Remember that web pages are event driven. Nothing happens on a page unless a user event or a timer event “fires”.

Your HTML file must download the JavaScript code your program needs. Use a series of <script> elements like this:

<script src="../../lib/learn_webgl_02.js"></script>
<script src="../../lib/learn_webgl_console_messages.js"></script>
<script src="../../lib/learn_webgl_point4.js"></script>
<script src="../../lib/learn_webgl_vector3.js"></script>
<script src="../../lib/learn_webgl_matrix.js"></script>
<script src="../../lib/learn_webgl_obj_to_arrays.js"></script>
<script src="../../lib/learn_webgl_model_render_05.js"></script>

One last thing. The demo code uses jQuery to make the JavaScript code cross-platform so that it works in all the major browsers. You need to download jQuery.js and include the jQuery library using a <script> tag like:

<script src="../lib/jquery.js"></script>

Put this element in the <head> element of your HTML code. This guarantees that it will be downloaded before any of your other JavaScript code is executed.

For all the <script> examples above, modify the path to the file based on where you store the JavaScript code file relative to your HTML file.

SceneRender JavaScript Class

You need a class that will render your scene. Start with this class, simple_transform_example_render4.js and modify it as needed.

SceneEvents JavaScript Class

You need a class that will process events. Start with this class, simple_transform_example_events4.js and modify it as needed.

Shader programs

You need at least one vertex shader and one fragment shader program for rendering. shader05.vert and shader05.frag are reasonable starting points.

Getting Code from the learnwebgl.brown37.net server

You can download any code from the course textbook server in one of two ways:

  • Use the “Download” button on any of the demos.
  • Open a page that has demo code you want to save. Open the “Developer Tools” and select the “Sources” tab. Expand the folder lists to find the file you want. Right-click on the file icon and select “Save as...”. Note: You will have fewer (and clearer) file choices if you open a demo program in a separate browser tab or window.
Next Section - 7.1 - Introduction to Cameras