Use <a href="?">Canvastastic</a> / <a href="?gl">gles11</a> (<a href="example0.jpg">img</a>)

<br><br>

<script type="text/javascript" src="canvastastic.js"></script>

<script type="text/javascript; version=1.7">
function $(id)
{
	return document.getElementById(id);
}

function print(str)
{
	$('out').innerHTML += str + "<br>";	
}

function parse_list(string)
{
	// // Split on collapsed whitespace (which is the proper thing to do,
	// // based on my interpretation/guess of the schema and the schema spec)
	// var list = string.split(/ +/);

	// ... but that's slow, so cheat and do:
	var list = string.split(' ');

	// Trim trailing and leading whitespace
	while (list.length && list[list.length-1] === '')
		list.pop();
	while (list.length && list[0] === '')
		list.shift();

	return list;
}

function find_source(sources, source_name)
{
	var source = sources[source_name];

	if (! source)
		throw new Error("cannot find source " + source_name);
		
	return source;
}

function read_from_source(output, source, n)
{
	var o = n*source.stride + source.offset;
	for (var i = 0; i < source.stride; ++i)
		output.push(source.data[o + i]);
}

function next_pow2(n)
{
	return Math.pow(2, Math.ceil(Math.log(n) / Math.LN2));
}

////

const texturing_enabled = true;

var gl = null;
var gl_loaded_images = {};
function gl_load_image(filename)
{
	if (! texturing_enabled)
		return { loaded:false };
		
	if (gl_loaded_images[filename])
		return gl_loaded_images[filename];
	
	var [id] = gl.genTextures(1);

	gl_loaded_images[filename] = { id: id, loaded: false };

	var img = new Image();
	img.onload = function ()
	{
		// this clobbers the bound-texture state, but it won't be called
		// in the middle of a frame so we should be alright
		gl.bindTexture(gl.TEXTURE_2D, id);
		gl.texParameter(gl.TEXTURE_2D, gl.GENERATE_MIPMAP, true);
		if ((img.width & (img.width-1)) || (img.height & (img.height-1)))
		{
			// not power-of-two, so resize it using a (2d) canvas
			var w = next_pow2(img.width);
			var h = next_pow2(img.height);
			var canvas = document.createElement('canvas');
			canvas.width = w;
			canvas.height = h;
			var ctx = canvas.getContext('2d');
			ctx.rotate(Math.PI);
			ctx.translate(0, -h);
			ctx.scale(-1, 1);
			ctx.drawImage(img, 0, 0, w, h);
			gl.texImage2DHTML(gl.TEXTURE_2D, canvas);
		}
		else
		{
			gl.texImage2DHTML(gl.TEXTURE_2D, img);
		}
		gl_loaded_images[filename].loaded = true;
	};
	img.onerror = function ()
	{
		print('Error loading image "'+filename+'"');
	}
	img.src = "_/" + filename;
	
	return gl_loaded_images[filename];
}

function gl_bind_texture(texture)
{
	if (texture.loaded)
		gl.bindTexture(gl.TEXTURE_2D, texture.id);
	else
		gl.bindTexture(gl.TEXTURE_2D, 0);
}

function gl_prepare_model(model)
{
	for each (var tri_mesh in model.tri_meshes)
	{
		tri_mesh.vertex_count = tri_mesh.VERTEX.length / 3;
		tri_mesh.vertex_buffer   = gl.createBuffer(gl.STATIC_DRAW, 3, gl.FLOAT, tri_mesh.VERTEX);
		tri_mesh.normal_buffer   = gl.createBuffer(gl.STATIC_DRAW, 3, gl.FLOAT, tri_mesh.NORMAL);
		tri_mesh.texcoord_buffer = gl.createBuffer(gl.STATIC_DRAW, 2, gl.FLOAT, tri_mesh.TEXCOORD);
		
		tri_mesh.texture = renderer.load_image(tri_mesh.texture_name);
	}
}

function gl_setup()
{
    var canvas = $('canvas');
    gl = canvas.getContext('gles11');

    gl.matrixMode(gl.PROJECTION);
    gl.loadIdentity();
	gl.gluPerspective(45, 1, 100, 15000);

    gl.matrixMode(gl.MODELVIEW);

    gl.clearColor(0.9, 0.8, 0.6, 1);

	gl.enable(gl.FOG);
	gl.fogParameter(gl.FOG_MODE, gl.LINEAR);
	gl.fogParameter(gl.FOG_START, 12000);
	gl.fogParameter(gl.FOG_END, 15000);
	gl.fogParameter(gl.FOG_COLOR, [0.9, 0.8, 0.6, 1]);

	gl.enable(gl.DEPTH_TEST);
	gl.cullFace(gl.BACK);
	gl.enable(gl.CULL_FACE);
	gl.enable(gl.TEXTURE_2D);
	
	gl.enable(gl.LIGHTING);
	gl.light(gl.LIGHT0, gl.AMBIENT, [0.5, 0.5, 0.5, 1]);
	gl.light(gl.LIGHT0, gl.DIFFUSE, [1, 1, 1, 1]);
	gl.light(gl.LIGHT0, gl.POSITION, [5000, 0, 5000, 0]);
	gl.light(gl.LIGHT0, gl.SPECULAR, [1, 1, 1, 1]);
	gl.material(gl.FRONT_AND_BACK, gl.SPECULAR, [4,4,4,1]);
	gl.material(gl.FRONT_AND_BACK, gl.SHININESS, 32);
	gl.enable(gl.LIGHT0);

    gl.enableClientState(gl.VERTEX_ARRAY);
    gl.enableClientState(gl.NORMAL_ARRAY);
    gl.enableClientState(gl.TEXTURE_COORD_ARRAY);
}

