@polygonjs/polygonjs
Version:
node-based WebGL 3D engine https://polygonjs.com
202 lines (201 loc) • 6.96 kB
JavaScript
"use strict";
import {
Camera,
ClampToEdgeWrapping,
FloatType,
NearestFilter,
RGBAFormat,
DataTexture,
Mesh,
PlaneGeometry,
Scene,
ShaderMaterial,
WebGLRenderTarget
} from "three";
import { ref } from "@vue/reactivity";
var GPUComputationRenderer = function(sizeX, sizeY, renderer) {
this.variables = [];
this.currentTextureIndex = 0;
var dataType = FloatType;
var scene = new Scene();
scene.matrixAutoUpdate = false;
var camera = new Camera();
camera.position.z = 1;
camera.matrixAutoUpdate = false;
camera.updateMatrix();
var passThruUniforms = {
passThruTexture: { value: null }
};
var passThruShader = createShaderMaterial(getPassThroughFragmentShader(), passThruUniforms);
const plane = new PlaneGeometry(2, 2);
var mesh = new Mesh(plane, passThruShader);
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add(mesh);
this.dispose = function() {
passThruShader.dispose();
plane.dispose();
};
this.setDataType = function(type) {
dataType = type;
return this;
};
this.addVariable = function(variableName, computeFragmentShader, initialValueTexture) {
var material = this.createShaderMaterial(computeFragmentShader);
var variable = {
name: variableName,
initialValueTexture,
material,
dependencies: null,
renderTargets: [],
wrapS: null,
wrapT: null,
minFilter: NearestFilter,
magFilter: NearestFilter
};
this.variables.push(variable);
return variable;
};
this.setVariableDependencies = function(variable, dependencies) {
variable.dependencies = dependencies;
};
this.init = function() {
if (renderer.capabilities.isWebGL2 === false && renderer.extensions.has("OES_texture_float") === false) {
return "No OES_texture_float support for float textures.";
}
if (renderer.capabilities.maxVertexTextures === 0) {
return "No support for vertex shader textures.";
}
const configRef = {};
for (let i = 0; i < this.variables.length; i++) {
const variable = this.variables[i];
configRef[variable.name] = ref(null);
variable.renderTargets[0] = this.createRenderTarget(
sizeX,
sizeY,
variable.wrapS,
variable.wrapT,
variable.minFilter,
variable.magFilter
);
variable.renderTargets[1] = this.createRenderTarget(
sizeX,
sizeY,
variable.wrapS,
variable.wrapT,
variable.minFilter,
variable.magFilter
);
this.renderTexture(variable.initialValueTexture, variable.renderTargets[0]);
this.renderTexture(variable.initialValueTexture, variable.renderTargets[1]);
var material = variable.material;
var uniforms = material.uniforms;
if (variable.dependencies !== null) {
for (var d = 0; d < variable.dependencies.length; d++) {
var depVar = variable.dependencies[d];
if (depVar.name !== variable.name) {
var found = false;
for (var j = 0; j < this.variables.length; j++) {
if (depVar.name === this.variables[j].name) {
found = true;
break;
}
}
if (!found) {
console.warn(
"Variable dependency not found. Variable=" + variable.name + ", dependency=" + depVar.name
);
return;
}
}
uniforms[depVar.name] = { value: null };
}
}
}
this.currentTextureIndex = 0;
return configRef;
};
this.compute = function(configRef) {
var currentTextureIndex = this.currentTextureIndex;
var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0;
for (var i = 0, il = this.variables.length; i < il; i++) {
var variable = this.variables[i];
if (variable.dependencies !== null) {
var uniforms = variable.material.uniforms;
for (var d = 0, dl = variable.dependencies.length; d < dl; d++) {
var depVar = variable.dependencies[d];
uniforms[depVar.name].value = depVar.renderTargets[currentTextureIndex].texture;
}
}
const renderTarget = variable.renderTargets[nextTextureIndex];
this.doRenderTarget(variable.material, renderTarget);
if (configRef[variable.name]) {
configRef[variable.name].value = renderTarget.texture;
}
}
this.currentTextureIndex = nextTextureIndex;
};
this.getCurrentRenderTarget = function(variable) {
return variable.renderTargets[this.currentTextureIndex];
};
this.getAlternateRenderTarget = function(variable) {
return variable.renderTargets[this.currentTextureIndex === 0 ? 1 : 0];
};
function addResolutionDefine(materialShader) {
materialShader.defines.resolution = "vec2( " + sizeX.toFixed(1) + ", " + sizeY.toFixed(1) + " )";
}
this.addResolutionDefine = addResolutionDefine;
function createShaderMaterial(computeFragmentShader, uniforms) {
uniforms = uniforms || {};
var material = new ShaderMaterial({
uniforms,
vertexShader: getPassThroughVertexShader(),
fragmentShader: computeFragmentShader
});
addResolutionDefine(material);
return material;
}
this.createShaderMaterial = createShaderMaterial;
this.createRenderTarget = function(sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter) {
sizeXTexture = sizeXTexture || sizeX;
sizeYTexture = sizeYTexture || sizeY;
wrapS = wrapS || ClampToEdgeWrapping;
wrapT = wrapT || ClampToEdgeWrapping;
minFilter = minFilter || NearestFilter;
magFilter = magFilter || NearestFilter;
var renderTarget = new WebGLRenderTarget(sizeXTexture, sizeYTexture, {
wrapS,
wrapT,
minFilter,
magFilter,
format: RGBAFormat,
type: dataType,
depthBuffer: false
});
return renderTarget;
};
this.createTexture = function() {
var data = new Float32Array(sizeX * sizeY * 4);
return new DataTexture(data, sizeX, sizeY, RGBAFormat, FloatType);
};
this.renderTexture = function(input, output) {
passThruUniforms.passThruTexture.value = input;
this.doRenderTarget(passThruShader, output);
passThruUniforms.passThruTexture.value = null;
};
this.doRenderTarget = function(material, output) {
var currentRenderTarget = renderer.getRenderTarget();
mesh.material = material;
renderer.setRenderTarget(output);
renderer.render(scene, camera);
mesh.material = passThruShader;
renderer.setRenderTarget(currentRenderTarget);
};
function getPassThroughVertexShader() {
return "void main() {\n\n gl_Position = vec4( position, 1.0 );\n\n}\n";
}
function getPassThroughFragmentShader() {
return "uniform sampler2D passThruTexture;\n\nvoid main() {\n\n vec2 uv = gl_FragCoord.xy / resolution.xy;\n\n gl_FragColor = texture2D( passThruTexture, uv );\n\n}\n";
}
};
export { GPUComputationRenderer };