i-create | therefore-i am » webGL

WebGL Rendering of BSP Maps

Brendon Smith — Fri, 14 May 2010 23:42:21 +0000

It has never been a better time to be a developer. I am really looking forward to full implementations of HTML5 everywhere I believe HTML5 / JavaScript / ActionScript will be an extremly potent combination! I believe their will be proliferation of new devices in the mobile arena. JavaScript and HTML are also becoming more powerful. I have been reading about WebGL and experimenting with it for awhile now and the other day I heard about CopperCube by Ambiera based off of the Irrlicht Engine and I was immediately curious. It is basically a world editor / game engine for the web that supports Flash and WebGL output. I have to be honest I think for Flash, I will definitely stick with Away3D. For WebGL output I am extremely impressed It was easy to use and in the next few months, I will be studying their web javascript api copperlicht. Here are a couple examples of scenes I was easily able to export out with CopperCube. This stuff can also of course be done with Flash. You can run Quake in flash using Alchemy. Alchemy is an extremly innovative software project if you are not familiar with it by now I suggest looking at it. I have found Bruce Jawn’s website to be insightful not only on Alchemy but also in regards to Raytracing with flash.

You will only be able to see the example below if you have a webGL compatiable browser. Here are instructions on how to get a webGL browser.

Click Here to View

To create the environment that are displayed above it was easy. I was able to download Quake3 maps from a few sites like lvlworld or Map Factory. Once the maps have been downloaded and unzipped notice that it has a .pk3 extension change it to a zip file and then extract it. You will find all you need in that folder from their all you have to do to get it into CopperCube is navigate to the folder named Map and select the .bsp file and from that point on you are good to go. I have also been attempting to convert these files to OBJ and then bring them into PreFab. I will keep you all posted on the updates as I progress.

Click Here to View

WebGL Libraries:
Canvas #D Library” target=”_blank”>C3DL
Copperlicht
CubicVR
Energize
GLGE

WebGL / HTML5 Links:
Learning WebGL
HTML5 3D Gallery
HTML5 Planes and Cubes
JavaScript Coverflow
CSS3 Cube NetTuts Premium Tutorial

WebGL TweetTank Built with C3DL Part 2

Brendon Smith — Tue, 27 Apr 2010 04:27:42 +0000

I have added the ability to search twitter and re-populate the fish tank. So now you can place a search in like “Tool” or “Toledo” or whatever you query it will pull results from twitter. I have noticed this experiment is resource intensive. In part three of this experiment I will look for ways to tidy up the code make it more reusable and less resource intensive. I also noticed in c3dl they already have a nice random number function built in I will have to try and use that in the future. I am also curious to see if I can’t use this library to augment the Processing.JS library I noticed the same group at Secena is also working on this library I believe they have ported most of the new functions. I also added two sliders with jQuery to control the camera I am currently using an orbitCamera I think I will change this in the future to utilize a free camera and use the animateAxis function to animate around a vector with an angle. Currently I am using the Yaw and Pitch functions of the orbitCamera of course it looks kind of awkward to spin it. I will try to find ways to speed this experiment up, fix the picking result to be more sensitive, clean up the look and feel of it for part three. If there is a part four it will be about making the fish bound to the sphere and maybe making them so the swim back and forth not in a straight line.

I might also be making a similar experiment with away3Dlite and the hype framework with flash this weekend. This has been a fun experiment to play around with. Maybe Adobe should allocate some of their resources to compiling to javascript and using the webGL and DirectX for IE with the canvas tag (Even though It isn’t as fast as flash and doensn’t display the same across browsers). Haxe I believe currently does this to some extent I am not sure how fast the results are but seems to me their are Sandy3D experiments on Google Experiments.

Here is the code for the experiment:

