@streaming-cdn/rtc-web 1.3.25 → 1.3.26

package/README.md

@@ -1,4 +1,4 @@
-# RTC Web SDK 1.3.25
+# RTC Web SDK 1.3.26
 
 The customer package contains compiled ESM/UMD JavaScript and TypeScript declarations. It intentionally excludes implementation source and source maps. Example source remains available under `examples/`.
 
@@ -357,6 +357,20 @@ operational diagnostics. Tokens, SDP, media, and chat content are never part of
 that report. Set `reportSignalingDiagnostics: false` only when replacing this
 with an application-owned diagnostics pipeline.
 
+## 1.3.26 notes
+
+- **VRM avatars are framed from the model's own measurements.** The bust
+  camera in `avatar-vrm` was fixed at a 0.42 m window aimed at the head
+  joint — which sits at the *bottom* of the skull — so characters with tall
+  hair or accessories had their crowns cropped, and big-headed models filled
+  the whole canvas and rendered far larger than the built-in avatar when
+  overlaid. `createVrmStage` now measures each model (head joint from the
+  humanoid, crown from the scene bounds, hair included) and frames the bust
+  so the skull spans ~38% of the canvas with its centre at 42% from the top —
+  the exact contract `vrmAvatarRenderer`'s overlay math expects. Every
+  character now appears the same size as the built-in stylized avatar,
+  whatever its proportions. The framing rule is exported as `frameVrmBust()`.
+
 ## 1.3.25 notes
 
 - **B21 — per-peer quality no longer ratchets down on bandwidth-pinned

package/dist/avatar-vrm.d.ts

@@ -9,6 +9,29 @@ export interface VrmStage {
     applyAndRender(rig: AvatarRig, options?: VrmRenderOptions): void;
     dispose(): void;
 }
