2f:T5bc,wgpujs = { turbjs; return Promises.delay(wait).then(()=>{ let t1 = performance.now() const canvas = document.createElement('canvas') const context = canvas.getContext('webgl2'); let gpu = new web.GPU({context}) // -------- needs to be 'memory aligned' with original array // -------- increase block size for larger arrays let block = Math.round(Math.sqrt(arr.length)) // + 1 ? // -------- setup kernels const ops = gpu.createKernel(function(a) { let rev = this.constants.len-this.thread.x let op = (a[this.thread.x] ** a[rev]) / a[rev] return op }).setOutput([arr.length]) .setConstants({len:arr.length-1}) .setOptimizeFloatMemory(false) .setPipeline(true) const batch = gpu.createKernel(function(tex) { let max = 0 let size = this.constants.size //Math.floor(this.constants.size/this.constants.block) let offset = ((this.thread.x)*this.constants.block) for (let i = 0; i < size; ++i) { let dat = tex[offset + i] if( dat > max ) max = dat } return max }).setOutput([block]) .setConstants({ size: Math.floor(arr.length / block), // was: arr.length , block }) .setOptimizeFloatMemory(false) // ---- run calculation let r = getMax( batch(ops(arr)) ) invalidation.then(()=>{ gpu.destroy() }) return { t: parseInt(performance.now()-t1).toString().padStart(3, '0'), max:r.toFixed(2),['gpu.js']:gpu } }) }30:T778,lumagl = { wgpujs; return Promises.delay(wait).then(()=>{ //const canvas = new OffscreenCanvas(1,1); const gl = new OffscreenCanvas(1,1).getContext('webgl2') let t1 = performance.now(); const VS = `#version 300 es attribute float i_a; attribute float i_b; varying float outValue; void main() { outValue = pow(i_a,i_b)/i_b; }`; const block = 18 const range = 2 ** block const zeros = new Float32Array(range); const iters = minBlocks(arr.length,block); const aBuf = new lm.Buffer(gl, { data: zeros }); const bBuf = new lm.Buffer(gl, { data: zeros }); const outBuf = new lm.Buffer(gl, { byteLength: range * iters * 4 }) const feedbackBuffer = new lm.Buffer(gl, { byteLength: zeros.length * 4 }); const transform = new lm.Transform(gl, { sourceBuffers: { i_a: aBuf, i_b: bBuf }, feedbackBuffers: { outValue: feedbackBuffer, }, vs: VS, varyings: ["outValue"], elementCount: zeros.length }); // Perform one transform feedback iteration let rev = new Float32Array(arr).reverse() let u_a = new lm.Buffer(gl,{ byteLength: zeros.length * 4}) //data: let u_b = new lm.Buffer(gl,{ byteLength: zeros.length * 4}) //data:rev.subarray((iters-1-i)*range,(iters-i)*range for (let i = 0; i < iters; ++i) { u_a.subData(arr.subarray(i*range,(i+1)*range)) u_b.subData(rev.subarray((iters-1-i)*range,(iters-i)*range)) transform.update({ sourceBuffers: { i_a: u_a, i_b: u_b } }) transform.run(); outBuf.copyData({ readOffset: 0, sourceBuffer:feedbackBuffer, writeOffset:i* zeros.length * 4 , size: zeros.length * 4 }) } let max = getMax(outBuf.getData()) transform.delete() return { t: parseInt(performance.now()-t1).toString().padStart(3,0), max:max.toFixed(2),"luma.gl":transform } }) }31:Tfc7,// adapted from: // http://webgl2fundamentals.org/webgl/lessons/webgl-gpgpu.html rawgpu = { lumagl; return Promises.delay(wait).then(()=>{ let t1 = performance.now(); const vs = `#version 300 es precision highp float; in float a; in float b; out float op; void main() { op = pow(a,b) / b; }`; const fs = `#version 300 es precision highp float; void main() { }`; function createShader(gl, type, src) { const shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(shader)); } return shader; } const vShader = createShader(gl, gl.VERTEX_SHADER, vs); const fShader = createShader(gl, gl.FRAGMENT_SHADER, fs); const program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.transformFeedbackVaryings( program, ["op"], gl.SEPARATE_ATTRIBS ); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { throw new Error(gl.getProgramParameter(program)); } const aLoc = gl.getAttribLocation(program, "a"); const bLoc = gl.getAttribLocation(program, "b"); // Create a vertex array object (attribute state) const vao = gl.createVertexArray(); gl.bindVertexArray(vao); function makeBuffer(gl, sizeOrData) { const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, gl.DYNAMIC_DRAW); return buf; } function makeBufferAndSetAttribute(gl, data, loc) { const buf = makeBuffer(gl, data); // setup our attributes to tell WebGL how to pull // the data from the buffer above to the attribute gl.enableVertexAttribArray(loc); gl.vertexAttribPointer( loc, 1, // size (num components) gl.FLOAT, // type of data in buffer false, // normalize 0, // stride (0 = auto) 0 // offset ); } const len = arr.length; let a = new Float32Array(arr.length); let b;// = new Float32Array(arr.length); for (let i = 0; i < len; ++i) { let op = arr[i] a[i] = op; //b[len-1-i] = op; } b = a.reverse(); let t2 = performance.now() // put data in buffers const aBuffer = makeBufferAndSetAttribute(gl, a, aLoc); const bBuffer = makeBufferAndSetAttribute(gl, b, bLoc); // Create and fill out a transform feedback const tf = gl.createTransformFeedback(); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf); // make buffers for output const opBuffer = makeBuffer(gl, len * 4); // bind the buffers to the transform feedback gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, opBuffer); // gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, anotherBuffer); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null); // buffer's we are writing to can not be bound else where gl.bindBuffer(gl.ARRAY_BUFFER, null); // productBuffer was still bound to ARRAY_BUFFER so unbind it // setup // --------------------------------- // apply gl.useProgram(program); // bind our input attribute state for the a and b buffers gl.bindVertexArray(vao); // no need to call the fragment shader gl.enable(gl.RASTERIZER_DISCARD); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf); gl.beginTransformFeedback(gl.POINTS); gl.drawArrays(gl.POINTS, 0, len); gl.endTransformFeedback(); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null); // turn on using fragment shaders again // gl.disable(gl.RASTERIZER_DISCARD); let r = getMax(getData(gl, opBuffer, "op")); return { t:parseInt(performance.now()-t1).toString().padStart(3, '0'), max:r.toFixed(2), WebGL2:gl } function getData(gl, buffer, label) { const results = new Float32Array(len) gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.getBufferSubData( gl.ARRAY_BUFFER, 0, // byte offset into GPU buffer, results ); return results } }) }32:T6a8,subgpu = { rawgpu; return Promises.delay(wait).then(()=>{ let t1 = performance.now() const gl = dest.getContext('webgl2',{ antialias:false, desynchronized:true, preserveDrawingBuffer: true, powerPreference:'high-performance', }) const GP = WebGP(dest, gl) const len = arr.length const block = 18 // evenly sized? const iters = minBlocks(len,block) const range = 2 ** block; const colum = 2; const testTex = GP.Util.buildFloatTexture(256,256,arr); const ab = new Float32Array(range*colum); // ------- vertex computer const vc = new GP.VertexComputer({ units: range,// * (colum * 0.25) , // adjust multipier (manually) for packing vecs / per column struct: { //ab: "vec2" a:"float", b:"float", }, initializeBuffer:ab.buffer, updateStep: { glsl: `void main() { o_a = pow(i_a,i_b)/i_b; o_b = 0.0; }` } }) let r = new Float32Array(iters) let n = 0; for (let i = 0; i < iters; ++i) { for (let j = -1; j < (range-1) * 2;) { // adjust multipier (manually) for packing vecs / per column ab[++j] = arr[n] ab[++j] = arr[len-1-n] ++n } gl.bindBuffer(gl.ARRAY_BUFFER, vc.getResultBuffer().vertexBuffer); gl.bufferSubData(gl.ARRAY_BUFFER,0, ab) vc.step(false); r[i] = getMax(new Float32Array(vc.getResultDataView().buffer)) gl.bindBuffer(gl.ARRAY_BUFFER, null); } r = Math.max(...r) invalidation.then(()=>vc.destroy()) return { t:parseInt(performance.now()-t1).toString().padStart(3, '0'), max:r.toFixed(2),WebGP:vc } }) }33:Taf3,// note: // texture precision issues on mobile supgpu = { subgpu; return Promises.delay(wait).then(()=>{ let t1 = performance.now() const gl = dest.getContext('webgl2',{ antialias:false, desynchronized:true, preserveDrawingBuffer: true, powerPreference:'high-performance', }) const GP = WebGP(dest, gl); let len = arr.length const threads = 256 ; const block = 16; // evenly sized --> why can you go higher than max texture2d block size ? const bytes = 4; // because float? const iters = minBlocks(len,block)/bytes const range = 2 ** block; const width = 2 ** (block * 0.5); const span = ~~(range / threads); let aTexs = []; let bTexs; // = []; // float texture indexes 4 bytes per 1 * 1 ( == width * width) slot for (let i = 0; i < iters ; ++i) { aTexs.push(GP.Util.buildFloatTexture(width,width,arr.subarray((i)*bytes*(range),(i+1)*bytes*(range)))); // bTexs.push(GP.Util.buildFloatTexture(width,width,arr.subarray((iters-1-i)*bytes*(range),(iters)*bytes*(range)))); } bTexs = aTexs.reverse() // gl.textureReferences seem immutable from sort let a,b; // reserve texture slots; const vc = new GP.VertexComputer({ units: threads, struct: { result: "float" }, uniforms: {a,b}, initializeBuffer:new Float32Array(threads).buffer, updateStep: { params: { a: "sampler2D", b:"sampler2D" }, // potential speedup -> chunk input data along multiple data texture arrays glsl: GP.Util.dataTextureMacros + ` // import TEXTURE_FETCH util function void main() { float top = i_result; int offset = gl_VertexID * ${span}; for (int j = 0; j < ${span}; j += 1) { vec4 a = TEXTURE_FETCH(u_a,j+(offset),${width}); // loop backwards over texture vec4 b = TEXTURE_FETCH(u_b,${range-1}-j-(offset),${width}); // inverse pairing a.xyzw -- b.wzyx float op = max( max(pow(a.x,b.w)/b.w, pow(a.y,b.z)/b.z), max(pow(a.z,b.y)/b.y, pow(a.w,b.x)/b.x) ); if(isinf(op)) continue; // v seems to be faster than conditional top = max(top,op); // top += dot(vec4(pow(a.x,b.w)/b.w,pow(a.y,b.z)/b.z,pow(a.z,b.y)/b.y,pow(a.w,b.x)/b.x), vec4(1.0)); } o_result = top; }` } }) for (let i = 0; i < aTexs.length; ++i) { vc.uniforms['a'] = aTexs[i] vc.uniforms['b'] = bTexs[i] vc.step(); } let r = (new Float32Array(vc.getResultDataView().buffer)).sort()[threads-1] invalidation.then(()=>vc.destroy()) return { t:parseInt(performance.now()-t1).toString().padStart(3, '0'), max:r.toFixed(2),WebGP:vc } }) }34:T1b79,turbo = function () { // turbo.js // (c) turbo - github.com/turbo // MIT licensed "use strict"; // Mozilla reference init implementation var initGLFromCanvas = function (canvas) { var gl = null; var attr = { alpha: false, antialias: false, powerPreference:'high-performance', desynchronized:true, preserveDrawingBuffer:true}; // Try to grab the standard context. If it fails, fallback to experimental. gl = canvas.getContext("webgl", attr) || canvas.getContext("experimental-webgl", attr); // If we don't have a GL context, give up now if (!gl) throw new Error( "turbojs: Unable to initialize WebGL. Your browser may not support it." ); return gl; }; var gl = initGLFromCanvas(document.createElement("canvas")); // turbo.js requires a 32bit float vec4 texture. Some systems only provide 8bit/float // textures. A workaround is being created, but turbo.js shouldn't be used on those // systems anyway. if (!gl.getExtension("OES_texture_float")) throw new Error( "turbojs: Required texture format OES_texture_float not supported." ); // GPU texture buffer from JS typed array function newBuffer(data, f, e) { var buf = gl.createBuffer(); gl.bindBuffer(e || gl.ARRAY_BUFFER, buf); gl.bufferData( e || gl.ARRAY_BUFFER, new (f || Float32Array)(data), gl.STATIC_DRAW ); return buf; } var positionBuffer = newBuffer([-1, -1, 1, -1, 1, 1, -1, 1]); var textureBuffer = newBuffer([0, 0, 1, 0, 1, 1, 0, 1]); var indexBuffer = newBuffer( [1, 2, 0, 3, 0, 2], Uint16Array, gl.ELEMENT_ARRAY_BUFFER ); var vertexShaderCode = "attribute vec2 position;\n" + "varying vec2 pos;\n" + "attribute vec2 texture;\n" + "\n" + "void main(void) {\n" + " pos = texture;\n" + " gl_Position = vec4(position.xy, 0.0, 1.0);\n" + "}"; var stdlib = "\n" + "precision lowp float;\n" + "uniform sampler2D u_texture;\n" + "varying vec2 pos;\n" + "\n" + "vec4 read(void) {\n" + " return texture2D(u_texture, pos);\n" + "}\n" + "\n" + "void commit(vec4 val) {\n" + " gl_FragColor = val;\n" + "}\n" + "\n" + "// user code begins here\n" + "\n"; var vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderCode); gl.compileShader(vertexShader); // This should not fail. if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) throw new Error( "\nturbojs: Could not build internal vertex shader (fatal).\n" + "\n" + "INFO: >REPORT< THIS. That's our fault!\n" + "\n" + "--- CODE DUMP ---\n" + vertexShaderCode + "\n\n" + "--- ERROR LOG ---\n" + gl.getShaderInfoLog(vertexShader) ); // Transfer data onto clamped texture and turn off any filtering function createTexture(data, size) { var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.FLOAT, data ); gl.bindTexture(gl.TEXTURE_2D, null); return texture; } return { // run code against a pre-allocated array run: function (ipt, code) { var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, stdlib + code); gl.compileShader(fragmentShader); // Use this output to debug the shader // Keep in mind that WebGL GLSL is **much** stricter than e.g. OpenGL GLSL if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { var LOC = code.split("\n"); var dbgMsg = "ERROR: Could not build shader (fatal).\n\n------------------ KERNEL CODE DUMP ------------------\n"; for (var nl = 0; nl < LOC.length; nl++) dbgMsg += stdlib.split("\n").length + nl + "> " + LOC[nl] + "\n"; dbgMsg += "\n--------------------- ERROR LOG ---------------------\n" + gl.getShaderInfoLog(fragmentShader); throw new Error(dbgMsg); } var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error("turbojs: Failed to link GLSL program code."); var uTexture = gl.getUniformLocation(program, "u_texture"); var aPosition = gl.getAttribLocation(program, "position"); var aTexture = gl.getAttribLocation(program, "texture"); gl.useProgram(program); var size = Math.sqrt(ipt.data.length) / 4; var texture = createTexture(ipt.data, size); gl.viewport(0, 0, size, size); gl.bindFramebuffer(gl.FRAMEBUFFER, gl.createFramebuffer()); // Types arrays speed this up tremendously. var nTexture = createTexture(new Float32Array(ipt.data.length), size); gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, nTexture, 0 ); // Test for mobile bug MDN->WebGL_best_practices, bullet 7 var frameBufferStatus = gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE; if (!frameBufferStatus) throw new Error( "turbojs: Error attaching float texture to framebuffer. Your device is probably incompatible. Error info: " + frameBufferStatus.message ); gl.bindTexture(gl.TEXTURE_2D, texture); gl.activeTexture(gl.TEXTURE0); gl.uniform1i(uTexture, 0); gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer); gl.enableVertexAttribArray(aTexture); gl.vertexAttribPointer(aTexture, 2, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); gl.readPixels(0, 0, size, size, gl.RGBA, gl.FLOAT, ipt.data); // ^ 4 x 32 bit ^ return ipt.data.subarray(0, ipt.length); }, alloc: function (sz) { // A sane limit for most GPUs out there. // JS falls apart before GLSL limits could ever be reached. if (sz > 16777216) throw new Error("turbojs: Whoops, the maximum array size is exceeded!"); var ns = Math.pow(Math.pow(2, Math.ceil(Math.log(sz) / 1.386) - 1), 2); return { data: new Float32Array(ns * 8), length: sz, }; }, } }35:Td19,// vertex data lookup: // https://stackoverflow.com/a/55321055 // array allocation: // https://stackoverflow.com/a/70833456 // textures by reference: // https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-bind-an-array-of-textures-to-a-webgl-shader-uniform-.html // single VAO transform: // https://stackoverflow.com/a/72879018 // ping-pong transform: // https://www.ibiblio.org/e-notes/webgl/gpu/bounce.htm // adding a fence: // https://stackoverflow.com/a/67808069 /* more straightforward copying needed let src = compiled.buffers.get('result'); let dst = compiled.buffers.get('source'); this.gl.bindBuffer(this.gl.COPY_READ_BUFFER, src); let srcSize = this.gl.getBufferParameter(this.gl.COPY_READ_BUFFER,this.gl.BUFFER_SIZE); this.gl.bindBuffer(this.gl.COPY_WRITE_BUFFER, dst); let dstSize = this.gl.getBufferParameter(this.gl.COPY_WRITE_BUFFER,this.gl.BUFFER_SIZE); this.gl.copyBufferSubData( this.gl.COPY_READ_BUFFER, this.gl.COPY_WRITE_BUFFER, 0, 0, dstSize some odd offset behaviour this.gl.POINTS, i, compiled.length , (Math.max(options.instances,options.iters) ?? 1) ); this.gl.endTransformFeedback(); this.gl.bindTransformFeedback(this.gl.TRANSFORM_FEEDBACK, null); this.gl.bindBufferBase(this.gl.TRANSFORM_FEEDBACK_BUFFER, 0, null) var t = bufA; bufA = bufB; bufB = t; } this.gl.useProgram(null); this.gl.bindVertexArray(null);; // Read transform feedback buffer data for (const [name, data] of compiled.containers) { const buffer = compiled.buffers.get(name); // this.gl.getBufferSubData(this.gl.TRANSFORM_FEEDBACK_BUFFER, 0, data); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, bufA) this.gl.getBufferSubData(this.gl.ARRAY_BUFFER, 0, data) this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null) output[name] = data; } this.gl.disable(this.gl.RASTERIZER_DISCARD); return output; } 36:T1a37,// adapted from: // https://gist.github.com/CodyJasonBennett/34c36b91719171c45ec50e850dc38a34 WebGLCompute = { /* Matches against GLSL shader outputs. */ const VARYING_REGEX = /[^\w](?:varying|out)\s+\w+\s+(\w+)\s*;/g; /** * Adds line numbers to a string with an optional starting offset. */ const lineNumbers = (source, offset = 0) => source.replace(/^/gm, () => `${offset++}:`); /** * Gets the appropriate WebGL data type for a data view. */ const getDataType = (data) => { switch (data.constructor) { case Float32Array: return 5126; // FLOAT case Int8Array: return 5120; // BYTE case Int16Array: return 5122; // SHORT case Int32Array: return 5124; // INT case Uint8Array: case Uint8ClampedArray: return 5121; // UNSIGNED_BYTE case Uint16Array: return 5123; // UNSIGNED_SHORT case Uint32Array: return 5125; // UNSIGNED_INT default: return null; } }; /** * Constructs a WebGL compute program via transform feedback. Can be used to compute and serialize data from the GPU. */ class WebGLCompute { constructor(gl = new OffscreenCanvas(1,1).getContext("webgl2")) { this.gl = gl; this._compiled = new Map(); this._fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER); this.gl.shaderSource( this._fragmentShader, "#version 300 es\nvoid main(){}" ); this.gl.compileShader(this._fragmentShader); } /** * Compiles a transform feedback program from compute options. */ compile(options) { let compiled = this._compiled.get(options); if (compiled) { this.gl.bindVertexArray(compiled.VAO); for (const [name, buffer] of compiled.buffers) { const input = options.inputs[name]; if (!input.needsUpdate) continue; this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer); this.gl.bufferData( this.gl.ARRAY_BUFFER, input.data, this.gl.DYNAMIC_READ ); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null); input.needsUpdate = false; } this.gl.bindVertexArray(null); return compiled; } // Parse outputs from shader source const outputs = Array.from(options.compute.matchAll(VARYING_REGEX)).map( ([, varying]) => varying ); // Compile shaders, configure output varyings const program = this.gl.createProgram(); const vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER); this.gl.shaderSource(vertexShader, options.compute); this.gl.compileShader(vertexShader); this.gl.attachShader(program, vertexShader); this.gl.attachShader(program, this._fragmentShader); this.gl.transformFeedbackVaryings( program, outputs, this.gl.SEPARATE_ATTRIBS ); this.gl.linkProgram(program); const shaderError = this.gl.getShaderInfoLog(vertexShader); if (shaderError) throw `Error compiling shader: ${shaderError}\n${lineNumbers( options.compute )}`; const programError = this.gl.getProgramInfoLog(program); if (programError) throw `Error compiling program: ${this.gl.getProgramInfoLog(program)}`; this.gl.detachShader(program, vertexShader); this.gl.detachShader(program, this._fragmentShader); this.gl.deleteShader(vertexShader); // Init VAO state (input) const VAO = this.gl.createVertexArray(); this.gl.bindVertexArray(VAO); let length = 0; const buffers = new Map(); for (const name in options.inputs) { const input = options.inputs[name]; const buffer = this.gl.createBuffer(); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer); this.gl.bufferData( this.gl.ARRAY_BUFFER, input.data, this.gl.DYNAMIC_READ //this.gl.STATIC_READ ); const location = this.gl.getAttribLocation(program, name); const slots = Math.min(4, Math.max(1, Math.floor(input.size / 3))); for (let i = 0; i < slots; i++) { this.gl.enableVertexAttribArray(location + i); if (input.data instanceof Float32Array) { this.gl.vertexAttribPointer( location, input.size, this.gl.FLOAT, false, 0, 0 ); } else { const dataType = getDataType(input.data); this.gl.vertexAttribIPointer(location, input.size, dataType, 0, 0); } if (input.divisor) this.gl.vertexAttribDivisor(location + i, input.divisor); } buffers.set(name, buffer); length = Math.max(length, input.data.length / input.size); input.needsUpdate = false; } this.gl.bindVertexArray(null); // Init feedback state (output) const transformFeedback = this.gl.createTransformFeedback(); this.gl.bindTransformFeedback( this.gl.TRANSFORM_FEEDBACK, transformFeedback ); const containers = new Map(); for (let i = 0; i < outputs.length; i++) { const output = outputs[i]; const data = new Float32Array(length * options.instances); containers.set(output, data); const buffer = this.gl.createBuffer(); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer); this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.gl.STATIC_COPY); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null); buffers.set(output, buffer); this.gl.bindBufferBase(this.gl.TRANSFORM_FEEDBACK_BUFFER, i, buffer); } this.gl.bindTransformFeedback(this.gl.TRANSFORM_FEEDBACK, null); compiled = { program, VAO, transformFeedback, buffers, containers, length, }; this._compiled.set(options, compiled); return compiled; } /** * Runs and reads from the compute program. */ compute(options) { return compute.call(this,options) } /** * Disposes the compute pipeline from GPU memory. */ dispose() { this.gl.deleteShader(this._fragmentShader); for (const [, compiled] of this._compiled) { this.gl.deleteProgram(compiled.program); this.gl.deleteVertexArray(compiled.VAO); this.gl.deleteTransformFeedback(compiled.transformFeedback); compiled.buffers.forEach((buffer) => this.gl.deleteBuffer(buffer)); } this._compiled.clear(); } } return WebGLCompute; } 37:[] 2d:{"title":"Ultimate compute show-down","cells":[{"id":79,"value":"# Ultimate compute show-down","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"viewof randomise = Inputs.button(\"Profile\",{label: \"\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"native = { turbo; Stream; Parallel; ndarray; WebGP; Thread; tf; web; ops;\n return Promises.delay(wait).then(()=>{\n let t1 = performance.now()\n\n let len = arr.length-1\n \n let t2 = performance.now()\n let max = 0\n for (let i = 0; i < len; ++i) {\n let rev = len - i\n let op = (arr[i] ** arr[rev])/arr[rev]\n if(op > max) max = op;\n }\n \n return {\n t: parseInt(performance.now()-t1).toString().padStart(3, '0'),\n max:max.toFixed(2),javascript:window\n } \n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2047,"value":"ndarry = { native;\n return Promises.delay(wait).then(()=>{\n let t1 = performance.now()\n\n let a = ndarray(arr)\n let b = a.step(-1)\n\n let max = 0;\n \n for (let i = 0; i < a.shape[0]; ++i) {\n let op = (a.get(i) ** b.get(i)) / b.get(i)\n if(op>max) max = op\n }\n \n return {\n t:parseInt(performance.now()-t1).toString().padStart(3, '0'),\n max:(max.toFixed(2)),ndarray:a\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2388,"value":"arqero = { ndarry ;\n return Promises.delay(wait).then(()=>{\n let t1 = performance.now()\n let op = aq.op \n \n let max = aq.table({\n a: arr,\n b: arr.slice(0).reverse()\n }).derive({\n c: d=> op.pow(d.a , d.b) / d.b\n }).rollup({\n max: d=> op.max(d.c)\n }).get('max',0)\n \n return {\n t:parseInt(performance.now()-t1).toString().padStart(3, '0'), \n max:(max.toFixed(2)),arquero:aq\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"stream = { arqero;\n return Promises.delay(wait).then(()=>{\n let t1 = performance.now() \n \n let max = 0;\n let rev = arr.length - 1;\n\n let strm = Stream.of(arr)\n \n strm.forEach(d=>{\n let op = (d ** arr[rev])/arr[rev]\n if(op > max) max = op; --rev;\n })\n \n return {\n t:parseInt(performance.now()-t1).toString().padStart(3, '0'),\n max:(max.toFixed(2)), ['quick-stream']:strm\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"worker = { stream;\n return Promises.delay(wait).then(async ()=>{\n let t1 = performance.now()\n\n let len = arr.length\n let arr1 = new Float32Array(len)\n let arr2 = new Float32Array(len)\n \n for (let i = 0; i < len; ++i) {\n arr1[i] = arr[i]\n arr2[i] = arr[len-i]\n }\n \n let threads = 3\n let block = Math.floor(len/threads)\n \n let p = new Parallel(Array.from({length:threads},(_,n)=>\n [ arr1.subarray(n*block,(n+1)*block),arr2.subarray(n*block,(n+1)*block) ]))\n \n let r = await p.map(function([arr1,arr2]){\n\n let max = 0\n for (let i = 0; i < arr1.length; ++i) {\n let op = ((arr1[i] ** arr2[i])/arr2[i])\n if(op > max) max = op;\n }\n return max\n })\n\n r = Math.max(...r)\n \n return {\n t:parseInt(performance.now()-t1).toString().padStart(3, '0'),\n max:(r.toFixed(2)),['parallel.js']:p\n } \n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"thread = { worker;\n return Promises.delay(wait).then(async ()=>{ \n \n let t1 = performance.now(); \n Thread.init({maxThreads:8})\n \n let threads = Thread.maxThreads\n \n var params = {\n array: new Float32Array(arr),\n threads,\n };\n\n let r = await Thread.promise(params, function() {\n\n let arr = params.array\n let len = arr.length;\n let max = 0\n \n for (let i = 0; i < len; ++i) {\n let op = (arr[i] ** arr[len-1-i]) / arr[len-1-i]\n if(op> max) { max = op }\n }\n \n this.rtn.data[0] = max // set first item of each thread to max\n \n })\n\n let max = 0;\n\n for (let t = 0;t < threads; ++t) {\n let dat = r[t * (arr.length/threads)] // retrieve first item per thread == max value\n if(dat > max) max = dat; \n }\n\n return {\n t:parseInt(performance.now()-t1).toString().padStart(3, '0'),\n max:(max.toFixed(2)),['hamsters.js']:Thread\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"tensor = { thread;\n return Promises.delay(wait).then(()=>{\n let t1 = performance.now()\n let b1 = tf.buffer([arr.length,1])\n let b2 = tf.buffer([arr.length,1])\n\n let len = arr.length\n for (let i = 0; i < len; ++i) {\n b1.set(arr[i],i,0)\n b2.set(arr[len-1-i],i,0)\n }\n \n let tn1 = b1.toTensor()\n let tn2 = b2.toTensor()\n\n let t2 = performance.now()\n let max = tf.tidy(()=> tn1.pow(tn2).div(tn2).max())\n\n let r = (max.bufferSync()).get(0)\n\n invalidation.then(()=> {\n tn1.dispose();\n tn2.dispose(); \n max.dispose();\n tf.disposeVariables()\n })\n\n return {\n t:parseInt(performance.now()-t1).toString().padStart(3, '0'),\n max: r.toFixed(2),['tensorflow.js']:tn1\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4426,"value":"turbjs = { tensor;\n return Promises.delay(wait).then(()=>{\n let t1 = performance.now(), r;\n let compute; \n try {\n compute = turbo()\n var result = compute.alloc(arr.length);\n\n const len = arr.length-1;\n\n // pos sometimes misaligned ??\n \n for (let i = 0, pos = 0; i < len; ++i) {\n result.data[++pos] = arr[i]\n result.data[++pos] = arr[len-1-i]\n }\n \n compute.run(result, `\n void main(void) {\n vec4 num = read();\n commit(vec4(pow(num.x,num.y)/num.y,pow(num.z,num.w)/num.w,0,0) );\n }`);\n \n r = getMax(result.data)\n \n } catch {\n t1 = NaN;\n r = 0\n }\n \n return {\n t: parseInt(performance.now()-t1).toString().padStart(3, '0'),\n max:r.toFixed(2),['turbo.js']:compute\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":9775,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4155,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4902,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7741,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"arr = randomise, new Float32Array(Array.from({length:(2 ** 22 )-(adjLength.length*parseInt(Math.random()*100))},()=>Math.random()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4727,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":9729,"value":"viewof adjLength = Inputs.checkbox([true],{label:'Randomise length'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"wait = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":4712,"value":"___\n\n### Envs ","pinned":false,"hidden":false,"mode":"md"},{"id":4171,"value":"gl = {\n const canvas = //document.createElement(\"canvas\");\n new OffscreenCanvas(1, 1);\n return canvas.getContext(\"webgl2\",{ \n antialias:false,\n desynchronized:true,\n preserveDrawingBuffer: true, \n powerPreference:'high-performance',\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4854,"value":"dest = {\n let canvas = new OffscreenCanvas(1,1)\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8957,"value":"___\n\n### Static","pinned":false,"hidden":false,"mode":"md"},{"id":1468,"value":"function getMax(arr) {\n let len = arr.length;\n let max = -Infinity;\n\n while (len--) {\n max = arr[len] > max && arr[len] !== Infinity ? arr[len] : max;\n }\n return max;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6117,"value":"function minBlocks(length, exp = 0 ) {\n \n let x = (length-1) / (2 ** Math.max(0,exp));\n \n x = x | (x >> 1);\n x = x | (x >> 2);\n x = x | (x >> 4);\n x = x | (x >> 8);\n x = x | (x >> 16);\n x = x | (x >> 32);\n x = x | (x >> 64);\n return x+1 //- (x >> 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6757,"value":"function padBlocks(x) {\n x = x | (x >> 1);\n x = x | (x >> 2);\n x = x | (x >> 4);\n x = x | (x >> 8);\n x = x | (x >> 16);\n x = x | (x >> 32);\n x = x | (x >> 64);\n return x+1 //- (x >> 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"___\n\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":4421,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"Stream = (await import('https://cdn.skypack.dev/@bibhas/quick-stream@1.0.0?min')).Stream","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"Parallel = require('https://bundle.run/paralleljs@1.1.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2135,"value":"ndarray = (await import('https://cdn.skypack.dev/ndarray@1.0.19?min')).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":4787,"value":"WebGP = fetch(\"https://raw.githubusercontent.com/glennirwin/webgp/master/src/webgp.js\")\n .then((d) => d.text())\n .then(\n (d) =>\n new Function(\n \"canvas\",\n \"context\",\n d.substring(d.indexOf(\"{\") + 1, d.lastIndexOf(\"}\"))\n .replace('log(\"problem reading pixels, framebuffer not ready\");','')\n .replace('log(\"Sorry, can only get pixels when doing textureOut\");','')\n )\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"Thread = (await import('https://cdn.skypack.dev/hamsters.js@5.4.2?min')).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"tf = import('https://cdn.skypack.dev/@tensorflow/tfjs@4.2.0?min')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9421,"value":"mu = import('https://unpkg.com/munum@0.1.0/index.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10265,"value":"lm = require('@luma.gl/core@8.5.18/dist/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"web = import('https://cdn.skypack.dev/gpu.js@2.16.0?min')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"ops = (await import('https://cdn.skypack.dev/ndarray-ops@1.2.2?min')).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":13197,"value":"___\n\n### Playground","pinned":false,"hidden":false,"mode":"md"},{"id":11122,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":10577,"value":"glcomp = { \n let t1 = performance.now()\n const renderer = new WebGLCompute();\n const result = renderer.compute({\n instances: 8, // => threads\n divisor:1, \n iters:4, // => feedback slots\n //needsUpdate:true,\n inputs: {\n source: {\n data:new Float32Array(1),\n size:1,\n }, \n // b:{data:new Float32Array(1),size:1}, use all params\n\n },\n compute: `#version 300 es\n in float source;\n out float result;\n\n void main() {\n\n for (int j = 0; j < ${4}; j += 1) {\n \n result += source + 1.0; \n\n result += (float(gl_InstanceID)+1.0);// - (float(gl_VertexID));\n }\n // result = 1.0;//(source*0.0) + (float(gl_InstanceID) + 0.0);// + (float(gl_VertexID) * 0.0);// + (b*0.0);\n }\n `,\n });\n\n invalidation.then(()=>renderer.dispose())\n \n return {\n t:parseInt(performance.now()-t1).toString().padStart(3,0),\n ...result, renderer\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10566,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":9407,"value":"___\n\n### Notes\n\nFor reduce see:\n- https://webglfundamentals.org/webgl/lessons/webgl-qna-accessing-textures-by-pixel-coordinate-in-webgl2.html\n\nGeneral optimisations:\n- https://www.khronos.org/opengl/wiki/GLSL_Optimizations","pinned":false,"hidden":false,"mode":"md"}],"files":"$W37","stdlib":"1","titling":"auto"}