-
I posted to delicious.com
Visualizing Last.fm data with #WebGL, #GLGE, #jQuery
- Tags:
- webGL
July 23 2010, 3:40pm | Comments »
-
I posted to delicious.com
Shader Toy - webGL
http://www.iquilezles.org/apps/shadertoy/
- Tags:
- 3d
- javascript
- demoscene
- webGL
May 27 2010, 5:17am | Comments »
-
I posted to i-create.org
WebGL Renering of BSP Maps
http://i-create.org/2010/05/14/webgl-renering-of-bsp-maps/
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
May 14 2010, 4:42pm | Comments »
-
I posted to delicious.com
The EnergizeGL Framework | WebGL for the mass
- Tags:
- javascript
- framework
- webGL
May 2 2010, 9:24pm | Comments »
-
I posted to i-create.org
WebGL TweetTank Built with C3DL Part 2
http://i-create.org/2010/04/26/webgl-tweettank-built-with-c3dl-part-2/
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('<canvas style="display: block;" id="tweetTank" width="800" height="800"></canvas>'); $('#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
April 26 2010, 9:27pm | Comments »
-
I posted to i-create.org
WebGL TweetTank Built with C3DL Part 1
http://i-create.org/2010/04/18/webgl-tweettank-built-with-c3dl-part-1/
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
- Tags:
- 3d
- i-create
- MashUp
- javascript
- jquery
- Experiment
- webGL
- C3DL
April 18 2010, 6:04pm | Comments »
-
I posted to delicious.com
#CopperLicht - #JavaScript #3D #Engine using #WebGL -> Its wicked cool if you have a real browser....
http://www.ambiera.com/copperlicht/
April 15 2010, 8:17pm | Comments »
-
I posted to delicious.com
Scene Graph Library for #WebGL #javascript
- Tags:
- javascript
- webGL
April 15 2010, 7:35pm | Comments »
-
I posted to delicious.com
Quake II in HTML5 | Flash Enabled Mobile and Consumer Devices
http://www.embeddedflash.com/?p=680
April 5 2010, 6:06pm | Comments »
-
I posted to delicious.com
Google Web Toolkit Blog: Look ma, no plugin! Quake2
http://googlewebtoolkit.blogspot.com/2010/04/look-ma-no-plugin.html
April 5 2010, 6:06pm | Comments »
-
I posted to delicious.com
#Blender to #WebGL exporter | Rozengain.com - Creative Technology Blog
March 15 2010, 10:21am | Comments »
-
I posted to delicious.com
#WebGL Musical Solar System
http://blog.nihilogic.dk/2009/11/webgl-musical-solar-system.html
- Tags:
- javascript
- opengl
- html5
- canvas
- webGL
March 10 2010, 8:23pm | Comments »
-
I posted to i-create.org
jQuery CenterIT
http://i-create.org/2010/02/07/jquery-centerit/
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.
?View Code JAVASCRIPTfunction 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 Bookmark and Share More »Powered by Bookmarkify™
February 7 2010, 4:37pm | Comments »