var CANVAS_WIDTH = $(window).width;
var CANVAS_HEIGHT = $(window).height()*2;
$('#tweetTank').width(CANVAS_WIDTH);
$('#tweetTank').height(CANVAS_HEIGHT);
$('#tweetTank').css('display','block');
		var arrayTwit;
        var schooloffish;
        var fishArray = [];
        var bubblesArray = [];
        var bubbles;
		var objectsHit = "";
		var objectSelected;
		var cam;
		var searchInt = 0;
        function mRandom(r) {
            var randomInt = Math.floor(Math.random() * r + 1);
            return randomInt;
        }
 
        c3dl.addModel("fish.dae");
        c3dl.addModel("OceanSphere.dae"); 
        // The program main
        function canvasMain(canvasName) {
 
            // Create new c3dl.Scene object
            scn = new c3dl.Scene();
            scn.setCanvasTag(canvasName);
 
            // Create GL context
            renderer = new c3dl.WebGL();
            renderer.addTexture("bubble.jpg");
            renderer.createRenderer(this);
 
            // Attach renderer to the scene
            scn.setRenderer(renderer);
            scn.init(canvasName);
            //the isReady() function tests whether or not a renderer
            //is attached to a scene.  If the renderer failed to
            //initialize this will return false but only after you
            //try to attach it to a scene.
            if (renderer.isReady()) {
                // Create a Collado object that
                // will contain a imported
                // model of something to put
                // in the scene.
                var schooloffish = mRandom(100);
                var ocean = new c3dl.Collada();
                ocean.init("OceanSphere.dae");
                ocean.setAngularVel(new Array(0, .00005, 0));
                ocean.scale([20.0, 20.0, 20.0]);
                ocean.setPickable(false);
                scn.addObjectToScene(ocean); 
				//console.log(arrayTwit.length);
                for (var i = 0; i < arrayTwit.length; i++) {
					//console.log(arrayTwit[i]);
                    fishArray[i] = new c3dl.Collada();
                    fishArray[i].init("fish.dae");
                    fishArray[i].yaw(45.0);
					fishArray[i].ID = "Fish" + i;
                    //fish.roll(25.0);
                    fishArray[i].pitch(-86.4);
					fishArray[i].setLinearVel([0,0,-2]);
                    fishArray[i].url = "http://twitter.com/" + arrayTwit[i].from_user;
                    //fish.setPosition([1200, 100, 700]);
                    fishArray[i].setPosition([mRandom(1200), mRandom(900), mRandom(1500)]);
                    scn.addObjectToScene(fishArray[i]);
                }
                for (var i = 0; i < 7; i++) {
                    bubblesArray[i] = new c3dl.ParticleSystem();
                    bubblesArray[i].setMinVelocity([-2, 0, -2]);
                    bubblesArray[i].setMaxVelocity([2, 25, 2]);
                    bubblesArray[i].setMinLifetime(5.3);
                    bubblesArray[i].setMaxLifetime(10.7);
                    bubblesArray[i].setMinColor([0, 0, 0.3, 0]);
                    bubblesArray[i].setMaxColor([0, 0.3, 0.5, 1]);
                    bubblesArray[i].setSrcBlend(c3dl.ONE);
                    bubblesArray[i].setDstBlend(c3dl.ONE);
                    bubblesArray[i].setMinSize(0.5);
                    bubblesArray[i].setMaxSize(5.0);
                    bubblesArray[i].setTexture("bubble.gif");
                    bubblesArray[i].setAcceleration([0, 9, 0]);
                    bubblesArray[i].setEmitRate(40);
                    bubblesArray[i].init(150);
                    bubblesArray[i].setPosition([mRandom(1200), mRandom(100), mRandom(700)]);
                    scn.addObjectToScene(bubblesArray[i]);
                }
                // Create a camera
                //var cam = new c3dl.FreeCamera();
 
 
 
               // scn.setCamera(cam);
                cam = new c3dl.OrbitCamera();
                cam.setFarthestDistance(2000);
                //cam.pitch(90);
                cam.setPosition(new Array(3000.0, 300.0, 200.0));
                //cam.setLookAtPoint(new Array(0.0, 0.0, 0.0));
                cam.setOrbitPoint(new Array(800.0, 100.0, 200.0));
                cam.setClosestDistance(200);
                cam.setDistance(900);
                //cam.pitch(1);
                scn.setCamera(cam);
                // Start the scene
                scn.startScene();
                scn.setPickingCallback(goLink);
                //scn.setKeyboardCallback(onKeyUp, onKeyDown);
                scn.setMouseCallback(mouseWheel);
 
            }
        }
 
		function goLink(pickingObj)
		{
 			var objectsHit = pickingObj.getObjects();
 
 			if( objectsHit.length > 0 )
			 {
 				var sepiaEffect = new c3dl.Effect();
				sepiaEffect.init(c3dl.effects.SEPIA);
 				window.open(objectsHit[0].url, '_blank');
				objectsHit[0].setEffect(sepiaEffect);
 					for(var i = 0; i < arrayTwit.length; i++){
 						if(objectsHit[0].url == scn.getObj(i).url)
 					scn.getObject(i).setEffect(sepiaEffect);
 					}
 				}
		}
 
        function mouseWheel(event) {
            var delta = 0;
			const ZOOM_SENSITIVITY = 3;
            // Chromium
            if (event.wheelDelta) {
                delta = -event.wheelDelta / 20;
            }
            // Minefield
            else if (event.detail) {
                delta = event.detail * 4;
            }
 
            else {
                if (keyD) {
                    cam.yaw(delta * ZOOM_SENSITIVITY / 100);
                }
                else {
 
                    // towards user
                    if (-delta * ZOOM_SENSITIVITY < 0) {
                        cam.goFarther(-1 * -delta * ZOOM_SENSITIVITY);
                    }
 
                    // towards screen
                    else {
                        cam.goCloser(-delta * ZOOM_SENSITIVITY);
                    }
                }
            }
        }
 
 
