SHARE
TWEET

Untitled

a guest Oct 21st, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  6.  
  7.         <title>GPGPU</title>
  8.     </head>
  9.  
  10.     <body>
  11.         <div id="result"></div>
  12.     </body>
  13.  
  14.     <script id="shader" type="x-shader/x-compute">
  15.         #version 310 es
  16.  
  17.         layout (local_size_x = 128, local_size_y = 1, local_size_z = 1) in;
  18.         layout (std430, binding = 0) buffer SSBO {
  19.             float data[];
  20.         } ssbo;
  21.  
  22.         void main(){
  23.             uint threadIndex = gl_GlobalInvocationID.x;
  24.             ssbo.data[threadIndex] = float(threadIndex);
  25.         }
  26.     </script>
  27.  
  28.     <script>
  29.         class GPGPU{
  30.             ctx;
  31.             program;
  32.  
  33.             constructor(src){
  34.                 this.ctx = new OffscreenCanvas(0, 0).getContext("webgl2-compute");
  35.                 this.program = this.ctx.createProgram();
  36.  
  37.                 const shader = this.ctx.createShader(this.ctx.COMPUTE_SHADER);
  38.  
  39.                 this.ctx.shaderSource(shader, src);
  40.                 this.ctx.compileShader(shader);
  41.  
  42.                 if(!this.ctx.getShaderParameter(shader, this.ctx.COMPILE_STATUS)){
  43.                     console.log(this.ctx.getShaderInfoLog(shader));
  44.                     return;
  45.                 }
  46.  
  47.                 this.ctx.attachShader(this.program, shader);
  48.                 this.ctx.linkProgram(this.program);
  49.  
  50.                 if(!this.ctx.getProgramParameter(this.program, this.ctx.LINK_STATUS)){
  51.                     console.log(this.ctx.getProgramInfoLog(this.program));
  52.                     return;
  53.                 }
  54.             }
  55.  
  56.             compute(input){
  57.                 const ssbo = this.ctx.createBuffer();
  58.  
  59.                 this.ctx.bindBuffer(this.ctx.SHADER_STORAGE_BUFFER, ssbo);
  60.                 this.ctx.bufferData(this.ctx.SHADER_STORAGE_BUFFER, input, this.ctx.DYNAMIC_COPY);
  61.                 this.ctx.bindBufferBase(this.ctx.SHADER_STORAGE_BUFFER, 0, ssbo);
  62.  
  63.                 this.ctx.useProgram(this.program);
  64.                 this.ctx.dispatchCompute(1, 1, 1);
  65.  
  66.                 const result = new Float32Array(input.length);
  67.                 this.ctx.getBufferSubData(this.ctx.SHADER_STORAGE_BUFFER, 0, result);
  68.  
  69.                 return result;
  70.             }
  71.         }
  72.  
  73.         const gpgpu = new GPGPU(document.getElementById("shader").textContent.trim());
  74.         document.getElementById("result").textContent = gpgpu.compute(new Float32Array(8));
  75.     </script>
  76. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top