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 aPosition;' + 'uniform mat4 uMatrix;' + 'uniform mat4 uTextureMatrix;' + 'varying vec2 vTexcoord;' + 'void main {' + '   gl_Position = uMatrix * aPosition;' + '   vTexcoord = (uTextureMatrix * aPosition).xy;' + '}';

var fragmentShaderSource = 'precision mediump float;' + 'varying vec2 vTexcoord;' + 'uniform sampler2D uTexture;' + 'uniform vec4 uAspectColor;' + 'void main {' + '   if (vTexcoord.x < 0.0 || vTexcoord.x > 1.0 || vTexcoord.y < 0.0 || vTexcoord.y > 1.0) {' + '       discard;' + '   }'        + '    gl_FragColor = texture2D(uTexture, vTexcoord) * uAspectColor;' + '   if (gl_FragColor.a < 0.003921569) {' + '       //discard;' + '   }'        + '}';

var m4 = { identity: function { return [ 1, 0, 0, 0,               0, 1, 0, 0,                0, 0, 1, 0,                0, 0, 0, 1            ];        }    };

/**    * @param {WebGLRenderingContext} gl     * @param {number} type * @param {string} source * @returns {WebGlShader} */   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); }

/**    * @param {WebGLRenderingContext} gl     * @param {WebGLShader} vertexShader * @param {WebGLShader} fragmentShader * @returns {WebGLProgram} */   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); }

/**    * @param {WebGLRenderingContext} gl     * @returns {ProgramInfo} */   function createProgramInfo(gl) { var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); var program = createProgram(gl, vertexShader, fragmentShader);

return { program: program, attrib: { position: gl.getAttribLocation(program, 'aPosition') },           uniform: { matrix: gl.getUniformLocation(program, 'uMatrix'), textureMatrix: gl.getUniformLocation(program, 'uTextureMatrix'), texture: gl.getUniformLocation(program, 'uTexture'), aspectColor: gl.getUniformLocation(program, 'uAspectColor') }       };    }

/**    * @param {WebGLRenderingContext} gl     */ function initBuffers(gl) { return { pos: initPositionBuffer(gl), texCoord: initTexCoordBuffer(gl) };   }

/**    * @param {WebGLRenderingContext} gl     * @returns {WebGlBuffer} */   function initPositionBuffer(gl) { const buffer = gl.createBuffer; gl.bindBuffer(gl.ARRAY_BUFFER, buffer); var positions = [ 0, 0,           0, 1,            1, 1,            1, 0        ];        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); return buffer; }

/**    * @param {WebGLRenderingContext} gl     * @returns {WebGlBuffer} */   function initTexCoordBuffer(gl) { const buffer = gl.createBuffer; gl.bindBuffer(gl.ARRAY_BUFFER, buffer); var positions = [ 0, 0,           1, 0,            1, 1,            0, 1        ];        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); return buffer; }

/**    * @param {WebGLRenderingContext} gl     * @param {string} src * @returns {WebGLTexture} */   function loadTexture(gl, src) { var texture = gl.createTexture; gl.bindTexture(gl.TEXTURE_2D, texture);

var level = 0; var internalFormat = gl.RGBA; var srcFormat = gl.RGBA; var srcType = gl.UNSIGNED_BYTE;

// Init to fallback var color = new Uint8Array([0, 0, 0, 255]); gl.texImage2D(           gl.TEXTURE_2D, level, internalFormat, 1, 1, 0, srcFormat, srcType, color        );

var image = new Image; image.addEventListener('load', function {           gl.bindTexture(gl.TEXTURE_2D, texture);            gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image);            gl.generateMipmap(gl.TEXTURE_2D);        }); image.src = src; return texture; }

/**    * @param {WebGLRenderingContext} gl     * @param {ProgramInfo} programInfo * @param {*} buffers */   function setPositionBuffer(gl, programInfo, buffers) { gl.bindBuffer(gl.ARRAY_BUFFER, buffers.pos); gl.vertexAttribPointer(programInfo.attrib.position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(programInfo.attrib.position); }

/**    * @param {WebGLRenderingContext} gl     * @param {ProgramInfo} programInfo * @param {*} uniforms */   function setUniforms(gl, programInfo, uniforms) { gl.uniformMatrix4fv(programInfo.uniform.matrix, false, uniforms.matrix); gl.uniformMatrix4fv(programInfo.uniform.textureMatrix, false, uniforms.textureMatrix); gl.uniform1i(programInfo.uniform.texture, uniforms.texture); gl.uniform1fv(programInfo.uniform.aspectColor, uniforms.aspectColor); }

$.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 programInfo = createProgramInfo(gl); var buffers = initBuffers;

// A test texture var saplingTextureUrl = 'https://static.wikia.nocookie.net/thaumcraft-4/images/a/a5/Silverwood_Sapling_Block.png/revision/latest?cb=20220328073806&format=original'; var saplingTexture = loadTexture(gl, saplingTextureUrl); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

function render(time) { gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(programInfo.program); setPositionBuffer(gl, programInfo, buffers); setUniforms(gl, programInfo, {               matrix: m4.identity,                textureMatrix: m4.identity,                texture: saplingTexture,                aspectColor: [1, 1, 1, 1]            }); gl.drawArrays(gl.TRIANGLES, 0, 6); requestAnimationFrame(render); }       requestAnimationFrame(render); }); })(jQuery, mw);

/** * @typedef ProgramInfo * @property {WebGLProgram} program * @property attrib * @property uniform */