phoria2 1.0.0-rc.5 → 1.0.0-rc.7

package/README.md

@@ -4,10 +4,15 @@ Small, friendly 3D for the web. A WebGL 2 renderer with PBR materials, instancin
 labels, picking and particles, behind an API small enough to learn in an afternoon - aimed at
 business apps: charts, labelled scenes, diagrams, dashboards and product viewers.
 
-- **Small**: about 46 KB gzipped for a lit, interactive scene; charts, particles and glTF are
-  separate imports, and the heavier parts (shadows, HDR environments, GPU picking) load only when used.
+- **Small**: about 57 KB gzipped for a lit, interactive scene, and about 116 KB for everything;
+  charts, particles, glTF, motion and editing are separate imports, and the heavier parts (shadows,
+  HDR environments, GPU picking) load only when used.
 - **Idle when nothing changes**: a view draws only when something in it changed, so a dashboard of
   many views only updates when needed.
+- **Any number of views on a page**: browsers allow about 16 WebGL contexts per page, so most
+  libraries need one big canvas and scissoring for a dashboard of tiles. phoria2 gives the first four
+  views their own context and draws the rest with one shared context, each still an ordinary canvas
+  in your layout. The chart lab demo runs over 100 live chart views.
 - **Tells you what to write**: every option is checked, and a mistake throws an error that names
   the fix - pass `colour` and you get `Material: use 'color'`. Written to be easy for coding
   agents too.
@@ -51,12 +56,12 @@ own). Pin the version so a new release can't change your page:
 <script type="importmap">
 {
   "imports": {
-    "phoria2": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.5/dist/phoria2.js",
-    "phoria2/charts": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.5/dist/charts.js",
-    "phoria2/particles": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.5/dist/particles.js",
-    "phoria2/gltf": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.5/dist/gltf.js",
-    "phoria2/motion": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.5/dist/motion.js",
-    "phoria2/edit": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.5/dist/edit.js"
+    "phoria2": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.7/dist/phoria2.js",
+    "phoria2/charts": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.7/dist/charts.js",
+    "phoria2/particles": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.7/dist/particles.js",
+    "phoria2/gltf": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.7/dist/gltf.js",
+    "phoria2/motion": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.7/dist/motion.js",
+    "phoria2/edit": "https://cdn.jsdelivr.net/npm/phoria2@1.0.0-rc.7/dist/edit.js"
   }
 }
 </script>

package/dist/bloom.js

