This tutorial is not going to introduce anything earth-shattering. We just need to start doing a little bit of housekeeping. mybloggingplanet.com
I am sure you may be noticing now that the tutorial sample application has been growing quite a bit over the last few tutorials, and this starts making the code a little bit unwieldy.
The first thing I have done is to move all the Javascript for O3D completely out of the HTML page, and put it all into it’s own JS file. I won’t talk much more about that here, as that is a rather standard practice.
I am, however, more interested in the shaders. Up to now, all the shaders needed on the page have been stored in a textarea and then loaded into the effect when needed (which in our case was the initialisation function). Now, the problems with doing it this way is that it does not make it very easy to reuse the effect between multiple pages, and it also makes the HTML page substantially bigger and therefore harder to work with.
So what we need to do is move all the shader code into an external file, which in this tutorial, I have put into shaders/solidred.shader. This is simply a text file containing what used to be in the effects div.
Within the O3D code, the only change that needs to be done to load the shader is in the initialisation function where we load the shader, we need to a different function to load the shader from the external file into the effect, which is done with this code.
var redEffect = g_pack.createObject('Effect'); var shaderString = 'shaders/solidred.shader'; o3djs.effect.loadEffect(redEffect, shaderString);