function gl_set_camera(dist, x, z)
{
	gl.loadIdentity();
	gl.gluLookAt(
		0, dist, 0,
		0, 0, 0,
		0, 0, -1);
	
	gl.rotate(x, -1, 0, 0);
	gl.rotate(z, 0, 0, -1);
}

function gl_start_frame()
{
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}

function gl_end_frame()
{
    gl.swapBuffers();
}

function gl_draw_model(model)
{
	for each (var tri_mesh in model.tri_meshes)
	{
		gl_bind_texture(tri_mesh.texture);
		gl.vertexPointer(tri_mesh.vertex_buffer);
		gl.normalPointer(tri_mesh.normal_buffer);
		gl.texCoordPointer(tri_mesh.texcoord_buffer);
		gl.drawArrays(gl.TRIANGLES, 0, tri_mesh.vertex_count);
	}
}


////

var ct_scene, ct_rotx, ct_rotz;
function ct_setup()
{
	ct_scene = new CT.Scene('canvas', { viewAngle: Math.tan(45/2), backgroundColour: 'rgba(230,204,154,1)' });
	ct_rotx = new CT.RotateX(0);
	ct_rotz = new CT.RotateZ(0);
	ct_scene.append(ct_rotx);
	ct_rotx.append(ct_rotz);
	
	ct_scene.append(new CT.Light(100, 100, 1000));
}

function ct_set_camera(dist, x, z)
{
	ct_scene.setCamera([0,-dist,0], [0,0,0], [0,0,1]);
	ct_rotx.setRotation(x*Math.PI/180);
	ct_rotz.setRotation(-z*Math.PI/180);
}

function ct_prepare_model(model)
{
	for each (var tri_mesh in model.tri_meshes)
	{
		tri_mesh.vertex_array = [];
		tri_mesh.normal_array = [];
		tri_mesh.poly_array   = [];
		for (var i = 0; i < tri_mesh.VERTEX.length; i += 3)
		{
			tri_mesh.vertex_array.push([tri_mesh.VERTEX[i], tri_mesh.VERTEX[i+1], tri_mesh.VERTEX[i+2]]);
			tri_mesh.normal_array.push([tri_mesh.NORMAL[i], tri_mesh.NORMAL[i+1], tri_mesh.NORMAL[i+2]]);
		}
		for (var i = 0; i < tri_mesh.VERTEX.length/3; i += 3)
		{
			tri_mesh.poly_array.push([i, i+1, i+2, i, i+1, i+2]);
		}
	}
}

function ct_start_frame()
{
}

function ct_end_frame()
{
    ct_scene.render();
}

function ct_draw_model(model)
{
	for each (var tri_mesh in model.tri_meshes)
	{
		if (! tri_mesh.already_added)
		{
			tri_mesh.already_added = true;
			ct_rotz.append(new CT.Model(tri_mesh.vertex_array, tri_mesh.normal_array, tri_mesh.poly_array, {}));
		}
	}
}

////

var renderers = {
	gles11: {
		load_image: gl_load_image,
		prepare_model: gl_prepare_model,
		setup: gl_setup,
		set_camera: gl_set_camera,
		start_frame: gl_start_frame,
		end_frame: gl_end_frame,
		draw_model: gl_draw_model
	},
	canvastastic: {
		load_image: function(){},
		prepare_model: ct_prepare_model,
		setup: ct_setup,
		set_camera: ct_set_camera,
		start_frame: ct_start_frame,
		end_frame: ct_end_frame,
		draw_model: ct_draw_model
	}
};

var renderer = (document.location.search == '?gl' ? renderers.gles11 : renderers.canvastastic);

</script>

<script type="text/javascript; e4x=1" src="SFCityHall.js"></script>

<script type="text/javascript; e4x=1; version=1.7">

