Package Exports

gpu-compute

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gpu-compute) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gpu-compute

execute shader programs

Installation

npm install gpu-compute

Example

import * as gpu from "gpu-compute";

// only override WebGL context if executing in Node
gpu.setWebGLContext(require("gl")(1, 1));

var textureWidth = 128;

// Each texel is packed with two 16bit ints.
// This program continuously increments those values using floored coordinates.
var source = `
#ifdef GL_ES
precision mediump float;
precision mediump int;
precision mediump sampler2D;
#endif

uniform sampler2D u_gpuData;
const float TEXTURE_WIDTH = ${textureWidth}.0;

float vec2ToInt16(vec2 v) { return clamp(floor(floor(v.r * 255.0) * 256.0) + floor(v.g * 255.0) - 32767.0, -32767.0, 32768.0); }
vec2 int16ToVec2(float f) { f = clamp(f, -32767.0, 32768.0) + 32767.0; return vec2(floor(f / 256.0), f - floor(f / 256.0) * 256.0) / 255.0; }

void main() {
  vec4 texel = texture2D(u_gpuData, gl_FragCoord.xy / TEXTURE_WIDTH);
  float x = mod(vec2ToInt16(texel.rg) + floor(gl_FragCoord.x), TEXTURE_WIDTH);
  float y = mod(vec2ToInt16(texel.ba) + floor(gl_FragCoord.y), TEXTURE_WIDTH);
  gl_FragColor = vec4(int16ToVec2(x), int16ToVec2(y));
}`

// initialize primatives
var target = new gpu.RenderTarget(textureWidth);
var shader = new gpu.ComputeShader(source);

// push some data into texture
var data = new Uint8Array(4 * textureWidth * textureWidth).fill(128);
target.pushTextureData(data);

// loop program using previous output as input
for (var i = 0; i < 4; i++) {
  target.compute(shader, { u_gpuData: target });
  console.log(target.readPixels());
}