function twitterSearch(searchTag) {
	//console.log(searchTag);
	arrayTwit = "";
	arrayTwit = new Array();
                $.getJSON("http://search.twitter.com/search.json?q=" + searchTag + "&callback=?",
        function(data) {
            $.each(data.results, function(i, item) {
                twitSeach = item;
                arrayTwit.push(twitSeach);
            });
 
			if(searchInt >=1){
				searchInt++;
				$('#TweetTankBowl').html("");
				$('#TweetTankBowl').html('');
				$('#tweetTank').width(CANVAS_WIDTH);
				$('#tweetTank').height(CANVAS_HEIGHT);
				$('#tweetTank').css('display','block');
				canvasMain("tweetTank");
			}else{
				searchInt++;	
				c3dl.addMainCallBack(canvasMain, "tweetTank");
			}
		 });
}
$(document).ready(function() {
            twitterSearch("fishing");
			sliderGo();
        });
 
function goTwitter(){
var tweet =  $('#tweetSearchTxt').val();
twitterSearch(tweet);	
}
 
function sliderGo(){
$("#sliderVeritcal").slider({
				step: 0.15,
				min: 0.00,
				max:360.00,
				orientation: 'vertical',
				slide: function(event, ui) {  
					cam.pitch(ui.value);
				}
			});
				$("#sliderHorizontal").slider({
				step: 0.15,
				min: 0.00,
				max:360.00,
				slide: function(event, ui) {  
					cam.yaw(ui.value);
				}
			});	
}

Launch Experiment / Download Code

WebGL TweetTank Built with C3DL Part 1

Brendon Smith — Mon, 19 Apr 2010 01:04:01 +0000

First of all let me mention you will not be able to run this demo unless your browser is WebGL ready. So that means if you want to see this then you have to download a nightly build of FireFox, Chrome, or Safari. You can read how to do this here.

My first impressions of WebGL is it is awesome and easy to do. I believe WebGL will make it easy for any developer to rapidly create a game on the web. It is fast appears to have decent support meaning that it works awesome on my Apple computers and on one of my Windows7 computers but then fails for me on one of my workstations that has a souped up ATI graphics card humm.. go figure. It is hard to say how well the graphics rendering will perform on the majority of computers out their but it probably won’t be that bad and after all these are nightly builds that are pre-alpha for the most part. It also makes me wonder if the next iPhones will have this feature built into their webkit. Hard to say. It is known that out of all the new browsers coming out that ie9 will not support graphics rendering shocking (Not really). It might be because Microsoft believes that WebGL will be an epic failure or maybe they simply don’t have the resources to devote to it at this time.

I believe graphic card support in these new browsers will speed up canvas rendering a little but I when looking at the flash benchmarks that are currently out their it definitely shows you how fast the flash player is in comparison. In short canvas tag is not even remotely as fast. In the news their has been lots of discussion about flash being dead but this simply isn’t true. Here is why forthcoming HDTV/3DTV will support flash, google phones will support flash, blackberry, and windows phones will all support flash. So as a mobile platform it will be the easiest way to build and deploy to all platforms. It is too bad Apple doesn’t see it but oh well. I guess I will just have to get better at Objective-C to be on that platform.

