@pirireis/webglobeplugins 0.17.1 → 1.0.2

package/programs/vectorfields/logics/drawrectangleparticles.ts

@@ -0,0 +1,182 @@
+import { createProgram } from "../../../util/webglobjectbuilders";
+import { glProgramCache } from "../../programcache";
+import { ParticleUBO } from "./particle-ubo";
+
+/**
+ * [+] ubo 
+ */
+
+const vertexShaderSource = `#version 300 es
+precision highp float;
+`+ ParticleUBO.glslCode() + `
+uniform sampler2D u_vector_field;
+uniform sampler2D u_color_field;
+uniform sampler2D u_speed_field;
+in vec2 in_position;
+out vec4 base_color;
+
+
+vec2 read_value(const vec2 uv) {
+    vec2 value = texture(u_vector_field, uv).rg;
+    if ( value.x == escape_value || value.y == escape_value) {
+        return vec2(0.0);
+    }
+    return value;
+}
+    
+
+vec2 lookup_wind(const vec2 uv) { // gerek kalmayabilir. sampler linear methodu ayni isi yapiyor 
+    // return texture(u_vector_field, uv).rg; // lower-res hardware filtering
+    vec2 res = vec2(textureSize(u_vector_field, 0));
+    vec2 px = 1.0 / res;
+    vec2 vc = (floor(uv * res)) * px;
+    vec2 f = fract(uv * res);
+    vec2 tl = read_value(vc).rg;
+    vec2 tr = read_value(vc + vec2(px.x, 0)).rg;
+    vec2 bl = read_value(vc + vec2(0, px.y)).rg;
+    vec2 br = read_value(vc + px).rg;
+
+    return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
+}
+
+
+void main(){
+    if ( use_speed_field != 0.0 ) {
+        base_color = vec4(0.0);
+        return;
+        float speed = texture(u_speed_field, in_position).r;
+        if ( speed < min_speed_threshold || speed > max_speed_threshold ) {
+            base_color = vec4(0.0);
+            return;
+        }
+    }
+
+    vec2 direction_vector = lookup_wind(in_position);    
+    if (direction_vector.r == 0.0 && direction_vector.g == 0.0) return;
+    
+
+    vec2 limp;
+    if ( 0 == gl_VertexID) { limp = -tail_wing_base_limp; }
+    else if ( 1 == gl_VertexID) { limp = vec2( tail_wing_base_limp.x, -tail_wing_base_limp.y); }
+    else if ( 2 == gl_VertexID) { limp = tail_wing_base_limp; }
+    else  { limp = vec2(-tail_wing_base_limp.x,  tail_wing_base_limp.y); } 
+    limp = (limp  * mat2( 
+        direction_vector.x, -direction_vector.y,
+        direction_vector.y, direction_vector.x)) / draw_texture_size;
+
+    vec2 pos = in_position * 2.0 - 1.0;
+    gl_Position = vec4(pos + limp, 0.0, 1.0);
+    
+    base_color = use_color_field != 0.0 ? texture(u_color_field, in_position).rgba : vec4(color, 1.0);
+}`;
+
+
+const fragmentShaderSource = `#version 300 es
+precision highp float;
+out vec4 outColor;
+in vec4 base_color;
+void main(){
+    outColor = base_color;
+}`;
+
+
+export class DrawRectangleParticleProgram {
+    private gl: WebGL2RenderingContext;
+    private program: WebGLProgram;
+    private _vector_field_location: WebGLUniformLocation;
+    private _color_texture_location: WebGLUniformLocation;
+    private _speed_field_location: WebGLUniformLocation;
+    constructor(gl: WebGL2RenderingContext) {
+        this.gl = gl;
+        // this.decoyBuffer = new DecoyBufferManager(gl);
+        const { program, _vector_field_location, _color_texture_location, _speed_field_location } = this._createProgram();
+        this.program = program;
+        this._vector_field_location = _vector_field_location;
+        this._color_texture_location = _color_texture_location;
+        this._speed_field_location = _speed_field_location;
+    }
+
+    private _createProgram(): {
+        program: WebGLProgram;
+        _vector_field_location: WebGLUniformLocation;
+        _color_texture_location: WebGLUniformLocation;
+        _speed_field_location: WebGLUniformLocation;
+
+    } {
+        const gl = this.gl;
+        const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
+        // ubo point
+        // const ubo_location = gl.getUniformBlockIndex(program, 'UBO');
+        // gl.uniformBlockBinding(program, ubo_location, UBO_BINDING_POINT);
+        ParticleUBO.assignBindingPoint(gl, program);
+        return {
+            program,
+            _vector_field_location: gl.getUniformLocation(program, 'u_vector_field')!,
+            _color_texture_location: gl.getUniformLocation(program, 'u_color_field')!,
+            _speed_field_location: gl.getUniformLocation(program, 'u_speed_field')!
+        };
+
+    }
+
+    /**
+     * @param bufferManager | PingPongBufferManager
+     * @param vectorFieldTexture | RG32F texture R: x, G: y
+     * @param uboManager | WaveParticalUboManager under ubo.js
+     */
+    draw(
+        bufferManager: any,
+        vectorFieldTexture: WebGLTexture,
+        uboManager: any,
+        colorFieldTexture: WebGLTexture | undefined | null,
+        speedFieldTexture: WebGLTexture | undefined | null
+    ): void {
+        const { gl, program } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(bufferManager.getSourceVao());
+        // gl.bindVertexArray(this.decoyBuffer.getSourceVao());
+
+        uboManager.bind();
+        if (colorFieldTexture) {
+            gl.activeTexture(gl.TEXTURE1);
+            gl.uniform1i(this._color_texture_location, 1);
+            gl.bindTexture(
+                gl.TEXTURE_2D,
+                colorFieldTexture
+            );
+        }
+        if (speedFieldTexture) {
+            gl.activeTexture(gl.TEXTURE2);
+            gl.uniform1i(this._speed_field_location, 2);
+            gl.bindTexture(
+                gl.TEXTURE_2D,
+                speedFieldTexture
+            );
+        }
+
+        gl.activeTexture(gl.TEXTURE0);
+        gl.uniform1i(this._vector_field_location, 0);
+        gl.bindTexture(
+            gl.TEXTURE_2D,
+            vectorFieldTexture
+        );
+
+        gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, 4, bufferManager.length);
+        gl.drawArraysInstanced(gl.POINTS, 0, 4, bufferManager.length);
+        gl.bindVertexArray(null);
+        uboManager.unbind();
+    }
+
+    free(): void {
+        this.gl.deleteProgram(this.program);
+        this.program = null!;
+    }
+}
+
+export const drawRectangleParticlesProgramCache = Object.freeze({
+    getProgram: (gl: WebGL2RenderingContext): DrawRectangleParticleProgram => {
+        return glProgramCache.getProgram(gl, DrawRectangleParticleProgram);
+    },
+    releaseProgram: (gl: WebGL2RenderingContext): void => {
+        glProgramCache.releaseProgram(gl, DrawRectangleParticleProgram);
+    }
+});

