I now have a proof-of-concept working that demonstrates that our library will work for multiple browsers. We had been having a problem where Safari doesn’t support the keyword const, so I took those out. Then I found out that someone who had worked on the library before me had been using ‘let’ to create variables. This wasn’t a problem when we where only on Firefox, but other browsers don’t support it, so I had to find all the lets and convert them to vars. Then I had to find all the spots where we used Canvas…Array and switch them to WebGL…Array, but only when running Safari (borrowing a bit of code from the lessons at LearningWebGL made that much simpler).
Cross-Browser Orbiter Demo
With all that done, we finally have the library working for both browsers (I’ll get to Chrome soon, I promise…), but there’s a fairly serious problem. Our library works by putting a link in the header telling the page to include a js file (c3dapi.js to be precise), which then has some JavaScript code that adds more script tags linking to js files (the actual library) to the DOM. This works fine on Firefox, but Safari doesn’t like it. It knows the files are there (I got it to list all the script tags and they’re there and in the correct order), but it doesn’t actually read them. I’ve temporarily fixed this problem by manually adding all the script tags to the html page, but this is ridiculous to have to do every time.
On Firefox we just put
<script type="application/javascript" src="../../canvas3dapi/c3dapi.js" ></script>
and the beginning of c3dapi.js looks like this
var scripts = document.getElementsByTagName("script");
var parts = scripts[scripts.length -1].src.split("/");
parts.pop();
var basePath = parts.join("/");
var head = document.getElementsByTagName("head")[0];
c3dl_require = function(path) {
var includeResource=document.createElement('script');
includeResource.setAttribute('type',"text/javascript;version=1.8");
includeResource.setAttribute('src',basePath + "/" + path);
var scripts = document.getElementsByTagName("script");
head.insertBefore(includeResource,scripts[scripts.length]);
}
c3dl_require('c3dlnamespace.js');
c3dl_require('constants.js');
c3dl_require('effects/effect_docs.js');
For Safari that doesn’t work, so we’ve had to put all those script tags into the page header manually, which looks like this:
<script type="application/javascript" src="../../canvas3dapi/c3dlnamespace.js" ></script> <script type="application/javascript" src="../../canvas3dapi/constants.js" ></script> <script type="application/javascript" src="../../canvas3dapi/effects/effect_docs.js" ></script>with about 50 more script tags.
In short, we’ve got a demo that works for both Firefox and Safari, but it only works because of a temporary fix. Fixing it permanently is the next thing on my to-do list. I should also mention there is a known issue: The moon is not being lit in Safari. After I sort out this issue with including files, I’ll investigate that too.
