shader-bg 0.0.2 → 0.0.3

package/dist/Renderer.d.ts

@@ -7,6 +7,7 @@ export declare class Renderer {
     constructor(gl: WebGLRenderingContext, program: WebGLProgram, uniformsUpdate?: () => void, afterRender?: () => void);
     private setupBuffer;
     private render;
+    setProgram(program: WebGLProgram): void;
     start(): void;
     stop(): void;
 }

package/dist/ShaderBg.d.ts

@@ -15,10 +15,15 @@ export declare class ShaderBg {
     private backBufferManager;
     private mousePos;
     private startTime;
+    private currentVertexShader;
+    private currentFragmentShader;
     private setup_canvas;
     constructor(target: Target, options: OptionsInput);
     private mouse_move;
     private updateCommonUniforms;
+    get fragmentShader(): string;
+    get vertexShader(): string;
+    setShaders(fragmentShader: string, vertexShader?: string): void;
     start(): void;
     stop(): void;
     private resize;

package/dist/UniformManager.d.ts

@@ -11,5 +11,6 @@ export declare class UniformManager {
     private getLocation;
     set(name: string, value: UniformValue): void;
     clear(): void;
+    setProgram(program: WebGLProgram): void;
 }
 export {};

package/dist/shader-bg.cjs

@@ -6,4 +6,4 @@ void main() {
 void main() {
     gl_FragColor = vec4(1.0,.0,.0, 1.0);
 }`,canvas:{class:``,style:document.createElement(`canvas`).style},uniforms:{},backbuffer:{enabled:!1,uniformName:`u_backbuffer`}};function n(e={}){let n=e.backbuffer,r=typeof n==`boolean`?n:n?.enabled??t.backbuffer.enabled;return{vertexShader:e.vertexShader??t.vertexShader,fragmentShader:e.fragmentShader??t.fragmentShader,canvas:{class:e.canvas?.class??t.canvas.class,id:e.canvas?.id??t.canvas.id,style:{...t.canvas.style,...e.canvas?.style}},uniforms:{...t.uniforms,...e.uniforms},backbuffer:{enabled:r,uniformName:typeof n==`object`?n.uniformName??t.backbuffer.uniformName:t.backbuffer.uniformName}}}var r=class{gl;program;vertexShader;fragmentShader;constructor(e,t,n){this.gl=e,this.vertexShader=this.compile(e.VERTEX_SHADER,t),this.fragmentShader=this.compile(e.FRAGMENT_SHADER,n);let r=e.createProgram();if(!r)throw Error(`Failed to create WebGL program`);if(e.attachShader(r,this.vertexShader),e.attachShader(r,this.fragmentShader),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)){let t=e.getProgramInfoLog(r);throw Error(`Program linking failed:
-`+t)}this.program=r}compile(e,t){let n=this.gl.createShader(e);if(!n)throw Error(`Failed to create shader`);if(this.gl.shaderSource(n,t),this.gl.compileShader(n),!this.gl.getShaderParameter(n,this.gl.COMPILE_STATUS)){let t=this.gl.getShaderInfoLog(n),r=e===this.gl.VERTEX_SHADER?`Vertex`:`Fragment`;throw Error(`${r} shader compilation failed:\n${t}`)}return n}use(){this.gl.useProgram(this.program)}dispose(){this.gl.deleteShader(this.vertexShader),this.gl.deleteShader(this.fragmentShader),this.gl.deleteProgram(this.program)}},i=class{gl;program;locations={};textureUnits={};nextTextureUnit=0;maxTextureUnits;constructor(e,t){this.gl=e,this.program=t,this.maxTextureUnits=e.getParameter(e.MAX_COMBINED_TEXTURE_IMAGE_UNITS)}getTextureUnit(e){let t=this.textureUnits[e];if(t!==void 0)return t;if(this.nextTextureUnit>=this.maxTextureUnits)throw Error(`Too many texture uniforms. Max supported is ${this.maxTextureUnits}.`);let n=this.nextTextureUnit;return this.textureUnits[e]=n,this.nextTextureUnit+=1,n}getLocation(e){let t=this.locations[e];if(!t){let n=this.gl.getUniformLocation(this.program,e);if(!n)return null;this.locations[e]=n,t=n}return t}set(e,t){let n=this.getLocation(e);if(typeof t==`number`){this.gl.uniform1f(n,t);return}if(Array.isArray(t)){switch(t.length){case 1:this.gl.uniform1f(n,t[0]);break;case 2:this.gl.uniform2fv(n,t);break;case 3:this.gl.uniform3fv(n,t);break;case 4:this.gl.uniform4fv(n,t);break;case 9:this.gl.uniformMatrix3fv(n,!1,t);break;case 16:this.gl.uniformMatrix4fv(n,!1,t);break;default:throw Error(`Unsupported uniform array length: ${t.length}`)}return}if(t instanceof WebGLTexture){let r=this.getTextureUnit(e);this.gl.activeTexture(this.gl.TEXTURE0+r),this.gl.bindTexture(this.gl.TEXTURE_2D,t),this.gl.uniform1i(n,r);return}throw Error(`Unsupported uniform value type`)}clear(){this.locations={},this.textureUnits={},this.nextTextureUnit=0}},a=class{gl;program;rafId=null;uniformsUpdate;afterRender;constructor(e,t,n,r){this.gl=e,this.program=t,this.uniformsUpdate=n,this.afterRender=r,this.setupBuffer()}setupBuffer(){let e=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,e),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),this.gl.STATIC_DRAW);let t=this.gl.getAttribLocation(this.program,`position`);this.gl.enableVertexAttribArray(t),this.gl.vertexAttribPointer(t,2,this.gl.FLOAT,!1,0,0)}render=()=>{this.uniformsUpdate&&this.uniformsUpdate(),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.afterRender&&this.afterRender(),this.rafId=requestAnimationFrame(this.render)};start(){this.rafId||=requestAnimationFrame(this.render)}stop(){this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}},o=class e{canvas;static observer;static observerMap=new WeakMap;constructor(t,n){e.observer||e.init(),e.observerMap.set(t,n),e.observer.observe(t),this.canvas=t}static init(){this.observer=new ResizeObserver(e=>{for(let t of e){if(!this.observerMap.has(t.target))continue;let e=this.observerMap.get(t.target);e&&e()}})}dispose(){e.observer.unobserve(this.canvas)}},s=class{gl;canvas;texture;enabled=!1;constructor(e,t,n){this.gl=e,this.canvas=t,this.enabled=n}init(){if(!this.enabled)return;let e=this.gl.createTexture();if(!e)throw Error(`Failed to create backbuffer texture`);this.texture=e,this.gl.bindTexture(this.gl.TEXTURE_2D,e),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE)}resize(){this.enabled&&this.texture&&(this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,Math.max(1,this.canvas.width),Math.max(1,this.canvas.height),0,this.gl.RGBA,this.gl.UNSIGNED_BYTE,null))}capture(){this.enabled&&(!this.texture||this.canvas.width===0||this.canvas.height===0||(this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.copyTexSubImage2D(this.gl.TEXTURE_2D,0,0,0,0,0,this.canvas.width,this.canvas.height)))}dispose(){this.enabled&&this.texture&&this.gl.deleteTexture(this.texture)}},c=class{canvas;ownsCanvas=!1;options;gl;program;uniforms;renderer;resizeManager;backBufferManager;mousePos=[0,0];startTime=performance.now();setup_canvas(e){e instanceof HTMLCanvasElement?(this.canvas=e,this.ownsCanvas=!1):(this.canvas=document.createElement(`canvas`),e.appendChild(this.canvas),this.ownsCanvas=!0);let t=this.canvas.getAttribute(`class`)||``;this.canvas.setAttribute(`class`,`${t} ${this.options.canvas.class}`.trim()),this.options.canvas.id&&this.canvas.setAttribute(`id`,this.options.canvas.id),this.canvas.style={...this.canvas.style,...this.options.canvas.style}}constructor(t,c){this.options=n(c);let l=e(t);if(!l)throw Error(`Target element not found: ${t}`);this.setup_canvas(l);let u=this.canvas.getContext(`webgl`);if(!u)throw Error(`WebGL not supported`);this.gl=u,this.program=new r(this.gl,this.options.vertexShader,this.options.fragmentShader),this.program.use(),this.uniforms=new i(this.gl,this.program.program),this.renderer=new a(this.gl,this.program.program,()=>this.updateCommonUniforms(),()=>this.backBufferManager.capture()),this.resizeManager=new o(this.canvas,()=>this.resize()),this.backBufferManager=new s(this.gl,this.canvas,this.options.backbuffer.enabled),this.backBufferManager.init(),this.canvas.addEventListener(`pointermove`,this.mouse_move.bind(this))}mouse_move(e){let t=this.canvas.getBoundingClientRect();this.mousePos=[(e.clientX-t.left)/t.width,1-(e.clientY-t.top)/t.height]}updateCommonUniforms(){let e=(performance.now()-this.startTime)/1e3,t=this.canvas.width,n=this.canvas.height;this.uniforms.set(`u_time`,e),this.uniforms.set(`u_resolution`,[t,n]),this.uniforms.set(`u_mouse`,this.mousePos),this.uniforms.set(`u_scroll`,[window.scrollX/(document.documentElement.scrollWidth-window.innerWidth),window.scrollY/(document.documentElement.scrollTop-window.innerHeight)]),this.backBufferManager.enabled&&this.uniforms.set(this.options.backbuffer.uniformName,this.backBufferManager.texture);for(let[e,t]of Object.entries(this.options.uniforms)){let n=t;typeof t==`function`&&(n=t()),this.uniforms.set(e,n)}}start(){this.resize(),this.renderer.start()}stop(){this.renderer.stop()}resize(){this.canvas.width=this.canvas.clientWidth,this.canvas.height=this.canvas.clientHeight,this.gl.viewport(0,0,this.canvas.width,this.canvas.height),this.backBufferManager.resize()}dispose(){this.stop(),this.program.dispose(),this.uniforms.clear(),this.resizeManager.dispose(),this.backBufferManager.dispose(),this.canvas.removeEventListener(`pointermove`,this.mouse_move.bind(this)),this.ownsCanvas&&this.canvas.remove()}};exports.ShaderBg=c;
+`+t)}this.program=r}compile(e,t){let n=this.gl.createShader(e);if(!n)throw Error(`Failed to create shader`);if(this.gl.shaderSource(n,t),this.gl.compileShader(n),!this.gl.getShaderParameter(n,this.gl.COMPILE_STATUS)){let t=this.gl.getShaderInfoLog(n),r=e===this.gl.VERTEX_SHADER?`Vertex`:`Fragment`;throw Error(`${r} shader compilation failed:\n${t}`)}return n}use(){this.gl.useProgram(this.program)}dispose(){this.gl.deleteShader(this.vertexShader),this.gl.deleteShader(this.fragmentShader),this.gl.deleteProgram(this.program)}},i=class{gl;program;locations={};textureUnits={};nextTextureUnit=0;maxTextureUnits;constructor(e,t){this.gl=e,this.program=t,this.maxTextureUnits=e.getParameter(e.MAX_COMBINED_TEXTURE_IMAGE_UNITS)}getTextureUnit(e){let t=this.textureUnits[e];if(t!==void 0)return t;if(this.nextTextureUnit>=this.maxTextureUnits)throw Error(`Too many texture uniforms. Max supported is ${this.maxTextureUnits}.`);let n=this.nextTextureUnit;return this.textureUnits[e]=n,this.nextTextureUnit+=1,n}getLocation(e){let t=this.locations[e];if(!t){let n=this.gl.getUniformLocation(this.program,e);if(!n)return null;this.locations[e]=n,t=n}return t}set(e,t){let n=this.getLocation(e);if(typeof t==`number`){this.gl.uniform1f(n,t);return}if(Array.isArray(t)){switch(t.length){case 1:this.gl.uniform1f(n,t[0]);break;case 2:this.gl.uniform2fv(n,t);break;case 3:this.gl.uniform3fv(n,t);break;case 4:this.gl.uniform4fv(n,t);break;case 9:this.gl.uniformMatrix3fv(n,!1,t);break;case 16:this.gl.uniformMatrix4fv(n,!1,t);break;default:throw Error(`Unsupported uniform array length: ${t.length}`)}return}if(t instanceof WebGLTexture){let r=this.getTextureUnit(e);this.gl.activeTexture(this.gl.TEXTURE0+r),this.gl.bindTexture(this.gl.TEXTURE_2D,t),this.gl.uniform1i(n,r);return}throw Error(`Unsupported uniform value type`)}clear(){this.locations={},this.textureUnits={},this.nextTextureUnit=0}setProgram(e){this.program=e,this.clear()}},a=class{gl;program;rafId=null;uniformsUpdate;afterRender;constructor(e,t,n,r){this.gl=e,this.program=t,this.uniformsUpdate=n,this.afterRender=r,this.setupBuffer()}setupBuffer(){let e=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,e),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),this.gl.STATIC_DRAW);let t=this.gl.getAttribLocation(this.program,`position`);this.gl.enableVertexAttribArray(t),this.gl.vertexAttribPointer(t,2,this.gl.FLOAT,!1,0,0)}render=()=>{this.uniformsUpdate&&this.uniformsUpdate(),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.afterRender&&this.afterRender(),this.rafId=requestAnimationFrame(this.render)};setProgram(e){this.program=e,this.setupBuffer()}start(){this.rafId||=requestAnimationFrame(this.render)}stop(){this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}},o=class e{canvas;static observer;static observerMap=new WeakMap;constructor(t,n){e.observer||e.init(),e.observerMap.set(t,n),e.observer.observe(t),this.canvas=t}static init(){this.observer=new ResizeObserver(e=>{for(let t of e){if(!this.observerMap.has(t.target))continue;let e=this.observerMap.get(t.target);e&&e()}})}dispose(){e.observer.unobserve(this.canvas)}},s=class{gl;canvas;texture;enabled=!1;constructor(e,t,n){this.gl=e,this.canvas=t,this.enabled=n}init(){if(!this.enabled)return;let e=this.gl.createTexture();if(!e)throw Error(`Failed to create backbuffer texture`);this.texture=e,this.gl.bindTexture(this.gl.TEXTURE_2D,e),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE)}resize(){this.enabled&&this.texture&&(this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,Math.max(1,this.canvas.width),Math.max(1,this.canvas.height),0,this.gl.RGBA,this.gl.UNSIGNED_BYTE,null))}capture(){this.enabled&&(!this.texture||this.canvas.width===0||this.canvas.height===0||(this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.copyTexSubImage2D(this.gl.TEXTURE_2D,0,0,0,0,0,this.canvas.width,this.canvas.height)))}dispose(){this.enabled&&this.texture&&this.gl.deleteTexture(this.texture)}},c=class{canvas;ownsCanvas=!1;options;gl;program;uniforms;renderer;resizeManager;backBufferManager;mousePos=[0,0];startTime=performance.now();currentVertexShader;currentFragmentShader;setup_canvas(e){e instanceof HTMLCanvasElement?(this.canvas=e,this.ownsCanvas=!1):(this.canvas=document.createElement(`canvas`),e.appendChild(this.canvas),this.ownsCanvas=!0);let t=this.canvas.getAttribute(`class`)||``;this.canvas.setAttribute(`class`,`${t} ${this.options.canvas.class}`.trim()),this.options.canvas.id&&this.canvas.setAttribute(`id`,this.options.canvas.id),this.canvas.style={...this.canvas.style,...this.options.canvas.style}}constructor(t,c){this.options=n(c);let l=e(t);if(!l)throw Error(`Target element not found: ${t}`);this.setup_canvas(l);let u=this.canvas.getContext(`webgl`);if(!u)throw Error(`WebGL not supported`);this.gl=u,this.program=new r(this.gl,this.options.vertexShader,this.options.fragmentShader),this.program.use(),this.currentVertexShader=this.options.vertexShader,this.currentFragmentShader=this.options.fragmentShader,this.uniforms=new i(this.gl,this.program.program),this.renderer=new a(this.gl,this.program.program,()=>this.updateCommonUniforms(),()=>this.backBufferManager.capture()),this.resizeManager=new o(this.canvas,()=>this.resize()),this.backBufferManager=new s(this.gl,this.canvas,this.options.backbuffer.enabled),this.backBufferManager.init(),this.canvas.addEventListener(`pointermove`,this.mouse_move.bind(this))}mouse_move(e){let t=this.canvas.getBoundingClientRect();this.mousePos=[(e.clientX-t.left)/t.width,1-(e.clientY-t.top)/t.height]}updateCommonUniforms(){let e=(performance.now()-this.startTime)/1e3,t=this.canvas.width,n=this.canvas.height;this.uniforms.set(`u_time`,e),this.uniforms.set(`u_resolution`,[t,n]),this.uniforms.set(`u_mouse`,this.mousePos),this.uniforms.set(`u_scroll`,[window.scrollX/(document.documentElement.scrollWidth-window.innerWidth),window.scrollY/(document.documentElement.scrollTop-window.innerHeight)]),this.backBufferManager.enabled&&this.uniforms.set(this.options.backbuffer.uniformName,this.backBufferManager.texture);for(let[e,t]of Object.entries(this.options.uniforms)){let n=t;typeof t==`function`&&(n=t()),this.uniforms.set(e,n)}}get fragmentShader(){return this.currentFragmentShader}get vertexShader(){return this.currentVertexShader}setShaders(e,t){let n=t??this.currentVertexShader,i=e,a=this.program,o;try{o=new r(this.gl,n,i)}catch(e){console.error(`[ShaderBg] setShaders failed:`,e);return}o.use(),this.renderer.setProgram(o.program),this.uniforms.setProgram(o.program),this.program=o,this.currentVertexShader=n,this.currentFragmentShader=i,a.dispose()}start(){this.resize(),this.renderer.start()}stop(){this.renderer.stop()}resize(){this.canvas.width=this.canvas.clientWidth,this.canvas.height=this.canvas.clientHeight,this.gl.viewport(0,0,this.canvas.width,this.canvas.height),this.backBufferManager.resize()}dispose(){this.stop(),this.program.dispose(),this.uniforms.clear(),this.resizeManager.dispose(),this.backBufferManager.dispose(),this.canvas.removeEventListener(`pointermove`,this.mouse_move.bind(this)),this.ownsCanvas&&this.canvas.remove()}};exports.ShaderBg=c;