package/programs/vectorfields/logics/index.js

@@ -1,2 +1,4 @@
-import { WaveParticalUboManager } from './ubo';
-export { WaveParticalUboManager };
+
+import { WaveParticalUboManager } from './ubo';
+
+export { WaveParticalUboManager };

package/programs/vectorfields/logics/particle-ubo.ts

@@ -0,0 +1,23 @@
+import { UBO_BINDING_POINTS } from "./constants";
+import { UniformBlockManager } from "../../../util/gl-util/uniform-block/manager";
+
+
+const INITIAL_UBO_DATA = /*@__PURE__*/ new Float32Array([93.17, 0.2, 1.0, 7.0, 1.0, 1.0, 1.0, 0.05, 2000, 2000, 0]);
+
+export const ParticleUBO = /*@__PURE__*/ new UniformBlockManager(
+    "Seawave_UBO",
+    [
+        { name: "tail_wing_base_limp", type: "vec2", value: INITIAL_UBO_DATA.slice(2, 4) },
+        { name: "draw_texture_size", type: "vec2", value: INITIAL_UBO_DATA.slice(8, 10) },
+        { name: "random_seed", type: "float", value: INITIAL_UBO_DATA.slice(0, 1) },
+        { name: "range", type: "float", value: INITIAL_UBO_DATA.slice(1, 2) },
+        { name: "escape_value", type: "float", value: INITIAL_UBO_DATA.slice(10, 11) },
+        { name: "drop_rate", type: "float", value: INITIAL_UBO_DATA.slice(7, 8) },
+        { name: "color", type: "vec3", value: INITIAL_UBO_DATA.slice(4, 7) },
+        { name: "use_color_field", type: "float", value: new Float32Array([0]) },
+        { name: "use_speed_field", type: "float", value: new Float32Array([0]) },
+        { name: "min_speed_threshold", type: "float", value: new Float32Array([0]) },
+        { name: "max_speed_threshold", type: "float", value: new Float32Array([10000]) },
+    ],
+    UBO_BINDING_POINTS.SEAWAVE,
+);