This is the first part of a two part example. I created a simple mashup. To create this example I used C3DL and jQuery. C3DL is an awesome opensouce library put together by the wonderful people at Seneca College. This example pulls a search results from twitter with the search query subject being fishing. Yes, I know that twitter is all about birds and tweets but after scouring the Google 3D warehouse, I decided that most of the models for birds that are freely available suck. So I made a virtual fish tank instead. The tank has bubbles rendered with the C3DL particle library and it also has a school of fish that swim slowly though the tank. It’s not really ground shaking stuff pretty simple. I will work on a future version where it pulls results with ajax. I noticed the C3DL library attaches an event listener in the init.js that listens for the document to be loaded . This of course makes my search function of twitter fail. I have looked at overriding this feature a number of ways not limited to jQuery getScript, etc.. I could also put the query on the query string for the window location and then re-load the page but I think that would be kind of wonky so whatever I will do this in the next version of the experiment. So whatever I will save it for next time.

Check out the experiment here but before you do download a nightly build of Firefox.

Here is the code for the experiment:

var CANVAS_WIDTH = $(window).width();
var CANVAS_HEIGHT = $(window).height()*2;
$('#tweetTank').width(CANVAS_WIDTH);
$('#tweetTank').height(CANVAS_HEIGHT);
$('#tweetTank').css('display','block');
 
		var arrayTwit;
        var schooloffish;
        var fishArray = [];
        var bubblesArray = [];
        var bubbles;
		var objectsHit = "";
		var objectSelected;
        function mRandom(r) {
            var randomInt = Math.floor(Math.random() * r + 1);
            return randomInt;
        }
 
        c3dl.addModel("fish.dae");
        c3dl.addModel("OceanSphere.dae"); 
        // The program main
        function canvasMain(canvasName) {
 
            // Create new c3dl.Scene object
            scn = new c3dl.Scene();
            scn.setCanvasTag(canvasName);
 
            // Create GL context
            renderer = new c3dl.WebGL();
            renderer.addTexture("bubble.jpg");
            renderer.createRenderer(this);
 
            // Attach renderer to the scene
            scn.setRenderer(renderer);
            scn.init(canvasName);
 
            //the isReady() function tests whether or not a renderer
            //is attached to a scene.  If the renderer failed to
            //initialize this will return false but only after you
            //try to attach it to a scene.
            if (renderer.isReady()) {
                // Create a Collado object that
                // will contain a imported
                // model of something to put
                // in the scene.
 
                //fish.setAngularVel(new Array(0.0, 0.0001, 0.0));
 
                var schooloffish = mRandom(100);
                var ocean = new c3dl.Collada();
                ocean.init("OceanSphere.dae");
                ocean.setAngularVel(new Array(0, .00005, 0));
                ocean.scale([20.0, 20.0, 20.0]);
                ocean.setPickable(false);
                scn.addObjectToScene(ocean); 
				//console.log(arrayTwit.length);
                for (var i = 0; i < arrayTwit.length; i++) {
					//console.log(arrayTwit[i]);
                    fishArray[i] = new c3dl.Collada();
                    fishArray[i].init("fish.dae");
                    fishArray[i].yaw(45.0);
					fishArray[i].ID = "Fish" + i;
                    //fish.roll(25.0);
                    fishArray[i].pitch(-86.4);
					fishArray[i].setLinearVel([0,0,-2]);
                    fishArray[i].url = "http://twitter.com/" + arrayTwit[i].from_user;
                    //fish.setPosition([1200, 100, 700]);
                    fishArray[i].setPosition([mRandom(1200), mRandom(900), mRandom(1500)]);
                    scn.addObjectToScene(fishArray[i]);
                }
                for (var i = 0; i < 7; i++) {
                    bubblesArray[i] = new c3dl.ParticleSystem();
                    bubblesArray[i].setMinVelocity([-2, 0, -2]);
                    bubblesArray[i].setMaxVelocity([2, 25, 2]);
                    bubblesArray[i].setMinLifetime(5.3);
                    bubblesArray[i].setMaxLifetime(10.7);
                    bubblesArray[i].setMinColor([0, 0, 0.3, 0]);
                    bubblesArray[i].setMaxColor([0, 0.3, 0.5, 1]);
                    bubblesArray[i].setSrcBlend(c3dl.ONE);
                    bubblesArray[i].setDstBlend(c3dl.ONE);
                    bubblesArray[i].setMinSize(0.5);
                    bubblesArray[i].setMaxSize(5.0);
                    bubblesArray[i].setTexture("bubble.gif");
                    bubblesArray[i].setAcceleration([0, 9, 0]);
                    bubblesArray[i].setEmitRate(40);
                    bubblesArray[i].init(150);
                    bubblesArray[i].setPosition([mRandom(1200), mRandom(100), mRandom(700)]);
                    scn.addObjectToScene(bubblesArray[i]);
                }
                // Create a camera
                //var cam = new c3dl.FreeCamera();
 
 
 
               // scn.setCamera(cam);
                cam = new c3dl.OrbitCamera();
                cam.setFarthestDistance(2000);
                //cam.pitch(90);
                cam.setPosition(new Array(3000.0, 300.0, 200.0));
                //cam.setLookAtPoint(new Array(0.0, 0.0, 0.0));
                cam.setOrbitPoint(new Array(800.0, 100.0, 200.0));
                cam.setClosestDistance(200);
                cam.setDistance(900);
                //cam.pitch(1);
                scn.setCamera(cam);
                // Start the scene
                scn.startScene();
                scn.setPickingCallback(goLink);
                scn.setKeyboardCallback(onKeyUp, onKeyDown);
                scn.setMouseCallback(mouseMove, mouseWheel);
 
            }
        }
 
		function goLink(pickingObj)
		{
 			var objectsHit = pickingObj.getObjects();
 
 			if( objectsHit.length > 0 )
			 {
 				var sepiaEffect = new c3dl.Effect();
				sepiaEffect.init(c3dl.effects.SEPIA);
 				window.open(objectsHit[0].url, '_blank');
				objectsHit[0].setEffect(sepiaEffect);
 					for(var i = 0; i < arrayTwit.length; i++){
 						if(objectsHit[0].url == scn.getObj(i).url)
 					scn.getObject(i).setEffect(sepiaEffect);
 					}
 				}
		} 
 
 
        function onKeyUp(event) {
            if (event.keyCode == 89) { keyD = false; }
        }
 
 
        function mouseWheel(event) {
            var delta = 0;
 
            // Chromium
            if (event.wheelDelta) {
                delta = -event.wheelDelta / 20;
            }
            // Minefield
            else if (event.detail) {
                delta = event.detail * 4;
            }
 
            else {
                if (keyD) {
                    cam.yaw(delta * ZOOM_SENSITIVITY / 100);
                }
                else {
 
                    // towards user
                    if (-delta * ZOOM_SENSITIVITY < 0) {
                        cam.goFarther(-1 * -delta * ZOOM_SENSITIVITY);
                    }
 
                    // towards screen
                    else {
                        cam.goCloser(-delta * ZOOM_SENSITIVITY);
                    }
                }
            }
        }
 
 
        function onKeyDown(event) {
            if (event.keyCode == 65) {
                cam.setOrbitPoint([0, 0, 0]);
            }
            if (event.keyCode == 89) {
                keyD = true;
            }
        }
        function mouseMove(event) {
            // get mouse coords relative to window
            var mmx = event.pageX - 1;
            var mmy = event.pageY - 1;
 
 
 
            if (mmx != null && mmy != null) {
                // NDC
                var normalizedDeviceCoords = [
        (2 * mmx / CANVAS_WIDTH) - 1,
       -((2 * mmy / CANVAS_HEIGHT) - 1),
        1, 1];
 
                // Sometimes this is called before the perspective transform
                // is setup which causes warnings. This check prevents that.
                if (c3dl.isValidMatrix(scn.getProjectionMatrix())) {
                    var iproj = c3dl.inverseMatrix(scn.getProjectionMatrix());
 
                    // To get the clip coords, we multiply the viewspace coordinates by
                    // the projection matrix.
                    // Working backwards across the pipeline, we have to take the normalized
                    // device coordinates and multiply by the inverse projection matrix to get
                    // the clip coordinates.
                    var clipCoords = c3dl.multiplyMatrixByVector(iproj, normalizedDeviceCoords);
 
                    // perspective divide
                    clipCoords[0] /= clipCoords[3];
                    clipCoords[1] /= clipCoords[3];
                    clipCoords[2] /= clipCoords[3];
                    clipCoords[2] = -clipCoords[2];
 
                    var rayInitialPoint = cam.getPosition();
 
                    var x = clipCoords[0];
                    var y = clipCoords[1];
                    var z = clipCoords[2];
 
                    var kludge = c3dl.multiplyVector(cam.getLeft(), -1);
                    var viewMatrix = c3dl.makePoseMatrix(kludge, cam.getUp(), cam.getDir(), cam.getPosition());
 
                    var rayTerminalPoint = c3dl.multiplyMatrixByVector(viewMatrix, [x, y, z, 0]);
                    var rayDir = c3dl.normalizeVector(rayTerminalPoint);
 
                    // get angle
                    var angle = Math.acos(-1 * rayDir[1]);
                    var camHeight = rayInitialPoint[1];
 
                    var hyp = camHeight / Math.cos(angle);
 
                    mx = hyp * rayDir[0] + rayInitialPoint[0];
                    my = hyp * rayDir[1];
                    mz = hyp * rayDir[2] + rayInitialPoint[2];
                }
            }
        }