+/**
+ * Bust framing computed from the model's own measurements.
+ *
+ * Characters do not share proportions: the head joint sits at the bottom of
+ * the skull, and between a chibi and a tall model the joint-to-crown distance
+ * (hair and accessories included) spans several fold. A fixed camera cropped
+ * tall hair off and let big heads fill the whole canvas, which the overlay
+ * then multiplied into an avatar larger than the screen.
+ *
+ * The contract with `vrmAvatarRenderer` is proportional: the skull spans
+ * roughly 38% of the canvas (2 of the 5.2 head radii the overlay paints) with
+ * its centre at 42% from the top — the same size and seat as the built-in
+ * stylized head, so switching characters never changes how big the avatar
+ * appears over the person.
+ */
+export declare function frameVrmBust(measure: {
+    headY: number;
+    crownY: number;
+}): {
+    windowHeight: number;
+    lookY: number;
+    distance: number;
+};
 /**
  * Adapts a VrmStage to the SDK's pluggable `AvatarRenderer`, so
  * `createAvatarPipeline` can publish a VRM character instead of the built-in

package/dist/rtc-web-avatar-vrm.es.js

@@ -1,61 +1,68 @@
-import * as l from "three";
+import * as d from "three";
 import { GLTFLoader as L } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { VRMLoaderPlugin as A, VRMUtils as k } from "@pixiv/three-vrm";
-function M(t, c) {
+import { VRMLoaderPlugin as g, VRMUtils as w } from "@pixiv/three-vrm";
+function A(n) {
+  const o = n.crownY - n.headY, t = o > 0.05 && o < 1.5 ? o : 0.25, r = t * 2.1, p = n.headY + t * 0.45 - r * 0.08, s = r / 2 / Math.tan(28 / 2 * (Math.PI / 180));
+  return { windowHeight: r, lookY: p, distance: s };
+}
+function C(n, o) {
   return {
-    render(n, p, s, m, o) {
-      if (t.applyAndRender(p, c), o) {
-        const a = o.radius * 5.2;
-        n.drawImage(t.canvas, o.x - a / 2, o.y - a * 0.42, a, a);
+    render(t, r, c, p, s) {
+      if (n.applyAndRender(r, o), s) {
+        const a = s.radius * 5.2;
+        t.drawImage(n.canvas, s.x - a / 2, s.y - a * 0.42, a, a);
       } else {
-        const a = Math.min(s, m);
-        n.drawImage(t.canvas, (s - a) / 2, (m - a) / 2, a, a);
+        const a = Math.min(c, p);
+        t.drawImage(n.canvas, (c - a) / 2, (p - a) / 2, a, a);
       }
     },
     dispose() {
-      t.dispose();
+      n.dispose();
     }
   };
 }
-async function g(t, c = 512) {
-  const n = document.createElement("canvas");
-  n.width = c, n.height = c;
-  const p = new l.WebGLRenderer({ canvas: n, alpha: !0, antialias: !0 });
-  p.setClearColor(0, 0);
-  const s = new l.Scene();
-  s.add(new l.AmbientLight(16777215, 1.1));
-  const m = new l.DirectionalLight(16777215, 1.4);
-  m.position.set(0.5, 1.2, 1.5), s.add(m);
-  const o = new l.PerspectiveCamera(28, 1, 0.1, 20), a = new L();
-  a.register((e) => new A(e));
-  const w = await a.parseAsync(t, ""), i = w.userData.vrm;
-  k.removeUnnecessaryVertices(w.scene), k.combineSkeletons(w.scene), k.rotateVRM0(i), s.add(i.scene);
-  const u = i.humanoid?.getNormalizedBoneNode("head"), h = new l.Vector3(0, 1.35, 0);
-  u && u.getWorldPosition(h), o.position.set(0, h.y + 0.03, 0.85), o.lookAt(0, h.y + 0.01, 0);
-  const f = new l.Object3D();
-  f.position.set(0, h.y, 2), s.add(f), i.lookAt && (i.lookAt.target = f);
-  const b = new l.Clock();
+async function G(n, o = 512) {
+  const t = document.createElement("canvas");
+  t.width = o, t.height = o;
+  const r = new d.WebGLRenderer({ canvas: t, alpha: !0, antialias: !0 });
+  r.setClearColor(0, 0);
+  const c = new d.Scene();
+  c.add(new d.AmbientLight(16777215, 1.1));
+  const p = new d.DirectionalLight(16777215, 1.4);
+  p.position.set(0.5, 1.2, 1.5), c.add(p);
+  const s = new d.PerspectiveCamera(28, 1, 0.1, 20), a = new L();
+  a.register((e) => new g(e));
+  const k = await a.parseAsync(n, ""), i = k.userData.vrm;
+  w.removeUnnecessaryVertices(k.scene), w.combineSkeletons(k.scene), w.rotateVRM0(i), c.add(i.scene);
+  const u = i.humanoid?.getNormalizedBoneNode("head"), h = new d.Vector3(0, 1.35, 0);
+  u && u.getWorldPosition(h), i.scene.updateWorldMatrix(!0, !0);
+  const R = new d.Box3().setFromObject(i.scene), V = Number.isFinite(R.max.y) ? R.max.y : h.y + 0.25, y = A({ headY: h.y, crownY: V });
+  s.position.set(0, y.lookY, y.distance), s.lookAt(0, y.lookY, 0);
+  const f = new d.Object3D();
+  f.position.set(0, h.y, 2), c.add(f), i.lookAt && (i.lookAt.target = f);
+  const M = new d.Clock();
   return {
-    canvas: n,
-    applyAndRender(e, R) {
-      const y = R?.headGain ?? 0.9, r = i.expressionManager;
-      if (r) {
-        const V = r.expressionMap ?? {}, d = (v) => !!V[v];
-        d("blinkLeft") || d("blinkRight") ? (r.setValue("blinkLeft", e.blinkLeft), r.setValue("blinkRight", e.blinkRight)) : d("blink") && r.setValue("blink", (e.blinkLeft + e.blinkRight) / 2), d("aa") && r.setValue("aa", Math.max(0, e.jawOpen)), d("happy") && r.setValue("happy", Math.max(0, e.smile)), d("angry") && r.setValue("angry", Math.max(0, -e.smile) * 0.6);
+    canvas: t,
+    applyAndRender(e, Y) {
+      const b = Y?.headGain ?? 0.9, l = i.expressionManager;
+      if (l) {
+        const v = l.expressionMap ?? {}, m = (x) => !!v[x];
+        m("blinkLeft") || m("blinkRight") ? (l.setValue("blinkLeft", e.blinkLeft), l.setValue("blinkRight", e.blinkRight)) : m("blink") && l.setValue("blink", (e.blinkLeft + e.blinkRight) / 2), m("aa") && l.setValue("aa", Math.max(0, e.jawOpen)), m("happy") && l.setValue("happy", Math.max(0, e.smile)), m("angry") && l.setValue("angry", Math.max(0, -e.smile) * 0.6);
       }
-      u && u.rotation.set(-e.headPitch * y, e.headYaw * y, -e.headRoll * y), f.position.set(e.pupilX * 1.2, h.y - e.pupilY * 0.8, 2), i.update(b.getDelta()), p.render(s, o);
+      u && u.rotation.set(-e.headPitch * b, e.headYaw * b, -e.headRoll * b), f.position.set(e.pupilX * 1.2, h.y - e.pupilY * 0.8, 2), i.update(M.getDelta()), r.render(c, s);
     },
     dispose() {
-      k.deepDispose(i.scene), p.dispose();
+      w.deepDispose(i.scene), r.dispose();
     }
   };
 }
-async function D(t, c = {}) {
-  const n = await g(t, c.size ?? 640);
-  return M(n, { headGain: c.headGain });
+async function B(n, o = {}) {
+  const t = await G(n, o.size ?? 640);
+  return C(t, { headGain: o.headGain });
 }
 export {
-  D as createVrmAvatarRenderer,
-  g as createVrmStage,
-  M as vrmAvatarRenderer
+  B as createVrmAvatarRenderer,
+  G as createVrmStage,
+  A as frameVrmBust,
+  C as vrmAvatarRenderer
 };

package/dist/rtc-web-avatar-vrm.umd.js

@@ -1 +1 @@
-(function(s,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("three"),require("three/examples/jsm/loaders/GLTFLoader.js"),require("@pixiv/three-vrm")):typeof define=="function"&&define.amd?define(["exports","three","three/examples/jsm/loaders/GLTFLoader.js","@pixiv/three-vrm"],f):(s=typeof globalThis<"u"?globalThis:s||self,f(s.StreamingCdnRtcAvatarVrm={},s.THREE,s.THREE,s.THREE_VRM))})(this,(function(s,f,M,m){"use strict";function L(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(i,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return i.default=e,Object.freeze(i)}const o=L(f);function w(e,i){return{render(t,r,d,h,c){if(e.applyAndRender(r,i),c){const a=c.radius*5.2;t.drawImage(e.canvas,c.x-a/2,c.y-a*.42,a,a)}else{const a=Math.min(d,h);t.drawImage(e.canvas,(d-a)/2,(h-a)/2,a,a)}},dispose(){e.dispose()}}}async function V(e,i=512){const t=document.createElement("canvas");t.width=i,t.height=i;const r=new o.WebGLRenderer({canvas:t,alpha:!0,antialias:!0});r.setClearColor(0,0);const d=new o.Scene;d.add(new o.AmbientLight(16777215,1.1));const h=new o.DirectionalLight(16777215,1.4);h.position.set(.5,1.2,1.5),d.add(h);const c=new o.PerspectiveCamera(28,1,.1,20),a=new M.GLTFLoader;a.register(n=>new m.VRMLoaderPlugin(n));const b=await a.parseAsync(e,""),l=b.userData.vrm;m.VRMUtils.removeUnnecessaryVertices(b.scene),m.VRMUtils.combineSkeletons(b.scene),m.VRMUtils.rotateVRM0(l),d.add(l.scene);const y=l.humanoid?.getNormalizedBoneNode("head"),R=new o.Vector3(0,1.35,0);y&&y.getWorldPosition(R),c.position.set(0,R.y+.03,.85),c.lookAt(0,R.y+.01,0);const v=new o.Object3D;v.position.set(0,R.y,2),d.add(v),l.lookAt&&(l.lookAt.target=v);const j=new o.Clock;return{canvas:t,applyAndRender(n,A){const k=A?.headGain??.9,p=l.expressionManager;if(p){const T=p.expressionMap??{},u=x=>!!T[x];u("blinkLeft")||u("blinkRight")?(p.setValue("blinkLeft",n.blinkLeft),p.setValue("blinkRight",n.blinkRight)):u("blink")&&p.setValue("blink",(n.blinkLeft+n.blinkRight)/2),u("aa")&&p.setValue("aa",Math.max(0,n.jawOpen)),u("happy")&&p.setValue("happy",Math.max(0,n.smile)),u("angry")&&p.setValue("angry",Math.max(0,-n.smile)*.6)}y&&y.rotation.set(-n.headPitch*k,n.headYaw*k,-n.headRoll*k),v.position.set(n.pupilX*1.2,R.y-n.pupilY*.8,2),l.update(j.getDelta()),r.render(d,c)},dispose(){m.VRMUtils.deepDispose(l.scene),r.dispose()}}}async function g(e,i={}){const t=await V(e,i.size??640);return w(t,{headGain:i.headGain})}s.createVrmAvatarRenderer=g,s.createVrmStage=V,s.vrmAvatarRenderer=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
+(function(s,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("three"),require("three/examples/jsm/loaders/GLTFLoader.js"),require("@pixiv/three-vrm")):typeof define=="function"&&define.amd?define(["exports","three","three/examples/jsm/loaders/GLTFLoader.js","@pixiv/three-vrm"],f):(s=typeof globalThis<"u"?globalThis:s||self,f(s.StreamingCdnRtcAvatarVrm={},s.THREE,s.THREE,s.THREE_VRM))})(this,(function(s,f,j,h){"use strict";function x(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const d=x(f);function M(e){const n=e.crownY-e.headY,t=n>.05&&n<1.5?n:.25,o=t*2.1,p=e.headY+t*.45-o*.08,i=o/2/Math.tan(28/2*(Math.PI/180));return{windowHeight:o,lookY:p,distance:i}}function V(e,n){return{render(t,o,l,p,i){if(e.applyAndRender(o,n),i){const r=i.radius*5.2;t.drawImage(e.canvas,i.x-r/2,i.y-r*.42,r,r)}else{const r=Math.min(l,p);t.drawImage(e.canvas,(l-r)/2,(p-r)/2,r,r)}},dispose(){e.dispose()}}}async function g(e,n=512){const t=document.createElement("canvas");t.width=n,t.height=n;const o=new d.WebGLRenderer({canvas:t,alpha:!0,antialias:!0});o.setClearColor(0,0);const l=new d.Scene;l.add(new d.AmbientLight(16777215,1.1));const p=new d.DirectionalLight(16777215,1.4);p.position.set(.5,1.2,1.5),l.add(p);const i=new d.PerspectiveCamera(28,1,.1,20),r=new j.GLTFLoader;r.register(a=>new h.VRMLoaderPlugin(a));const w=await r.parseAsync(e,""),c=w.userData.vrm;h.VRMUtils.removeUnnecessaryVertices(w.scene),h.VRMUtils.combineSkeletons(w.scene),h.VRMUtils.rotateVRM0(c),l.add(c.scene);const R=c.humanoid?.getNormalizedBoneNode("head"),y=new d.Vector3(0,1.35,0);R&&R.getWorldPosition(y),c.scene.updateWorldMatrix(!0,!0);const L=new d.Box3().setFromObject(c.scene),T=Number.isFinite(L.max.y)?L.max.y:y.y+.25,k=M({headY:y.y,crownY:T});i.position.set(0,k.lookY,k.distance),i.lookAt(0,k.lookY,0);const b=new d.Object3D;b.position.set(0,y.y,2),l.add(b),c.lookAt&&(c.lookAt.target=b);const Y=new d.Clock;return{canvas:t,applyAndRender(a,S){const v=S?.headGain??.9,u=c.expressionManager;if(u){const E=u.expressionMap??{},m=O=>!!E[O];m("blinkLeft")||m("blinkRight")?(u.setValue("blinkLeft",a.blinkLeft),u.setValue("blinkRight",a.blinkRight)):m("blink")&&u.setValue("blink",(a.blinkLeft+a.blinkRight)/2),m("aa")&&u.setValue("aa",Math.max(0,a.jawOpen)),m("happy")&&u.setValue("happy",Math.max(0,a.smile)),m("angry")&&u.setValue("angry",Math.max(0,-a.smile)*.6)}R&&R.rotation.set(-a.headPitch*v,a.headYaw*v,-a.headRoll*v),b.position.set(a.pupilX*1.2,y.y-a.pupilY*.8,2),c.update(Y.getDelta()),o.render(l,i)},dispose(){h.VRMUtils.deepDispose(c.scene),o.dispose()}}}async function A(e,n={}){const t=await g(e,n.size??640);return V(t,{headGain:n.headGain})}s.createVrmAvatarRenderer=A,s.createVrmStage=g,s.frameVrmBust=M,s.vrmAvatarRenderer=V,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streaming-cdn/rtc-web",
-  "version": "1.3.25",
+  "version": "1.3.26",
   "type": "module",
   "main": "dist/rtc-web.umd.js",
   "module": "dist/rtc-web.es.js",