User:DiamondIceNS/global.js

(function ($, mw) {   'use strict';

// Code snippets from https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html

if (mw.config.get('wgPageName') !== 'Aura_node') { return; }   console.log('Custom JS!');

var vertexShaderSource = 'attribute vec4 a_position;' + 'void main {' +    'gl_Position = a_position;' + '}';

var fragmentShaderSource = 'precision mediump float;' + 'void main {' +    'gl_FragColor = vec4(1, 0, 0.5, 1);' + '}';

function createShader(gl, type, source) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (success) { return shader; }

console.log(gl.getShaderInfoLog(shader)); gl.deleteShader(shader); }

function createProgram(gl, vertexShader, fragmentShader) { var program = gl.createProgram; gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); var success = gl.getProgramParameter(program, gl.LINK_STATUS); if (success) { return program; }

console.log(gl.getProgramInfoLog(program)); gl.deleteProgram(program); }

$.when( $.ready ).then(function {       $('.thumb, .tright').each(function (index) { var height = $(this).height; var width = $(this).width; $(this).html(' '); });       /** @type {HTMLCanvasElement} */        var canvas = $('#test-canvas-0')[0];        var gl = canvas.getContext('webgl');        if (!gl) {            return;        }

var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); var program = createProgram(gl, vertexShader, fragmentShader); var positionAttributeLocation = gl.getAttribLocation(program, 'a_position'); var positionBuffer = gl.createBuffer; gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

var positions = [ 0, 0,           0, 0.5,            0.7, 0        ];        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

function render(time) { gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(program); gl.enableVertexAttribArray(positionAttributeLocation); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); requestAnimationFrame(render); }       requestAnimationFrame(render); }); })(jQuery, mw);