@@ -39,44 +39,43 @@ fragColor = vec4(linearToSrgb(c), a);
 }
 `, a = [e, n], o = [e, r], s = [e, i], c = 6, l = class {
 	#e = null;
-	#t = null;
-	#n = !1;
+	#t = !1;
 	constructor(e, t) {
 		this.gl = e, this.programs = t, this.reset();
 	}
 	reset() {
-		this.#e = null, this.#t = null, this.#n = !!this.gl.getExtension("EXT_color_buffer_float");
+		this.#e = null, this.#t = !!this.gl.getExtension("EXT_color_buffer_float");
 	}
 	dispose() {
-		this.#i(), this.#e = null;
+		this.#r(), this.#e = null;
 	}
 	begin(e, t) {
-		let n = this.gl, r = this.#r(e, t);
+		let n = this.gl, r = this.#n(e, t);
 		n.bindFramebuffer(n.FRAMEBUFFER, r.multisampled), n.viewport(0, 0, e, t);
 	}
 	end(e) {
 		let t = this.gl, n = this.#e, { width: r, height: i, levels: c } = n;
-		t.bindFramebuffer(t.READ_FRAMEBUFFER, n.multisampled), t.bindFramebuffer(t.DRAW_FRAMEBUFFER, n.resolved), t.blitFramebuffer(0, 0, r, i, 0, 0, r, i, t.COLOR_BUFFER_BIT, t.NEAREST), t.bindFramebuffer(t.READ_FRAMEBUFFER, null), t.bindFramebuffer(t.DRAW_FRAMEBUFFER, null), t.disable(t.DEPTH_TEST), t.disable(t.CULL_FACE), t.disable(t.BLEND), t.depthMask(!1), t.bindVertexArray(this.#a());
+		t.bindFramebuffer(t.READ_FRAMEBUFFER, n.multisampled), t.bindFramebuffer(t.DRAW_FRAMEBUFFER, n.resolved), t.blitFramebuffer(0, 0, r, i, 0, 0, r, i, t.COLOR_BUFFER_BIT, t.NEAREST), t.bindFramebuffer(t.READ_FRAMEBUFFER, null), t.bindFramebuffer(t.DRAW_FRAMEBUFFER, null), t.disable(t.DEPTH_TEST), t.disable(t.CULL_FACE), t.disable(t.BLEND), t.depthMask(!1);
 		let l = this.programs.ready("bloom-down", [], a);
 		t.useProgram(l.program);
 		let u = n.picture, d = r, f = i;
 		c.forEach((n, r) => {
-			t.bindFramebuffer(t.FRAMEBUFFER, n.framebuffer), t.viewport(0, 0, n.width, n.height), l.set("uSource", u), l.set("uTexel", [1 / d, 1 / f]), l.set("uThreshold", r === 0 ? Math.max(0, e.threshold) : -1), t.drawArrays(t.TRIANGLES, 0, 3), u = n.texture, d = n.width, f = n.height;
+			t.bindFramebuffer(t.FRAMEBUFFER, n.framebuffer), t.viewport(0, 0, n.width, n.height), l.set("uSource", u), l.set("uTexel", [1 / d, 1 / f]), l.set("uThreshold", r === 0 ? Math.max(0, e.threshold) : -1), this.programs.drawFullscreen(), u = n.texture, d = n.width, f = n.height;
 		});
 		let p = this.programs.ready("bloom-up", [], o);
 		t.useProgram(p.program), t.enable(t.BLEND), t.blendFunc(t.ONE, t.ONE);
 		let m = Math.min(1, Math.max(0, e.radius));
 		for (let e = c.length - 1; e > 0; e--) {
 			let n = c[e], r = c[e - 1];
-			t.bindFramebuffer(t.FRAMEBUFFER, r.framebuffer), t.viewport(0, 0, r.width, r.height), p.set("uSource", n.texture), p.set("uTexel", [1 / n.width, 1 / n.height]), p.set("uWeight", m), t.drawArrays(t.TRIANGLES, 0, 3);
+			t.bindFramebuffer(t.FRAMEBUFFER, r.framebuffer), t.viewport(0, 0, r.width, r.height), p.set("uSource", n.texture), p.set("uTexel", [1 / n.width, 1 / n.height]), p.set("uWeight", m), this.programs.drawFullscreen();
 		}
 		t.disable(t.BLEND), t.bindFramebuffer(t.FRAMEBUFFER, null), t.viewport(0, 0, r, i);
 		let h = this.programs.ready("bloom-composite", [], s);
-		t.useProgram(h.program), h.set("uScene", n.picture), h.set("uBloom", c[0].texture), h.set("uStrength", Math.max(0, e.strength)), t.drawArrays(t.TRIANGLES, 0, 3), t.depthMask(!0), t.enable(t.DEPTH_TEST), t.bindVertexArray(null);
+		t.useProgram(h.program), h.set("uScene", n.picture), h.set("uBloom", c[0].texture), h.set("uStrength", Math.max(0, e.strength)), this.programs.drawFullscreen(), t.depthMask(!0), t.enable(t.DEPTH_TEST), t.bindVertexArray(null);
 	}
-	#r(e, t) {
+	#n(e, t) {
 		if (this.#e && this.#e.width === e && this.#e.height === t) return this.#e;
-		this.#i();
+		this.#r();
 		let n = this.gl, r = Math.min(4, n.getParameter(n.MAX_SAMPLES)), i = n.createFramebuffer();
 		n.bindFramebuffer(n.FRAMEBUFFER, i);
 		let a = n.createRenderbuffer();
@@ -94,7 +93,7 @@ fragColor = vec4(linearToSrgb(c), a);
 				height: t
 			};
 		}, l = s(e, t, n.RGBA8), u = [], d = e, f = t;
-		for (let e = 0; e < c && (d = Math.max(1, d >> 1), f = Math.max(1, f >> 1), !(e > 1 && Math.min(d, f) < 8)); e++) u.push(s(d, f, this.#n ? n.RGBA16F : n.RGBA8));
+		for (let e = 0; e < c && (d = Math.max(1, d >> 1), f = Math.max(1, f >> 1), !(e > 1 && Math.min(d, f) < 8)); e++) u.push(s(d, f, this.#t ? n.RGBA16F : n.RGBA8));
 		return n.bindFramebuffer(n.FRAMEBUFFER, null), n.bindRenderbuffer(n.RENDERBUFFER, null), this.#e = {
 			width: e,
 			height: t,
@@ -105,7 +104,7 @@ fragColor = vec4(linearToSrgb(c), a);
 			levels: u
 		}, this.#e;
 	}
-	#i() {
+	#r() {
 		let e = this.#e;
 		if (!e) return;
 		let t = this.gl;
@@ -114,9 +113,6 @@ fragColor = vec4(linearToSrgb(c), a);
 		t.deleteFramebuffer(e.resolved), t.deleteTexture(e.picture);
 		for (let n of e.levels) t.deleteFramebuffer(n.framebuffer), t.deleteTexture(n.texture);
 	}
-	#a() {
-		return this.#t ||= this.gl.createVertexArray(), this.#t;
-	}
 };
 export { l as Bloom };
 

package/dist/bloom.js.map

@@ -1 +1 @@
-{"version":3,"file":"bloom.js","names":["FULLSCREEN_VERTEX","COMMON","DOWN_FRAGMENT","UP_FRAGMENT","COMPOSITE_FRAGMENT","DOWN","UP","COMPOSITE","LEVELS","Bloom","gl","programs","#target","#empty","#float","#free","target","#targetFor","width","height","#emptyArray","down","source","sw","sh","level","i","settings","up","weight","levels","from","to","composite","samples","multisampled","color","depth","texture","t","format","w","h","framebuffer","picture","b"],"sources":[],"mappings":""}
+{"version":3,"file":"bloom.js","names":["FULLSCREEN_VERTEX","COMMON","DOWN_FRAGMENT","UP_FRAGMENT","COMPOSITE_FRAGMENT","DOWN","UP","COMPOSITE","LEVELS","Bloom","gl","programs","#target","#float","#free","target","#targetFor","width","height","down","source","sw","sh","level","i","settings","up","weight","levels","from","to","composite","samples","multisampled","color","depth","texture","t","format","w","h","framebuffer","picture","b"],"sources":[],"mappings":""}