javascript

Static O3D Dependencies

Posted in javascript, o3d on October 8th, 2009 by jb55 – View Comments

One thing you might notice when writing your first O3D javascript application are the dependencies which are included at the top of your page:

o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.primitives');
o3djs.require('o3djs.effect');
o3djs.require('o3djs.io');
o3djs.require('o3djs.arcball');
o3djs.require('o3djs.material');
o3djs.require('o3djs.quaternion');

O3D will use these calls to grab the corresponding script using an XHR request, then write them to the DOM if they haven’t been written yet. This dynamic resolution of dependencies is nice for development, since you can add and remove ‘headers’ on the fly without having to worry about dependencies or modifying your html. The main problem with this method is that if you use o3d alot, the extra requests to your server may seem a bit unnecessary.

My solution was as follows:

  1. Determine which scripts are written to the DOM and in what order
  2. Using a makefile, concatenate the files
  3. Remove all require() calls using sed
  4. Compress the javascript using Yahoo’s YUI compressor

Determining dependencies

This step is pretty straightforward. Load your o3d application as usual and then use a DOM inspector such as Firebug, or the built in Safari/Chrome Web Inspector, and take a look in your <head> tag. You should see the injected o3d javascript (under /o3djs/):

Injected o3d dependencies

Injected o3d dependencies

Keep note of these, as they will be used in the next step

The makefile

Using a makefile made the process of concatenating and compressing the javascript extremely simple and streamlined. Here’s the makefile I used to pull this off:

# This is just the root of my static content directory
# you can remove this if you don't need it
STATIC=../../static/ 

# The folder where the the final compressed
# javascript is installed to after 'make install'
PUBDIR=$(STATIC)js/ 

# A temporary folder used to store
# generated javascript (the concatenated/compressed file)
OUTDIR=./build/ 

# Path to the YUI compressor
COMPRESSOR=../yui/build/yuicompressor-2.4.2.jar

# YUI compressor arguments
COMPRESSOR_ARGS=
VPATH=$(OUTDIR)

# Files to copy to the PUBDIR directory on 'make install'
INST_TARGETS=$(OUTDIR)jgblue3d.js

# The location of your o3djs folder
O3D=$(STATIC)j3d/o3djs/

O3D_TARGETS=$(O3D)base.js $(O3D)util.js $(O3D)event.js \
    $(O3D)error.js $(O3D)math.js $(O3D)rendergraph.js $(O3D)primitives.js \
    $(O3D)effect.js $(O3D)io.js $(O3D)arcball.js $(O3D)quaternions.js \
    $(O3D)material.js $(O3D)jgblue-3d.js

jgblue3d.js: combined3d.js
    java -jar $(COMPRESSOR) $(COMPRESSOR_ARGS) $(OUTDIR)$< -o $(OUTDIR)$@

combined3d.js: $(O3D_TARGETS)
    cat $^ > $(OUTDIR)$@
    sed -e 's/^o3djs\.require\(.*\);$$//g' $(OUTDIR)$@ > $(OUTDIR)$@.clean
    mv $(OUTDIR)$@.clean $(OUTDIR)$@

.PHONY: install clean all

all: jgblue3d.js

install:
    cp $(INST_TARGETS) $(PUBDIR)

clean:
    rm $(OUTDIR)*.js

To get this working, you’ll need to change some of the variables to fit your project. The most important thing that you will need to change is the O3D_TARGETS variable. This variable holds base.js, the path to all of the o3d dependencies (gathered in step 1), and finally your o3d code.

Now all you have to do is type:
make && make install

You’re done!

You can now remove the base.js from your html and add the newly generated javascript file! It should work exactly the same as the original**.

** No promises ;)