2b:null 2c:["$","title",null,{"children":"Ultimate compute show-down | dleeftink | Observable"}] 31:T44c,I am comparing CPU/GPU libraries for accelerating computations. Each cell contains a MVP code setup for each library, which is timed consecutively for three things: 1. Preparation: simulating a (flat) matrix by ingesting a pre-filled array with random floating point values from the start and from the end, resulting in two arrays A & B 2. Calculation: running a basic computation per value, in this case ( A[i] ** B[i] ) / B[i] 3. Returning values: finding and displaying the max value of the resulting array. The first and last step are included to time GPU I/O to see how quick the calculated values are available again for javascript use. In addition, it's a crude measure of accuracy to see how far GPU (and sometimes, webworkers; see the 'thread' method) calculations diverge from native methods. The last method ('supgpu') is partly designed by me and clearly the quickest for large arrays, in some cases providing a 10x speed up over (for instance) Tensorflow.js. It makes uses of a WebGL2 wrapper that I have tuned to enable parallel computation, currently making use of 256 GPU threads.32:T55a,Thank you, glad that you found it helpful:) Re: your first point, I've already used the pipeline feature between the operation step (ops kernel) and the max finding step (batch kernel), the latter reducing the initial array to a much smaller one of potential maximum values. This is then synced back to the CPU after which the final max is calculated (however, some faster 'reduction' to a single value on the GPU might be possible, but I haven't been able to figure this out for GPU.js just yet). Re: your second question, the next iteration of this notebook will execute multiple runs per library with more gracious startup/cooldown periods in between runs, as well as more harsh memory/context resets in between runs, comparing both GPU performance timing and IO performance (also aiming to include regl and swissgl). Right now I was mainly interested in including IO in the benchmarks, as I wanted to investigate how quickly different libraries and methods could respond to fresh data and make the results available for further synchronous compute steps. I would say GPU.js outperforms Tensorflow.js for large arrays for general calculations, with hamster.js (the 'thread' cell) providing a competitive CPU solution by parallelizing computions via workers (8 worker 'threads' seem to be upper end of providing benefits on my system) while remaining easy to use.33: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 } }) }34:T776,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 } }) }35: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 } }) }36: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 } }) }37:Tb01,// 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; // max() seems faster than ternary 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,bTexs,util:GP.Util, } }) }38: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, }; }, } }39:Td6b,// 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.drawArraysInstanced(this.gl.POINTS, 0, 1, options.instances); 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; } 3a: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; } 3b:[] 2f:{"id":"f7b6445a10eb2f2e","slug":"ultimate-compute-show-down","title":"Ultimate compute show-down","thumbnail":"b87915aa4fde37645e04ee1cf9f423de03bfb844a568646f3a9a81425803ebb7","access_level":"public","create_time":"$D2023-02-14T13:07:50.577Z","update_time":"$D2025-02-19T04:43:36.787Z","view_time":null,"first_public_time":"$D2023-02-14T13:07:50.577Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"10e70264ea4e147e","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":"starter_2024"},"version":13503,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}],"members":[{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null,"role":"editor"}],"comments":[{"id":"48ca521bdc235406","reply_to_id":null,"content":"What does this show-down provide us?","create_time":"$D2023-03-23T11:47:36.133Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"200128059da6b2a3","login":"200128059da6b2a3","name":"Robert Plummer","avatar_url":"https://avatars-next.observableusercontent.com/3c82efc8ab3e62ace10c1688b4b2416ac8204f5f438c1e851ca9fc09db2b50d9","tier":null}},{"id":"0e0901ba0716963c","reply_to_id":"48ca521bdc235406","content":"$31","create_time":"$D2023-03-24T06:56:51.042Z","update_time":"$D2024-03-29T17:00:04.941Z","resolved":false,"user":{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}},{"id":"704387b04fb16e34","reply_to_id":"48ca521bdc235406","content":"I'd like to better understand how one library in particular measures up. GPU.js. this is because I'm the maintainer of it, and I worked deeply with it over the years so that it runs at a pretty good clip. I'm not sure I clearly understand if it is tested and how can you help me to see that?","create_time":"$D2023-03-24T13:09:19.577Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"200128059da6b2a3","login":"200128059da6b2a3","name":"Robert Plummer","avatar_url":"https://avatars-next.observableusercontent.com/3c82efc8ab3e62ace10c1688b4b2416ac8204f5f438c1e851ca9fc09db2b50d9","tier":null}},{"id":"eeea83e69c589d48","reply_to_id":"48ca521bdc235406","content":"Sure thing, it was your library that set me off exploring this space! It's in the wgpu.js cell, simply timed with performance.now(). Some more accurate measurements are definitely in the pipeline, as well as exploring alternative algo designs using GPU.js (for instance, finding the max value on the GPU alone).\n\nThis first iteration was as much a learning experience as providing MVPs for javascript <-> GPU I/O.","create_time":"$D2023-03-24T14:55:44.365Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}},{"id":"85b9c80065688441","reply_to_id":"48ca521bdc235406","content":"One of the biggest things I'd like to understand is that the initial setup and compile times vs runtime are going to have drastically different results. Another is going to be kernel to kernel computational time. If you use pipeline mode (where one kernel sends values to another), you'll see MASSIVE speedups, because the textures don't need to sync the GPU's processes, and as well there is no round-trip (picture CPU -> GPU -> CPU -> GPU -> CPU) trip per texture. However, I do want to impart my amazement for providing a fantastic playground and all the hard work that went with it. Thank you for the comparisons across the board!","create_time":"$D2023-03-24T17:48:28.055Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"200128059da6b2a3","login":"200128059da6b2a3","name":"Robert Plummer","avatar_url":"https://avatars-next.observableusercontent.com/3c82efc8ab3e62ace10c1688b4b2416ac8204f5f438c1e851ca9fc09db2b50d9","tier":null}},{"id":"cd124f4c29d84c52","reply_to_id":"48ca521bdc235406","content":"Would it be possible to indicate more clearly where each library stands, and which are high-performing, and which are not?","create_time":"$D2023-03-24T17:49:41.395Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"200128059da6b2a3","login":"200128059da6b2a3","name":"Robert Plummer","avatar_url":"https://avatars-next.observableusercontent.com/3c82efc8ab3e62ace10c1688b4b2416ac8204f5f438c1e851ca9fc09db2b50d9","tier":null}},{"id":"3fda2eed6f8b394c","reply_to_id":"48ca521bdc235406","content":"$32","create_time":"$D2023-03-25T02:10:10.619Z","update_time":"$D2023-03-25T15:18:53.953Z","resolved":false,"user":{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Ultimate compute show-down","cells":[{"id":79,"value":"# Ultimate compute show-down","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":116,"value":"viewof randomise = Inputs.button(\"Profile\",{label: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"value":"native = { turbo; Stream; Parallel; ndarray; WebGP; Thread; tf; web; ops; // wait for libraries to initialise\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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":983,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9775,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4155,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4902,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7741,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":4727,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9729,"value":"viewof adjLength = Inputs.checkbox([true],{label:'Randomise length'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1328,"value":"wait = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4712,"value":"___\n\n### Envs ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":4854,"value":"dest = {\n let canvas = new OffscreenCanvas(1,1)\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8957,"value":"___\n\n### Static","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":129,"value":"___\n\n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4421,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"Stream = (await import('https://cdn.skypack.dev/@bibhas/quick-stream@1.0.0?min')).Stream","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"Parallel = require('https://bundle.run/paralleljs@1.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2135,"value":"ndarray = (await import('https://cdn.skypack.dev/ndarray@1.0.19?min')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":547,"value":"Thread = (await import('https://cdn.skypack.dev/hamsters.js@5.4.2?min')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"tf = import('https://cdn.skypack.dev/@tensorflow/tfjs@4.2.0?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9421,"value":"mu = import('https://unpkg.com/munum@0.1.0/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10265,"value":"lm = require('@luma.gl/core@8.5.18/dist/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":981,"value":"web = import('https://cdn.skypack.dev/gpu.js@2.16.0?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2140,"value":"ops = (await import('https://cdn.skypack.dev/ndarray-ops@1.2.2?min')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13197,"value":"___\n\n### Playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11122,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10577,"value":"glcomp = { \n let t1 = performance.now()\n \n const renderer = new WebGLCompute();\n const result = renderer.compute({\n instances: 1, // => threads\n iters:1, // => feedback slots\n //needsUpdate:true,\n inputs: {\n source: {\n data:new Float32Array([1]),\n size:1,\n divisor: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 < ${2048}; 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10566,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 30:"$2f:body"