package/programs/vectorfields/logics/{pixelbased.js → pixelbased.ts}

@@ -1,22 +1,27 @@
-import { createShader } from "../../../util/webglobjectbuilders";
-import { glProgramCache } from "../../programcache";
-import { SeaWaveUbo } from "./ubo-new";
-// program output is buffer
-// TODO: Mechanism for randomness
-//  drop out mechanism
-//  random particle position mechanism
+import { createShader } from "../../../util/webglobjectbuilders";
+import { glProgramCache } from "../../programcache";
+import { ParticleUBO } from "./particle-ubo";
+
+interface PingPongBufferManager {
+    getSourceVao(): WebGLVertexArrayObject;
+    getTargetTF(): WebGLTransformFeedback;
+    length: number;
+}
+
+interface WaveParticalUboManager {
+    bind(): void;
+    unbind(): void;
+}
+
+
 const vertexShaderSource = `#version 300 es
-` + SeaWaveUbo.glslCode() + `
+` + ParticleUBO.glslCode() + `
 
 uniform sampler2D vector_field;
+uniform sampler2D speed_field;
 in vec2 in_position;
 out vec2 out_position;
 
-// float random(vec2 st){
-//     float t = dot(st, vec2(12.9898,78.233));
-//     return fract(sin(t) * (t+43758.5453123));
-// }
-
 
 const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);
 float random(const vec2 co) {
@@ -47,15 +52,10 @@ vec2 lookup_wind(const vec2 uv) {
     return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
 }
 
-
-
-
-
 vec2 random_position(vec2 st){
     return vec2(random(st), random(st + 1.0));
 }
 
-
 void main(){
     vec2 vec = lookup_wind(in_position).xy;
     if (vec.x == 0.0 && vec.y == 0.0){
@@ -67,73 +67,108 @@ void main(){
         out_position = random_position(in_position);
         return;
     }
-    out_position = in_position + (vec / draw_texture_size)  * range;
+    float speed_multiplier = use_speed_field != 0.0 ? texture(speed_field, in_position).r : 1.0;
+    out_position = in_position + (vec / draw_texture_size)  * range * speed_multiplier * tail_wing_base_limp.y;
 }
-`;
+`;
+
 const fragmentShaderSource = `#version 300 es
 precision highp float;
 void main(){
-}`;
-class Logic {
-    constructor(gl) {
-        this.gl = gl;
-        [this.program, this._vector_field_location] = this._createProgram();
-    }
-    /**
-     * @param {*} bufferManager | PingPongBufferManager
-     * @param {*} vectorTexture RG32F texture R: x, G: y
-     * @param {*} uboManager | WaveParticalUboManager under ubo.js
-     */
-    move(bufferManager, vectorTexture, uboManager) {
-        const { gl, program, _vector_field_location } = this;
-        gl.useProgram(program);
-        gl.enable(gl.RASTERIZER_DISCARD);
-        gl.bindVertexArray(bufferManager.getSourceVao());
-        gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, bufferManager.getTargetTF());
-        gl.beginTransformFeedback(gl.POINTS);
-        uboManager.bind();
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, vectorTexture);
-        gl.uniform1i(_vector_field_location, 0);
-        gl.drawArraysInstanced(gl.POINTS, 0, 1, bufferManager.length);
-        gl.endTransformFeedback();
-        gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
-        gl.bindVertexArray(null);
-        uboManager.unbind();
-        gl.disable(gl.RASTERIZER_DISCARD);
-    }
-    // -- private methods
-    _createProgram() {
-        const gl = this.gl;
-        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
-        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
-        const program = gl.createProgram();
-        gl.attachShader(program, vertexShader);
-        gl.attachShader(program, fragmentShader);
-        gl.transformFeedbackVaryings(program, ["out_position"], gl.SEPARATE_ATTRIBS);
-        gl.linkProgram(program);
-        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-            throw new Error(gl.getProgramParameter(program));
-        }
-        // const ubo_location = gl.getUniformBlockIndex(program, 'UBO');
-        // gl.uniformBlockBinding(program, ubo_location, UBO_BINDING_POINT);
-        SeaWaveUbo.assignBindingPoint(gl, program, 0);
-        return [program, gl.getUniformLocation(program, 'vector_field')];
-        ;
-    }
-    free() {
-        this.gl.deleteProgram(this.program);
-        this.program = null;
-    }
-    getInPositionLocation() {
-        return this.gl.getAttribLocation(this.program, 'in_position');
-    }
-}
-export const pixelBasedMoveProgramCache = Object.freeze({
-    getProgram: (gl) => {
-        return glProgramCache.getProgram(gl, Logic);
-    },
-    releaseProgram: (gl) => {
-        glProgramCache.releaseProgram(gl, Logic);
-    }
-});
+}`;
+
+export class MoveParticalProgram {
+    public readonly gl: WebGL2RenderingContext;
+    public program: WebGLProgram | null;
+    private readonly _vector_field_location!: WebGLUniformLocation;
+    private readonly _speed_field_location!: WebGLUniformLocation;
+    constructor(gl: WebGL2RenderingContext) {
+        this.gl = gl;
+        [this.program, this._vector_field_location, this._speed_field_location] = this._createProgram();
+    }
+
+    /**
+     * @param bufferManager - PingPongBufferManager
+     * @param vectorTexture - RG32F texture R: x, G: y
+     * @param uboManager - WaveParticalUboManager under ubo.js
+     */
+    public move(
+        bufferManager: PingPongBufferManager,
+        vectorTexture: WebGLTexture,
+        uboManager: WaveParticalUboManager,
+        speedTexture?: WebGLTexture
+    ): void {
+        const { gl, program, _vector_field_location } = this;
+        if (!program) return;
+
+        gl.useProgram(program);
+        gl.enable(gl.RASTERIZER_DISCARD);
+        gl.bindVertexArray(bufferManager.getSourceVao());
+        gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, bufferManager.getTargetTF());
+        gl.beginTransformFeedback(gl.POINTS);
+        uboManager.bind();
+        if (speedTexture) {
+            gl.activeTexture(gl.TEXTURE1);
+            gl.bindTexture(gl.TEXTURE_2D, speedTexture);
+            gl.uniform1i(this._speed_field_location, 1);
+        }
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, vectorTexture);
+        gl.uniform1i(_vector_field_location, 0);
+        gl.drawArraysInstanced(gl.POINTS, 0, 1, bufferManager.length);
+        gl.endTransformFeedback();
+        gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
+        gl.bindVertexArray(null);
+        uboManager.unbind();
+        gl.disable(gl.RASTERIZER_DISCARD);
+    }
+
+    public free(): void {
+        if (this.program) {
+            this.gl.deleteProgram(this.program);
+            this.program = null;
+        }
+    }
+
+    public getInPositionLocation(): number {
+        if (!this.program) return -1;
+        return this.gl.getAttribLocation(this.program, 'in_position');
+    }
+
+    // -- private methods
+
+    private _createProgram(): [WebGLProgram, WebGLUniformLocation, WebGLUniformLocation] {
+        const gl = this.gl;
+        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+        const program = gl.createProgram()!;
+        gl.attachShader(program, vertexShader);
+        gl.attachShader(program, fragmentShader);
+        gl.transformFeedbackVaryings(
+            program,
+            ["out_position"],
+            gl.SEPARATE_ATTRIBS
+        );
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(gl.getProgramInfoLog(program) || 'Program link failed');
+        }
+        // const ubo_location = gl.getUniformBlockIndex(program, 'UBO');
+        // gl.uniformBlockBinding(program, ubo_location, UBO_BINDING_POINT);
+        ParticleUBO.assignBindingPoint(gl, program);
+        return [
+            program,
+            gl.getUniformLocation(program, 'vector_field')!,
+            gl.getUniformLocation(program, 'speed_field')!,
+        ];
+    }
+}
+
+export const pixelBasedMoveProgramCache = Object.freeze({
+    getProgram: (gl: WebGL2RenderingContext): MoveParticalProgram => {
+        return glProgramCache.getProgram(gl, MoveParticalProgram);
+    },
+    releaseProgram: (gl: WebGL2RenderingContext): void => {
+        glProgramCache.releaseProgram(gl, MoveParticalProgram);
+    }
+});