function twitterSearch(searchTag) {
	//console.log(searchTag);
	arrayTwit = "";
	arrayTwit = new Array();
                $.getJSON("http://search.twitter.com/search.json?q=" + searchTag + "&callback=?",
        function(data) {
            $.each(data.results, function(i, item) {
                twitSeach = item;
                arrayTwit.push(twitSeach);
            });
			//c3dl.init();
			c3dl.addMainCallBack(canvasMain, "tweetTank");
        });
 
        }
$(document).ready(function() {
            twitterSearch("fishing");
        });

Launch Experiment / Download Code

I mentioned possibly creating a spider with silverlight. I still would like to do that in the near future. I found this cool silverlight examples and would like to study it! I have installed Visual Studio 2010 on my Windows boxes and it is awesome!

I have also been eying a new tutorial on the Hype Framework in ComputerArts latest issue(174). Has a really cool example that teaches you how to use Hype to make music drawings created by Stewart Hamilton-Arrandale. I will learn from this code. I could add this type of functionality into my KulerSplash.

I also found this resource recently on Objective-C really cool web site it was nice of them to share so much Fabien also has some cool JAVA examples as well.

WebGL libraries:
C3DL
CopperLicht
SceneJS

jQuery CenterIT

Brendon Smith — Mon, 08 Feb 2010 00:37:54 +0000

