MediaWiki:Gadget-WebGL2.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

$(function() {
	'use strict';

	/**
	 * Fetch a scene script from the WebGL: namespace
	 */
	function fetchScene(sceneName) {
		return $.ajax({
			url: mw.util.wikiScript('api'),
			data: {
				action: 'query',
				titles: 'WebGL:' + sceneName,
				prop: 'revisions',
				rvprop: 'content',
				rvslots: 'main',
				format: 'json'
			}
		}).then(function(response) {
			var pages = response.query.pages;
			var pageId = Object.keys(pages)[0];
			if (pageId === '-1') {
				throw new Error('Scene not found: WebGL:' + sceneName);
			}
			return pages[pageId].revisions[0].slots.main['*'];
		});
	}

	/**
	 * Create a scene context object with lifecycle methods
	 */
	function createSceneContext(canvas, gl) {
		return {
			canvas: canvas,
			gl: gl,
			init: null,
			render: null,
			resize: null,
			cleanup: null,
			_running: false,
			_animationId: null
		};
	}

	/**
	 * Execute a scene script in instance mode
	 */
	function executeScene(scriptText, context) {
		try {
			var factory = new Function('scene', scriptText);
			factory(context);
		} catch (e) {
			console.error('WebGL scene execution error:', e);
			throw e;
		}
	}

	/**
	 * Start the render loop for a scene
	 */
	function startRenderLoop(context) {
		if (!context.render) return;

		context._running = true;
		var startTime = performance.now();

		function loop(timestamp) {
			if (!context._running) return;
			var elapsed = (timestamp - startTime) / 1000;
			context.render(elapsed);
			context._animationId = requestAnimationFrame(loop);
		}

		context._animationId = requestAnimationFrame(loop);
	}

	/**
	 * Initialize a WebGL mount point
	 */
	function initMount(mount) {
		var $mount = $(mount);
		var sceneName = $mount.data('scene');

		if (!sceneName) {
			console.warn('WebGL mount missing data-scene attribute');
			return;
		}

		var canvas = document.createElement('canvas');
		canvas.width = $mount.data('width') || 800;
		canvas.height = $mount.data('height') || 600;
		canvas.className = 'webgl-canvas';
		$mount.append(canvas);

		var gl = canvas.getContext('webgl2');
		if (!gl) {
			$mount.append('<p class="webgl-error">WebGL2 not supported</p>');
			return;
		}

		var context = createSceneContext(canvas, gl);

		fetchScene(sceneName)
			.then(function(scriptText) {
				executeScene(scriptText, context);

				if (context.init) {
					context.init(canvas, gl);
				}

				startRenderLoop(context);

				// Handle resize
				if (context.resize) {
					$(window).on('resize.webgl-' + sceneName, function() {
						context.resize(canvas.width, canvas.height);
					});
				}
			})
			.catch(function(err) {
				console.error('Failed to load scene:', sceneName, err);
				$mount.append('<p class="webgl-error">Failed to load scene: ' + sceneName + '</p>');
			});

		// Cleanup when element is removed
		$mount.on('remove', function() {
			context._running = false;
			if (context._animationId) {
				cancelAnimationFrame(context._animationId);
			}
			if (context.cleanup) {
				context.cleanup();
			}
			$(window).off('resize.webgl-' + sceneName);
		});
	}

	// Initialize all mount points
	$('.webgl-mount').each(function() {
		initMount(this);
	});
});