package/dist/shader-bg.js

@@ -144,6 +144,9 @@ var r = class {
 	clear() {
 		this.locations = {}, this.textureUnits = {}, this.nextTextureUnit = 0;
 	}
+	setProgram(e) {
+		this.program = e, this.clear();
+	}
 }, a = class {
 	gl;
 	program;
@@ -175,6 +178,9 @@ var r = class {
 	render = () => {
 		this.uniformsUpdate && this.uniformsUpdate(), this.gl.clear(this.gl.COLOR_BUFFER_BIT), this.gl.drawArrays(this.gl.TRIANGLES, 0, 6), this.afterRender && this.afterRender(), this.rafId = requestAnimationFrame(this.render);
 	};
+	setProgram(e) {
+		this.program = e, this.setupBuffer();
+	}
 	start() {
 		this.rafId ||= requestAnimationFrame(this.render);
 	}
@@ -235,6 +241,8 @@ var r = class {
 	backBufferManager;
 	mousePos = [0, 0];
 	startTime = performance.now();
+	currentVertexShader;
+	currentFragmentShader;
 	setup_canvas(e) {
 		e instanceof HTMLCanvasElement ? (this.canvas = e, this.ownsCanvas = !1) : (this.canvas = document.createElement("canvas"), e.appendChild(this.canvas), this.ownsCanvas = !0);
 		let t = this.canvas.getAttribute("class") || "";
@@ -250,7 +258,7 @@ var r = class {
 		this.setup_canvas(l);
 		let u = this.canvas.getContext("webgl");
 		if (!u) throw Error("WebGL not supported");
-		this.gl = u, this.program = new r(this.gl, this.options.vertexShader, this.options.fragmentShader), this.program.use(), this.uniforms = new i(this.gl, this.program.program), this.renderer = new a(this.gl, this.program.program, () => this.updateCommonUniforms(), () => this.backBufferManager.capture()), this.resizeManager = new o(this.canvas, () => this.resize()), this.backBufferManager = new s(this.gl, this.canvas, this.options.backbuffer.enabled), this.backBufferManager.init(), this.canvas.addEventListener("pointermove", this.mouse_move.bind(this));
+		this.gl = u, this.program = new r(this.gl, this.options.vertexShader, this.options.fragmentShader), this.program.use(), this.currentVertexShader = this.options.vertexShader, this.currentFragmentShader = this.options.fragmentShader, this.uniforms = new i(this.gl, this.program.program), this.renderer = new a(this.gl, this.program.program, () => this.updateCommonUniforms(), () => this.backBufferManager.capture()), this.resizeManager = new o(this.canvas, () => this.resize()), this.backBufferManager = new s(this.gl, this.canvas, this.options.backbuffer.enabled), this.backBufferManager.init(), this.canvas.addEventListener("pointermove", this.mouse_move.bind(this));
 	}
 	mouse_move(e) {
 		let t = this.canvas.getBoundingClientRect();
@@ -264,6 +272,22 @@ var r = class {
 			typeof t == "function" && (n = t()), this.uniforms.set(e, n);
 		}
 	}
+	get fragmentShader() {
+		return this.currentFragmentShader;
+	}
+	get vertexShader() {
+		return this.currentVertexShader;
+	}
+	setShaders(e, t) {
+		let n = t ?? this.currentVertexShader, i = e, a = this.program, o;
+		try {
+			o = new r(this.gl, n, i);
+		} catch (e) {
+			console.error("[ShaderBg] setShaders failed:", e);
+			return;
+		}
+		o.use(), this.renderer.setProgram(o.program), this.uniforms.setProgram(o.program), this.program = o, this.currentVertexShader = n, this.currentFragmentShader = i, a.dispose();
+	}
 	start() {
 		this.resize(), this.renderer.start();
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shader-bg",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "./dist/shader-bg.cjs",
   "module": "./dist/shader-bg.js",