X3D-in-3D-canvas experiment

Current renderer: ???. (Supported: opera-3d, moz-glweb20)

<X3D version="3.0" profile="Immersive" xmlns="http://www.web3d.org/specifications/x3d-namespace" xmlns:x3dext="http://philip.html5.org/x3d/ext" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" width="640" height="480" style="border: solid; position: relative; left: 320px"> <Scene> <Transform DEF="monkeyhead"> <x3dext:Inline DEF="inline1" url="monkeybox.x3d#OB_Suzanne"> <xsl:template match="x3d:Transform/@translation"> <xsl:attribute name="translation">-4 2.5 0.2</xsl:attribute> </xsl:template> </x3dext:Inline> </Transform> <x3dext:Inline DEF="inline2" url="monkeybox.x3d#OB_Cube"/> <TimeSensor DEF="Clock" cycleInterval="4" loop="true"/> <OrientationInterpolator DEF="Nodder" key="0 0.5 1" keyValue="1 0 0 0, 1 0 0 -0.2, 1 0 0 0"/> <ROUTE fromNode="Clock" fromField="fraction_changed" toNode="Nodder" toField="set_fraction"/> <ROUTE fromNode="Nodder" fromField="value_changed" toNode="monkeyhead" toField="rotation"/> <OrientationInterpolator DEF="Spinner" key="0 0.5 1" keyValue="0 1 0 0, 0 1 0 3.1416, 0 1 0 6.2832"/> <ROUTE fromNode="Clock" fromField="fraction_changed" toNode="Spinner" toField="set_fraction"/> <ROUTE fromNode="Spinner" fromField="value_changed" toNode="inline2 OB_Cube" toField="rotation"/> <Viewpoint centerOfRotation="0 0 0" position="7.481 5.344 6.508" orientation="-0.472 0.861 0.191 0.932" fieldOfView="0.661"/> </Scene> </X3D> </p> <p><span id="fps">???</span> fps</p> <pre id="debug-frame" style="white-space: -moz-pre-wrap; white-space: pre-wrap"/> <pre id="debug" style="white-space: -moz-pre-wrap; white-space: pre-wrap"/> <script id="shader-fs" type="text/x-glsl-fs"><![CDATA[ varying vec3 fragNormal; varying vec3 fragLightVector; varying vec3 fragEyeVector; void main(void) { vec3 normal = normalize(fragNormal); vec3 light = normalize(fragLightVector); vec3 eye = normalize(fragEyeVector); float diffuse = max(0.0, dot(normal, light)); float specular = pow(max(0.0, dot(reflect(-light, normal), eye)), 16.0) * min(1.0, 4.0*diffuse); gl_FragColor = vec4(diffuse*vec3(1,0,0) + specular*vec3(1,1,0), 1.0); //gl_FragColor = vec4(normal, 1.0); // TODO: this is kind of pretty, so it should be selectable by users } ]]></script> <script id="shader-vs" type="text/x-glsl-vs"><![CDATA[ attribute vec3 position; attribute vec3 normal; varying vec3 fragNormal; varying vec3 fragLightVector; varying vec3 fragEyeVector; uniform mat4 modelViewProjectionMatrix; uniform mat4 modelViewMatrix; uniform mat4 modelMatrix; uniform vec3 lightPosition; uniform vec3 eyePosition; void main(void) { gl_Position = modelViewProjectionMatrix * vec4(position, 1.0); fragNormal = normalize(vec3(modelMatrix * vec4(normal, 0.0))); fragLightVector = lightPosition - vec3(modelMatrix * vec4(position, 1.0)); fragEyeVector = eyePosition - vec3(modelMatrix * vec4(position, 1.0)); } ]]></script> <script><![CDATA[ function getShader(gl, id) { var shaderScript = document.getElementById(id); if (!shaderScript) return null; var shader; if (shaderScript.type == "text/x-glsl-fs") { shader = gl.createShader(gl.FRAGMENT_SHADER); } else if (shaderScript.type == "text/x-glsl-vs") { shader = gl.createShader(gl.VERTEX_SHADER); } else { return null; } gl.shaderSource(shader, shaderScript.textContent); gl.compileShader(shader); log(gl.getShaderInfoLog(shader)); return shader; } function log(msg) { document.getElementById('debug').appendChild(document.createTextNode(msg+"\n\n")); } function log_frame(msg) { document.getElementById('debug-frame').appendChild(document.createTextNode(msg+"\n\n")); } function log_frame_clear() { document.getElementById('debug-frame').innerHTML = ''; } function dump(obj) { var s = ''; for (var i in obj) s += i + ' '; log(s); } function assert(c, msg) { if (! c) { log("Assertion failed in " + assert.caller.name + ': ' + msg); } } if (! Array.forEach) { Array.forEach = function (array, fun, thisp) { var len = array.length; for (var i = 0; i < len; i++) if (i in array) fun.call(thisp, array[i], i, array); } } if (! Array.map) { Array.map = function(array, fun, thisp) { var len = array.length; var res = []; for (var i = 0; i < len; i++) if (i in array) res[i] = fun.call(thisp, array[i], i, array); return res; }; } if (! Array.filter) { Array.filter = function(array, fun, thisp) { var len = array.length; var res = []; for (var i = 0; i < len; i++) { if (i in array) { var val = array[i]; if (fun.call(thisp, val, i, array)) res.push(val); } } return res; }; } ]]></script> <script src="maths.js"/> <script src="x3d.js"/>  <script src="gfx_glweb20.js"/> <script src="gfx_opera3d.js"/> <script><![CDATA[ window.onload = function () { var x3d = document.getElementsByTagNameNS('http://www.web3d.org/specifications/x3d-namespace', 'X3D')[0]; var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas'); canvas.width = x3d.getAttribute('width'); canvas.height = x3d.getAttribute('height'); canvas.setAttribute('style', x3d.getAttribute('style')); x3d.parentNode.replaceChild(canvas, x3d); var ctx = gfx_glweb20(canvas) || gfx_opera3d(canvas); if (! ctx) { document.getElementById('renderer').textContent = 'no suitable canvas context found'; return; } document.getElementById('renderer').textContent = ctx.getName(); var fps_target = 20; var fps_t0 = new Date(), fps_n = 0; var t = 0; function tick() { log_frame_clear(); if (++fps_n == 10) { document.getElementById('fps').textContent = fps_n*1000 / (new Date() - fps_t0); fps_t0 = new Date(); fps_n = 0; } try { doc.advanceTime(t); doc.render(ctx); } catch (e) { log(e); throw e; } t += 1/fps_target; }; var doc = new X3DDocument(canvas, ctx); doc.onload = function () { doc.prepare(ctx); setInterval(tick, 1000/fps_target); }; doc.onerror = function () { alert('Failed to load X3D document') }; doc.load(x3d); var mouse_dragging = false; var mouse_drag_x, mouse_drag_y; canvas.addEventListener('mousedown', function (evt) { if (evt.button == 0) { mouse_drag_x = evt.screenX; // screenX seems the least problematic way of getting coordinates mouse_drag_y = evt.screenY; mouse_dragging = true; } }, false); canvas.addEventListener('mouseup', function (evt) { if (evt.button == 0) mouse_dragging = false; }, false); canvas.addEventListener('mouseout', function (evt) { mouse_dragging = false; }, false); canvas.addEventListener('mousemove', function (evt) { if (! mouse_dragging) return; var dx = evt.screenX - mouse_drag_x; var dy = evt.screenY - mouse_drag_y; mouse_drag_x = evt.screenX; mouse_drag_y = evt.screenY; doc.ondrag(dx, dy); }, false); } ]]></script> </body> </html>