Have you ever had to deal with the hassle of centering modal windows? I made this function to automagically center windows I call this function after I load a modal and it centers the object perfectly for every browser. It takes the hassle of wondering if something is perfectly center in every browser. The only thing I do to use it is send it the main containing div that the object should be centered in and the div that I want to be centered. It grabs the offset does a little basic math and that’s it. No more hassle with centering now it will be perfectly centered.

function CenterIT(mainModal, mainContainer) {
    var modalW = $(mainModal).width() / 2;
    var windowW = $(mainContainer).width() / 2;
    var modalH = $(mainModal).height() / 2;
    var windowH = $(mainContainer).height() / 2;
    var centerPointW = windowW - modalW;
    var centerPointH = windowH - modalH;
    var myPoint = $(mainContainer).offset();
    centerPointW = myPoint.left + centerPointW;
    centerPointH = myPoint.top + centerPointH;
    $(mainModal).css('left', centerPointW);
    $(mainModal).css('top', centerPointH);   
}

Some Useful/Interesting Flash Links:
Prefab – Highly useful tool when it comes to 3D in flash with Away3D
Snook on HTML5 and Adobe

Some Useful/Interesting JavaScript Links:
Javascript RayCaster
Burst Engine for SVG in JavaScript
Canvas 3D
JS3D library
Parallax in CSS
WebGL Example