function load(collada)
{
	var model = {
		tri_meshes: [],
	};
	
	var ns = collada.namespace();
	var geom_num = 0;
	for each (var geometry in collada.ns::library_geometries.ns::geometry)
	{
		++geom_num;
		for each (var mesh in geometry.ns::mesh)
		{
			var sources = {};
			for each (var source in mesh.ns::source)
			{
				var accessor = source.ns::technique_common.ns::accessor;
				sources['#' + source.@id] = {
					offset: (accessor.@offset.length() ? accessor.@offset : 0),
					stride: (accessor.@stride.length() ? accessor.@stride : 1),
					data: parse_list(source.ns::float_array), // TODO: check accessor.@source attribute
				};
			}

			for each (var vertices in mesh.ns::vertices)
			{
				// Just copy the (required) POSITION source array
				// TODO: what other than POSITION is likely to be here?
				sources['#' + vertices.@id] = find_source(sources, vertices.ns::input.(@semantic=='POSITION').@source);
			}

			var tri_meshes = [];
			for each (var triangles in mesh.ns::triangles)
			{
				$('status').innerHTML = 'Loading: geom ' +
					geom_num + '/' + collada.ns::library_geometries.ns::geometry.length() + ', tri ' +
					tri_meshes.length + '/' + mesh.ns::triangles.length();
				yield;


				// Can't use drawElements with a single buffer per source
				// because the vertex, normal and texcoords need different indices,
				// so create a new vertex array for each tri_mesh

				var tri_mesh = {}; // typically = { VERTEX: [...], NORMAL: [...], TEXCOORD: [...], texture: 'x.jpg' }


				// TODO: proper materials
				var material = collada.ns::library_materials.ns::material.(@id==triangles.@material);
				var effect_id = material.ns::instance_effect.@url.substring(1);
				var effect = collada.ns::library_effects.ns::effect.(@id==effect_id);
				var texture = effect.ns::profile_COMMON.ns::technique.ns::phong.ns::diffuse.ns::texture;
				var image = collada.ns::library_images.ns::image.(@id==texture.@texture).ns::init_from;
				tri_mesh.texture_name = image;
		
				var input_offsets = [];
				
				for each (var input in triangles.ns::input)
				{
					if (! input_offsets[input.@offset])
						input_offsets[input.@offset] = [];

					input_offsets[input.@offset].push({ semantic: input.@semantic, source: find_source(sources, input.@source) });

					if (! tri_mesh[input.@semantic])
						tri_mesh[input.@semantic] = [];
				}
				
				var p = parse_list(triangles.ns::p);
				for (var i = 0; i < p.length; ++i)
				{
					for each (var input in input_offsets[i % input_offsets.length])
					{
						read_from_source(tri_mesh[input.semantic], input.source, p[i]);
					}
				}
				tri_meshes.push(tri_mesh);
			}

			model.tri_meshes = model.tri_meshes.concat(tri_meshes);
		}
	}

	$('status').innerHTML = 'Finished loading';
	
	yield model;
}


function async_load(file, cont)
{
	var gen = load(file);
	var interval = setInterval(function() {
		var t0 = new Date();
		do
		{
			var ret = gen.next();
			if (ret)
			{
				clearInterval(interval);
				cont(ret);
				return;
			}
		}
		while (new Date() - t0 < 100);
	}, 0);
}

function example(model)
{
	renderer.setup();

	renderer.prepare_model(model);

	var dist = 10000;
	function draw_rotated(x, y)
	{
		renderer.start_frame();
		
		renderer.set_camera(dist, y*180, x*180);

		renderer.draw_model(model);

		renderer.end_frame();
	};
	
	var last_x, last_y, dragging = false;
	$('canvas').addEventListener('mousedown', function (evt) {
		last_x = 2 * ((evt.clientX + document.body.scrollLeft) / evt.target.width) - 1;
		last_y = 2 * ((evt.clientY + document.body.scrollTop)  / evt.target.height) - 1;
		dragging = true;
	}, false);
	$('canvas').addEventListener('mouseup', function (evt) {
		dragging = false;
	}, false);
	$('canvas').addEventListener('mousemove', function (evt) {
		var x = 2 * ((evt.clientX + document.body.scrollLeft) / evt.target.width) - 1;
		var y = 2 * ((evt.clientY + document.body.scrollTop)  / evt.target.height) - 1;
		if (dragging)
		{
			dist += 10000*(y-last_y);
			last_x = x;
			last_y = y;
		}
		draw_rotated(x, y);
	}, false);

	/*
	draw_rotated(0, 0);
	/*/
	var frames = 0, frame_time = new Date();
	var t = 0;
	setInterval(function() {
		if (++frames == 30)
		{
			var fps = 1000 * frames / (new Date() - frame_time);
			frames = 0;
			frame_time = new Date();
			$('fps').innerHTML = fps;
		}

		draw_rotated(t++/100, 0.2);
	}, 10);
	//*/
}

window.addEventListener('load', function(){async_load(model, example);}, false);
</script>

<canvas id="canvas" width="400" height="400" style="border: 2px solid black;"></canvas>
<div id="status"></div>
<div>FPS: <span id="fps"></span></div>
<div id="out"></div>