package/programs/vectorfields/logics/ubo.js

@@ -1,5 +1,5 @@
-const UBO_BINDING_POINT = 0;
-const INITIAL_UBO_DATA = new Float32Array([93.17, 0.2, 1.0, 7.0, 1.0, 1.0, 1.0, 0.05, 2000, 2000, -9999]);
+const UBO_BINDING_POINT = 0;
+const INITIAL_UBO_DATA = new Float32Array([93.17, 0.2, 1.0, 7.0, 1.0, 1.0, 1.0, 0.05, 2000, 2000, -9999]);
 const shaderUboSource = `
 layout(std140) uniform UBO {
     float random_seed; 
@@ -9,52 +9,58 @@ layout(std140) uniform UBO {
     float drop_rate; 
     vec2 draw_texture_size; 
     float escape_value; 
-};`;
-const UBO_SIZE = 44;
-class WaveParticalUboManager {
-    constructor(gl) {
-        this.gl = gl;
-        this.ubo = this._createBuffer();
-        this._data = null;
-    }
-    update({ range, random_seed, tail_wing_base_limp, draw_texture_size, drop_rate, color, escape_value }) {
-        const { gl, ubo } = this;
-        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
-        if (random_seed !== undefined)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([random_seed]));
-        if (range !== undefined)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 4, new Float32Array([range]));
-        if (tail_wing_base_limp !== undefined)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 8, new Float32Array(tail_wing_base_limp));
-        if (color !== undefined)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 16, new Float32Array(color));
-        if (drop_rate !== undefined)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 28, new Float32Array([drop_rate]));
-        if (draw_texture_size !== undefined)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 32, new Float32Array(draw_texture_size));
-        if (escape_value !== undefined)
-            gl.bufferSubData(gl.UNIFORM_BUFFER, 40, new Float32Array([escape_value]));
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-    }
-    _createBuffer() {
-        const gl = this.gl;
-        const buffer = gl.createBuffer();
-        gl.bindBuffer(gl.UNIFORM_BUFFER, buffer);
-        gl.bufferData(gl.UNIFORM_BUFFER, INITIAL_UBO_DATA, gl.STATIC_DRAW);
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
-        return buffer;
-    }
-    bind() {
-        const { gl, ubo } = this;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, UBO_BINDING_POINT, ubo);
-    }
-    unbind() {
-        const gl = this.gl;
-        gl.bindBufferBase(gl.UNIFORM_BUFFER, UBO_BINDING_POINT, null);
-    }
-    free() {
-        const { gl, _buffer } = this;
-        gl.deleteBuffer(_buffer);
-    }
-}
-export { WaveParticalUboManager, UBO_SIZE, UBO_BINDING_POINT, shaderUboSource };
+};`;
+
+const UBO_SIZE = 44;
+
+class WaveParticalUboManager {
+
+    constructor(gl) {
+        this.gl = gl;
+        this.ubo = this._createBuffer();
+        this._data = null;
+    }
+
+
+    update({ range, random_seed, tail_wing_base_limp, draw_texture_size, drop_rate, color, escape_value }) {
+        const { gl, ubo } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
+        if (random_seed !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([random_seed]));
+        if (range !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 4, new Float32Array([range]));
+        if (tail_wing_base_limp !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 8, new Float32Array(tail_wing_base_limp));
+        if (color !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 16, new Float32Array(color));
+        if (drop_rate !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 28, new Float32Array([drop_rate]));
+        if (draw_texture_size !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 32, new Float32Array(draw_texture_size));
+        if (escape_value !== undefined) gl.bufferSubData(gl.UNIFORM_BUFFER, 40, new Float32Array([escape_value]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+
+    _createBuffer() {
+        const gl = this.gl;
+        const buffer = gl.createBuffer();
+        gl.bindBuffer(gl.UNIFORM_BUFFER, buffer);
+        gl.bufferData(gl.UNIFORM_BUFFER, INITIAL_UBO_DATA, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        return buffer;
+    }
+
+
+    bind() {
+        const { gl, ubo } = this;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, UBO_BINDING_POINT, ubo);
+    }
+
+    unbind() {
+        const gl = this.gl;
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, UBO_BINDING_POINT, null);
+    }
+
+    free() {
+        const { gl, _buffer } = this;
+        gl.deleteBuffer(_buffer);
+    }
+}
+
+export { WaveParticalUboManager, UBO_SIZE, UBO_BINDING_POINT, shaderUboSource };