Monster
March 18, 2009
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
Monster is a demonstration of what can be done with browser web standards (without Flash). A square turns to a cube, a sphere, and a monster. Realtime procedural 3d in JavaScript.
Technology:
pre3d, canvas
Comments
Awesome demo!
Reply to this commentthat's a beautiful polygon rasterizer, have you tried it with more polygons, because i imaging this would do for some thing quake-ish...
Reply to this commentSame could be done with a gif
Reply to this commentI ran it with Chrome 5.0.375.127 in one window and Firefox 4.0b3 in another window, at the same time. Chrome ran through almost 2 iterations of the whole routine by the time Firefox ran 1. This is on an ASUS x83v notebook with Intel Core 2 Duo T6400 2.0 Ghz, 4 GB, nVidia GeForece 9300M GS GPU, Vista-64.
Reply to this comment:)
Reply to this commentเยี่ยม
Reply to this commentWorks perfect in Safari 5!!
Reply to this commentThis is amazing dood.
Reply to this commentWorks great in Chrome! CS, Battlefield and much more games may be on the Internet in the future and this is a great start.
Reply to this commentI'm pretty sure you mean "in the web browser" and not "on the internet" because they currently are on the internet at-large. :D
Reply to this commentWorks perfectly in Opera 10.5-preAlpha. I think it will kick Chrome's ass :D
Reply to this commentNice, I'm interested!
mooph
Reply to this commentguys.. this is where the line between 3D Games and websites gets broken
Reply to this commentHTML 5 and Google will rule the web... This is frickin wicked.... Love you guys.... transcending simple reality. WHOOOO!
Reply to this commentI'm just hear to say great job to all the Chrome Experiment developers who came up with these excellent demos. I've coded many of my own showcased elsewhere, but I wanted to add in my two cents to some of the comments going on above...
Take a moment to remember what the name of the site you are on is called..its CHROMEexperiments. Not Firefoxexperiments or InternetExplorerExperiments but CHROMEexperiments ... making comments about any of these demos working or not working in IE is just plain stupid.
Anyone that knows anything about HTML5 and the canvas tag are WELL aware that IE doesn't currently support 99% of the canvas demos out there. If you come here dont troll..simply appreciate that what is being done is ground-breaking because it doesn't need OpenGL, Flash, DirectX or anything other than the canvas tag to work from within your browser.
Reply to this commentPretty cool, but it lags like hell. Thinks that is a problem of "Shiretoko" 3.5 ( I don't know why but it seems like i can only install firefox 3.0.1 in ubuntu, my mother uses winDOS and she can install 3.5 w/o any problems *doh* )
Shiretoko lies at 14% of processor usage, and it lags?!?!
Google, Please port Chrome to Ubuntu!
Reply to this commentOkay, Now I've found out that I can install Chromium on Linux, Quite nice w/ the themes. But it crashed 2 mins after first launch...
---- Runs pretty smooth and cool blur! It doesn't even lag at all in Chromium!
Reply to this commentbad box creation.....try adding more
Reply to this commentcan't believe some of these people don't appreciate such fine work at all. just look at the code. this is a proof of concept, not transformers. this is great work!
Reply to this commentankit
Reply to this commentAt first mesmerizing and a little creepy. But after about 30 seconds-1 minute it got a little boring.
Reply to this commenti would like this very much.
Reply to this commentFantastic!!! :-) :-)
This is a very compelling argument to start refusing to download any (client side) GUI applications: from canvas/HTML5 onwards there are no graphics the browser cannot produce. Maybe this will convince Mathworks to come up with tools that assist loyal Matlab users like myself to port their algorithms to the web without requiring MCR ...
Reply to this commenteveryone saying this sucks..look into his work and stop complaining i dont see you doing // (c) 2009 Dean McNamee. Not yet released / licensed. Soft3d=(function(){function aG(aK,aJ){if(aKaJ){return aK}return aJ}function ay(aK,aJ,aL){return aG(aJ,t(aK,aL))}var h=Math.PI*2;function ax(aK,aJ){return{x:aK.y*aJ.z-aK.z*aJ.y,y:aK.z*aJ.x-aK.x*aJ.z,z:aK.x*aJ.y-aK.y*aJ.x}}function aE(aK,aJ){return aK.x*aJ.x+aK.y*aJ.y}function ao(aK,aJ){return aK.x*aJ.x+aK.y*aJ.y+aK.z*aJ.z}function u(aK,aJ){return{x:aK.x-aJ.x,y:aK.y-aJ.y}}function b(aK,aJ){return{x:aK.x-aJ.x,y:aK.y-aJ.y,z:aK.z-aJ.z}}function z(aL,aK,aJ){aL.x=aK.x-aJ.x;aL.y=aK.y-aJ.y;return aL}function C(aL,aK,aJ){aL.x=aK.x-aJ.x;aL.y=aK.y-aJ.y;aL.z=aK.z-aJ.z;return aL}function a(aK,aJ){return{x:aK.x+aJ.x,y:aK.y+aJ.y}}function aD(aK,aJ){return{x:aK.x+aJ.x,y:aK.y+aJ.y,z:aK.z+aJ.z}}function aa(aL,aK,aJ){aL.x=aK.x+aJ.x;aL.y=aK.y+aJ.y;return aL}function ab(aL,aK,aJ){aL.x=aK.x+aJ.x;aL.y=aK.y+aJ.y;aL.z=aK.z+aJ.z;return aL}function aq(aJ,aK){return{x:aJ.x*aK,y:aJ.y*aK}}function ae(aJ,aK){return{x:aJ.x*aK,y:aJ.y*aK,z:aJ.z*aK}}function al(aJ){var aL=aJ.x,aK=aJ.y;return Math.sqrt(aL*aL+aK*aK)}function X(aJ){var aM=aJ.x,aL=aJ.y,aK=aJ.z;return Math.sqrt(aM*aM+aL*aL+aK*aK)}function am(aJ){return aq(aJ,1/al(aJ))}function Z(aJ){return ae(aJ,1/X(aJ))}function aA(aT,aR,aQ,aP,aO,aN,aM,aL,aK,aJ,aU,aS){this.e0=aT;this.e1=aR;this.e2=aQ;this.e3=aP;this.e4=aO;this.e5=aN;this.e6=aM;this.e7=aL;this.e8=aK;this.e9=aJ;this.e10=aU;this.e11=aS}function J(aJ,aK){return{x:aJ.e0*aK.x+aJ.e1*aK.y+aJ.e2*aK.z+aJ.e3,y:aJ.e4*aK.x+aJ.e5*aK.y+aJ.e6*aK.z+aJ.e7,z:aJ.e8*aK.x+aJ.e9*aK.y+aJ.e10*aK.z+aJ.e11}}function Q(be,bd){var bi=be.e0,bh=be.e1,bg=be.e2,bf=be.e3,bc=be.e4,bb=be.e5;var ba=be.e6,aY=be.e7,aW=be.e8,aV=be.e9,aS=be.e10,aQ=be.e11;var aU=bd.e0,aT=bd.e1,aR=bd.e2,aP=bd.e3,aO=bd.e4,aN=bd.e5;var aM=bd.e6,aL=bd.e7,aK=bd.e8,aJ=bd.e9,aZ=bd.e10,aX=bd.e11;return new aA(bi*aU+bh*aO+bg*aK,bi*aT+bh*aN+bg*aJ,bi*aR+bh*aM+bg*aZ,bi*aP+bh*aL+bg*aX+bf,bc*aU+bb*aO+ba*aK,bc*aT+bb*aN
Reply to this commentMuy Muy bueno me gusta creo que es muy buena (Very Very Good i like it i think it is very good) I know i couldnt make anything like it. and any of this on the site
Reply to this commentmi piace (i like it)
Reply to this commentthis sucks so badly
Reply to this commentPerhaps , you can design something better ??
Reply to this commentgood
Reply to this commentThat was very interesting to see a image change so many times.
Reply to this commentvery nice.
Reply to this commentThis opens up a whole new perspective on web design if the ones cursing this did not figure it out. finally js is faster then a crippled slug. js means better web experience and less server loads. since netscape invented it and then micro$cr0tum ripped it off there has never been such a massive web revolution. i bet this will spawn a whole new generation of websites as no doubt google guys predicted it.
Reply to this commentHeh, it's something like finally being able to use a garage full of great tools left to you by a crazy uncle, only to discover he was an alien from the future :p
Reply to this commentwhat a pile of sh*t
Reply to this commentI would have to disagree completely. This is very good example of how much computer hardware has changed in recent years. Great work on a great example!
Reply to this commenthow long did this take you?
Reply to this commentPlease excuse my last post, I've been the last few javascript years on a remote island.
Thank you very much for creating this demo.
Reply to this commenthm, if I rightclick it, I can display single png images. Could this be just a script to exchange frames?
Reply to this commentHow about u right clik dumbo
Reply to this commentThen read the source-code
Fabulous
Reply to this commenti agree.
Reply to this commentI'd like to see the source code to this
Reply to this commentR-Click, veiw page source
Reply to this commentStill LIFE the species ;) little bit slow but it works
apple mac os x 10.5.7 firefox 3.0.10
grettings from southwest germany www.artguido.org
Reply to this commentits great, but it didn't do the morph that well in FF 3.5b5 pre. I thought it was my machine, but i did it in chrome 2b and it worked nearly flawless. Im quite surprised how far these engines have come in terms of speed. Its like this code runs as if it was native to the OS (i think that was the idea of JIT thou)
Firefox 3.5 and chrome 2 are going to put IE8 to shame.
Reply to this commentIt's really cool to have this progress, but like native to the OS, hum.. This kind of perf is those native for the Amiga 20 years ago. So we still have a 1000 factor from what can be done native now and what the web can propose.
Reply to this commentyes )
Reply to this commentThere's an HUGE speed difference using this demo on Firefox 3.1 and Chrome. Very cool demo!
Reply to this commentGOOD
Reply to this commentHITS OK
Reply to this commenthuwaw!!!! asteeg! ahaha!
Reply to this commentthat was pretty cool!
Reply to this commentwell looks lik sum1 gt it brains n made a shitty crap outta it.... it iz eatin' a lot of memory a li'll peace of advice
F**** off
Reply to this commenthemant, you're a dumbass. Learn to type.
This looks like what people could do 10 years ago using OpenGL, with the same performance. What's next ? JavaScript HD video decoder ? JavaScript soundcard driver ?
Reply to this commentYou can even say 20 years ago, on amiga, atari falcon,... and without openGL
Reply to this commentBroken in IE8 and IE7 fail
Reply to this commentEverything good on the web is broking in those browsers. I think a better fail is the sad fact that you are using Internet Explorer.
Reply to this commentI agree, IE8 and IE7 fail
Now excuse me while I go and register iefailexperiments.com
Reply to this commenthahaha that made me laugh
ie, that's funny...
Reply to this commentYeah, it just eats 90% if my Centrino 1.8ghz CPU :D
Reply to this commentgod dam ie 5
Reply to this commentHey, this is a video only, not real JavaScript demo :(
Reply to this commentIt is ironic that your name sounds like "noob". That is what you are.
Right click, view the source. If you knew anything about canvas, you would know that this is a legitimate demo.
Reply to this commentUm... actually it's not a video.
Reply to this commentExtremely slow in K-Meleon 1.5.3...
Reply to this commentHAhahaha
What on earth did you expect??
Reply to this commenti noticed that in chrome i get 10% less CPU usage
btw i did not know javascript can do anything like that it's awesome
Reply to this commentits really but would be cooler if you could move it with your mouse
Reply to this commentIS this a addon to google chrome .. how can one make use of this .. ..i didnt get what experiment means to us .. is that they have developed it through google chrome .. is that the thing
Reply to this commentNo, this example (and most of the examples) use the HTML5 "canvas" element, and it's associated drawing APIs. It is available in all browsers except Internet Explorer, but Chrome is the fastest to render.
Reply to this commentcool
Reply to this commenti wanna try base on there comment
Reply to this commentFlash is more efficient and works across a broad range of platforms. I hate installing a million different plug-ins!
Reply to this commentflash is horribly slow on macs & takes up all the cpu
> I hate installing a million different plug-ins!
Flash is a plugin. This demo is JavaScript - not a plugin.
Thanks, I was about to rant. These demos are proof of concept. Using the new canvas and audio elements we will be able to completely replace the proprietary plug-in-based Adobe Flash "platform". Hoorah!
Maybe, it will open the door to get paid more as a Javascript developer, who knows....
Nothing wrong with Flash, if you know how to use it. Besides it has made me a ton of dough :)
ovo je neverovatno!!!
Reply to this commentI really hope people start using Javascript instead of flash now
Reply to this commentThat will never happen... flash is way more productive and you know what it runs in FF IE and CH :)
JS u have to make different ver for every other browser but fash is just one platform.
So would i make this example in JS never! would i use JS for other UI , obviously
Reply to this commentYou are actually incorrect. JavaScript runs nearly identically on all browsers. The DOM, however, differs wildly. In the case of these demos, the programming required to make what you see on the screen is of similar complexity to an equivalent ActionScript/Flash creation. JavaScript and canvas are changing the way we look at the web, Flash is simply an annoyance.
Also, this demo is supported in all browsers but IE. Firefox included.
loko
Reply to this commentSafari 4 Public Beta ran it well. But i cant wait for chrome to come out for mac
Reply to this commentthis is so cool. id love this for a screen saver
Reply to this commentme too i really enjoy it as well
Reply to this commentfantastic
Reply to this commentIt always runs slow on firefox, but not in chrome. This should be a screensaver!
Reply to this commentThis demo runs fast for me on Firefox 3.5, which is in beta 4 now and probably coming out soon. The TraceMonkey JavaScript engine in FF 3.5 is much faster.
Reply to this commentSafari 4 did it well
Reply to this commentNot at all, I tested on Safari 4 beta and it's not smooth at all, under Chrome it's always fast and smooth.
this was fun
Reply to this commentWhat would you recommend as a 3D JS lib for such animations ?
Reply to this commentThere is a link below the demo. The frameworks that have been released so far are limited and generally do not support 3D animation. I will be releasing one in the near future.
Reply to this commentits a very nice amimation
Reply to this commentRuns (albeit slowly) on my 1.67GHz G4 Powerbook using Safari Version 4 Public Beta (4528.16).
Reply to this commentVery nice-looking, but it still pegs the CPU as bad as flash. Maybe that's just the cost of using software- instead of GPU-based rendering though?
Reply to this commentcool buddy
Reply to this commentI don't get it
Reply to this commentAwesome!!! One day I can do this!
Reply to this commentwould like to learn
Reply to this commentHow do you actually draw something to the browser window? I can understand all the rest.
Reply to this commentThey're using the HTML5 canvas tag.
Reply to this commentGreat Demo, though for some reason this ran pretty slow for me using Firefox in Ubuntu 9.04....
Reply to this commentSame, though it was perfectly fast on my Mac. Firefox on Ubuntu is notoriously slow.
Reply to this commentwow, very impressive.. :D I thought 3D rendering only works at flash, but this is real javascript... such a good job, we're waiting for more example :)
Reply to this commentOMG... That looks cool. But really, what's the point of it. And .... they say I needed a HTML5 thingy majiber... that sucks :( I really wanted to see what it does.
Reply to this commentWhat browser do you use? I am betting you are using IE to do this.
Chrome, Safari, Opera and Firefox all support the HTML5 Canvas Tag.
Reply to this commentAwesome with Safari 4
Reply to this commentWhat is the application in photography or otherfields?
Reply to this commenttry and get inside my head . many have tried and have faild .
Reply to this commenttiddly-rific! one step away from perfect.
Reply to this commentjavascript is as javascript does.
Reply to this commentFood for thought, but, let's get a generic/cut down version that works with sufficient performance on all browsers.
Reply to this commentThat's junk food. This is exploration of new abilities. Today's Chrome will be tomorrow's IE, when something Crome-ier comes along. Let's get used to using newly supported tags/ APIs, and allow Mozilla et al to join the Jurassic menagerie as nature intended!
Reply to this commentquiero verlo en español latinoamericano
Reply to this commentits not about what language, it's about what it does. Tambien quiero ver todo de esto en espanol latinoamericano - y con su ayuda podemos hacerlo!
Reply to this commentIt makes for quite an impressive comparison between Google Chrome and Mozilla Firefox, as this same experiment ran in Firefox, but much slower. I was monitoring my processor at the time and it loaded both my cores pretty heavy 70+%. Is it possible to make things like this hit my GPU more than the CPU? That is what my dedicated video card is for.
Reply to this commentI think that's what snow leopard (the next mac os) is supposed to do, but with all applications.
Reply to this commentTrue! Also, this demo uses the getContext2d method, and then builds a 3D library on top. Once we have support for the getContext3d method (and subsequent 3D API), the majority of the work will be done by the graphics card.
imagine if it used multiple cores. pretty cool.
Reply to this commentThanks for an amazing demo on what Javascript can do for 3D.
Questions for thinking. 1. To render a real interesting scene on browser, will the Javascript bloats to the size of an 3D browser plug-in like unity. http://unity3d.com/gallery/live-demos/tropical-paradise 2. If yes, will it be downloaded faster than a 3d plug-in. 3. If the download is slow than a 3d plug-in installation, what is the advantage of developing 3D JS library except it is opensource and conforming to standards.
p.s. I don't have any connection or interest with Unity. Just an interested user on 3d game engine.
Benny
Reply to this commentThe interested part of JavaScript is that programmers tend to be very pickier about what makes it into the final product. You will find that the 3D libraries that come out will be faster than the current Flash implementations. Also, with JavaScript, the library can be hosted on a 3rd party site, so you only have to download it once and then every site can use the cached version.
Reply to this commentWow - the best example to date of how superior Chrome's JS interpreter is to other browsers (including some also using webkit). Opera 9.5 on Vista 32 was the closest to Chrome's performance. This is amazing, I had to right click to make sure it wasn't Flash or Silverlight. Excellent job, and thanks for raising the bar so much higher!
Reply to this commentFor me Opera 9.x and 10.x alpha was terribly slow. Firefox 3.5 and Safari were much better and very close to each other. Chrome on the other hand is the only one that runs the animation very smoothly all the time. (PS it didn't work in any version of IE).
Reply to this commentWould make a good screensaver.
Reply to this commentWow. awesome! Is there any reusable code/ tutorial on this?
Reply to this commentHi dean, thanks for the demo. It's really cool! Have you got any library or other piece of reusable code? How about the modelling? Greetings from the IT University of Copenhagen.
Reply to this commentI like these negative comments (not). They're hilarious.
The issue of framerate: * get a PC that's not more than a year old, I get at least 30 fps
The issue of quality: * personally I'm amazed at the lack of aliasing as well as the transparency (shaders in js? lol, not) affects
This is amazing! This points to an interesting future of in-browser 3d applications.
Reply to this comment+1
Reply to this comment+1
The motion blur effect is just amazing!
why is it that the only ones that give firefox any difficulty are in html5?
Reply to this commentokay, my computer is slow.
Reply to this commentSimply awesome! :) Reminds me of some of the late 90s demoscene, time when i were still hanging around there :)
I really got to figure out how to do this stuff, it's awesome!
Aleksi / NuCode.fi
Reply to this commentIs this based on a 3D library that we can use?
Reply to this commentWow, it's truly amazing that google can now render a 3d cube at almost 5 frames per second. We sure have come a long way since the 80s!
Reply to this commentI think you should upgrade your 386sx @25MHz...
Reply to this commentGot it, the video player was obstructing "i'm ready to risk" button.
Reply to this commenthow to run on firefox in Ubuntu???
it says this is not available for your browser. How to work around that? please
Reply to this commentI managed to get this to work on Chrome Lite on my T-Mobile G1! It has a slow redraw rate, especially at the end but it's really cool!!!
Reply to this commentadipoli monee....superb
Reply to this commentworking fine in my macbook with safari4 beta
Reply to this commentWorks in Opera too :-)
Reply to this commentOnly works fine with Chrome!!!
Reply to this commentPurdy
Reply to this commentKills my MBP on FF3. Safari4 plays nicely though... http://unofficialmac.com http://durumbu.com
Reply to this commentReally impressive... so fast with Chrome! Great job with this demo.
Reply to this commentawesome man.. Excellent
Reply to this commentcoooooollllll!!!!!!
Reply to this commentUnbelievable what can be achieved with excellent knowledge of 3D math and JavaScript. 10/10
Reply to this commentcool!!!!!!!!!~!~!
Reply to this commentreally amazing!!!
Reply to this commentcool !!!
Reply to this commentand it's javascript... wow!
Reply to this commentRuns sweet in safari 4 on a iMac. Looks awsome. I wish there where more of these kind of things.
Reply to this commentAmazing on FF 3.0.7 too. I'm going be pulling apart the code for this to see how it's done (another great thing about javascript).
Reply to this commentI wish I could set this as my background (or screensaver)!
Reply to this commentnice
Reply to this commentYeah, this would be a wicked screen saver!!
Reply to this commentRealmente asombroso (really awesome)
Reply to this commentawesome. demoscene style :)
Reply to this comment