Metatunnel: The (Future) Web Strikes Back
Written by on April 14th, 2009 in Uncategorized.
Last week, we posted a story on the Metatunnel demo, a concisely-written Linux and Win32 demo that Paulo Falcão ported to JS. We looked at the pitiful performance of the JS version as evidence that, high-speed JS engines notwithstanding, the web’s got a ways to go on the fx front.
We didn’t dig deep enough.
Someone posted a follow-up to our story saying that the JS code was poorly optimized and that the JS version could be made to run faster. That got me wondering how efficient the desktop version was, and how apples-to-apples the versions were in terms of total calculations performed per frame. My thinking was that if the JS version could be made faster but via optimization contortions that the desktop version didn’t require, that’s missing the point.
It turns out the desktop source is trivial: it’s an assembler bootstrap for passing OpenGL shader instructions to the system’s OpenGL driver:
-
// we don’t have a "shader" syntax highlighting;
-
// using "Java" instead
-
vec2 v=(gl_FragCoord.xy-vec2(400,300))/vec2(400,300);
-
float w=dot(gl_Color.xyz,vec3(1,256,65536))*.25;
-
const float s=0.4;
-
-
float obj(vec3 pos){
-
float final=1.0;
-
final*=distance(pos,vec3(cos(w)+sin(w*0.2),0.3,2.0+cos(w*0.5)*0.5));
-
final*=distance(pos,vec3(-cos(w*0.7),0.3,2.0+sin(w*0.5)));
-
final*=distance(pos,vec3(-sin(w*0.2)*0.5,sin(w),2.0));
-
final *=cos(pos.y)*cos(pos.x)-0.1-cos(pos.z*7.+w*7.)*cos(pos.x*3)*cos(pos.y*4.)*0.1;
-
return final;
-
}
-
-
void main(){vec3 o=vec3(v.x,v.y*1.25,0.0);
-
vec3 d=vec3(v.x+cos(w)*.3,v.y,1.0)/64.0;
-
vec4 color=vec4(0.0);
-
float t=0.0;
-
for(int i=0;i<75;i++) {
-
if(obj(o+d*t)<s){
-
t-=5.0;
-
for(int j=0;j<5;j++){
-
if(obj(o+d*t)<s){
-
break;
-
}
-
t+=1.0;
-
}
-
vec3 e=vec3(0.01,.0,.0);
-
vec3 n=vec3(0.0);
-
n.x=obj(o+d*t)-obj(vec3(o+d*t+e.xyy));
-
n.y=obj(o+d*t)-obj(vec3(o+d*t+e.yxy));
-
n.z=obj(o+d*t)-obj(vec3(o+d*t+e.yyx));
-
n=normalize(n);
-
color+=max(dot(vec3(0.0,0.0,-0.5),n),0.0)+max(dot(vec3(0.0,-0.5,0.5),n),0.0)*0.5;break;
-
}
-
t+=5.0;
-
}
-
gl_FragColor=color+vec4(0.1,0.2,0.5,1.0)*(t*0.025);
-
}
Shoot, passing instructions to the video card? That’s not a fair fight. It turns out Firefox 3.5 has a prototype Canvas 3D plug-in, and it exposes an OpenGL API. It was quick work for one of Mozilla’s graphics gurus and the plug-in’s primary developer, Vlad Vukicevic, to port the Metatunnel demo to Canvas 3D. The result is quite impressive:
See for yourself, but you’ll need Firefox 3.5 Beta 3 or later and the Canvas 3D plug-in.
We should also mention that Paulo, Jacob Seidelin, and Hans Schmucker collaborated on optimizations in the JS software-rendering version that resulted in much higher FPS on “next-gen JS” browsers (Safari 4, Chrome, and Firefox 3.5). Note, on this demo you can use the Q and W keys to adjust quality.
Source: Ajaxian » Front Page
Original Article: http://feedproxy.google.com/~r/ajaxian/~3/4oI5CfVPYjA/metatunnel-the-future-web-strikes-back