dsh-plugin-vrmpet3d 0.1.1 → 0.1.3

package/lib/client.scene.js

@@ -75,10 +75,20 @@
   var GAZE_YAW_LIMIT = ((80 * Math.PI) / 180) / GAZE_WEIGHT;
 
   /**
-   * Pitch is left where it was: a head does not tip 90° forward or back without looking broken, and the
-   * request was for the turn. Raise this the same way if a bigger nod is ever wanted.
+   * Automatic pitch limit, before the gaze weight. Settings expose separate actual
+   * upward/downward angles in degrees; both default to 60 degrees.
    */
-  var GAZE_PITCH_LIMIT = 0.3;
+  var GAZE_PITCH_LIMIT = (60 * Math.PI / 180) / GAZE_WEIGHT;
+
+  function gazePitchLimits(preferences) {
+    var prefs = preferences || {};
+    function limit(key) {
+      return Number.isFinite(prefs[key])
+        ? Math.max(0, Math.min(60, prefs[key])) * Math.PI / 180 / GAZE_WEIGHT
+        : GAZE_PITCH_LIMIT;
+    }
+    return { up: limit('gazePitchUp'), down: limit('gazePitchDown') };
+  }
 
   /**
    * How far the head may turn IN TOTAL while an authored clip is driving it, in radians.
@@ -794,7 +804,8 @@
     }
 
     var yaw = Math.max(-GAZE_YAW_LIMIT, Math.min(GAZE_YAW_LIMIT, aim.yaw)) * GAZE_WEIGHT * this.gazeBlend;
-    var pitch = Math.max(-GAZE_PITCH_LIMIT, Math.min(GAZE_PITCH_LIMIT, aim.pitch)) * GAZE_WEIGHT * this.gazeBlend;
+    var pitchLimits = gazePitchLimits(this.scene && this.scene.preferences);
+    var pitch = Math.max(-pitchLimits.down, Math.min(pitchLimits.up, aim.pitch)) * GAZE_WEIGHT * this.gazeBlend;
     var axes = rest ? this.gazeAxes(head) : null;
 
     if (layeredOnClip) {
@@ -807,8 +818,7 @@
       var budget = Math.max(0, HEAD_LAYER_LIMIT - clipTurn);
       yaw = Math.max(-budget, Math.min(budget, yaw));
       // Pitch keeps its own (smaller) limit, but never more than what is left of the budget either.
-      pitch = Math.max(-Math.min(GAZE_PITCH_LIMIT * GAZE_WEIGHT, budget),
-        Math.min(Math.min(GAZE_PITCH_LIMIT * GAZE_WEIGHT, budget), pitch));
+      pitch = Math.max(-budget, Math.min(budget, pitch));
       if (axes) {
         this._quat.setFromAxisAngle(axes.yaw, yaw);
         this._quat2.setFromAxisAngle(axes.pitch, pitch);
@@ -1677,6 +1687,9 @@
     if (this.disposed) return;
     var w = Math.max(1, Math.round(width));
     var h = Math.max(1, Math.round(height));
+    // Layout works in fractional CSS pixels. Reapplying the same rounded size clears
+    // the framebuffer between rAFs when a settings reply arrives during an orbit.
+    if (this.width === w && this.height === h) return;
     this.renderer.setSize(w, h, false);
     this.camera.aspect = w / h;
     this.camera.updateProjectionMatrix();
@@ -1763,6 +1776,8 @@
 
   /** Replace the current avatar with a hardware-ready one. */
   Scene.prototype.installAvatar = function (avatar, root) {
+    (this.toonMaterials || []).forEach(function (entry) { if (entry.plain) entry.plain.dispose(); });
+    this.toonMaterials = null;
     // Stop before the old avatar is replaced: stopping is what undoes the clip's
     // pose, and it has to happen while the old model is still installed. Every
     // clip is then dropped, because a clip is fitted to one model — the cached
@@ -1787,6 +1802,7 @@
     this.frameAvatar(root);
     this.stage.add(root);
     this.avatar = avatar;
+    this.captureToonMaterials(root);
     this.kind = avatar.kind;
     /**
      * …and the collider switch, applied to the avatar that was just adopted.
@@ -1852,6 +1868,7 @@
      * model is loaded, so on a fresh pet that call finds nothing to snapshot and the first sweep would have
      * had no gravity to lean against (measured: `windState().joints === 0` on a real model with two chains).
      */
+    this.applySprings(this.preferences);
     this.captureSpringBase();
     this.expressionBehaviour = { blink: 0, blinkExpression: 'blink', emotion: null, emotionWeight: 0 };
     this.expressionState = { nextBlinkAt: null, blinkUntil: 0, nextIdleEmotionAt: null, emotionUntil: 0 };
@@ -1860,6 +1877,73 @@
     this.motion.setGazeIdle(this.preferences.gazeIdleSeconds);
     this.updateShadowPlane();
     this.refitCamera();
+    this.applyToonPreferences();
+  };
+
+  /** Keep the loaded materials (and expression bindings) intact so the switch is reversible. */
+  Scene.prototype.captureToonMaterials = function (root) {
+    var self = this;
+    this.toonMeshes = [];
+    this.toonMaterials = [];
+    var seen = new Map();
+    root.traverse(function (node) {
+      if (!node.isMesh || !node.material) return;
+      var originals = Array.isArray(node.material) ? node.material : [node.material];
+      var entries = originals.map(function (material) {
+        if (!material.isMToonMaterial) return null;
+        if (seen.has(material)) return seen.get(material);
+        var entry = { material: material, toony: material.shadingToonyFactor, shift: material.shadingShiftFactor,
+          shade: material.shadeColorFactor.clone(), width: material.outlineWidthFactor, plain: null };
+        seen.set(material, entry);
+        self.toonMaterials.push(entry);
+        return entry;
+      });
+      if (entries.some(Boolean)) self.toonMeshes.push({ node: node, original: node.material, entries: entries, originals: originals });
+    });
+  };
+
+  Scene.prototype.applyToonPreferences = function () {
+    var self = this;
+    var id = this.currentModelId || this.preferences.modelId;
+    var prefs = (this.preferences.toon || {})[id] || {};
+    var disabled = prefs.enabled === false;
+    (this.toonMaterials || []).forEach(function (entry) {
+      var material = entry.material;
+      material.shadingToonyFactor = prefs.shadingToonyFactor === undefined ? entry.toony : prefs.shadingToonyFactor;
+      material.shadingShiftFactor = prefs.shadingShiftFactor === undefined ? entry.shift : prefs.shadingShiftFactor;
+      material.shadeColorFactor.copy(entry.shade);
+      if (prefs.shadeStrength !== undefined) material.shadeColorFactor.lerp(material.color, 1 - prefs.shadeStrength);
+      material.outlineWidthFactor = entry.width * (prefs.outlineScale === undefined ? 1 : prefs.outlineScale);
+      if (disabled && !entry.plain) {
+        var plain = new self.THREE.MeshStandardMaterial();
+        ['map', 'alphaMap', 'alphaTest', 'transparent', 'opacity', 'side', 'depthWrite', 'depthTest',
+          'normalMap', 'normalScale', 'emissive', 'emissiveMap', 'emissiveIntensity', 'color'].forEach(function (key) {
+          if (material[key] === undefined) return;
+          if (plain[key] && typeof plain[key].copy === 'function') plain[key].copy(material[key]);
+          else plain[key] = material[key];
+        });
+        plain.visible = !material.isOutline;
+        entry.plain = plain;
+      }
+    });
+    (this.toonMeshes || []).forEach(function (mesh) {
+      mesh.node.material = disabled
+        ? (Array.isArray(mesh.original) ? mesh.originals.map(function (m, i) { return mesh.entries[i] ? mesh.entries[i].plain : m; })
+          : mesh.entries[0].plain)
+        : mesh.original;
+    });
+    this.toonDisabled = disabled;
+  };
+
+  Scene.prototype.syncPlainMaterials = function () {
+    if (!this.toonDisabled) return;
+    (this.toonMaterials || []).forEach(function (entry) {
+      if (!entry.plain) return;
+      // Expressions still target the authored MToon material, including UV animation.
+      entry.plain.color.copy(entry.material.color);
+      entry.plain.emissive.copy(entry.material.emissive);
+      entry.plain.opacity = entry.material.opacity;
+    });
   };
 
   /** A soft ground blob, so the pet does not appear to float. */
@@ -3388,7 +3472,8 @@
     var x = Math.max(-1, Math.min(1, aim.x));
     var y = Math.max(-1, Math.min(1, aim.y));
     // Screen y grows downward, pitch grows upward.
-    return { yaw: x * GAZE_YAW_LIMIT, pitch: -y * GAZE_PITCH_LIMIT };
+    var limits = gazePitchLimits(this.preferences);
+    return { yaw: x * GAZE_YAW_LIMIT, pitch: -y * (y < 0 ? limits.up : limits.down) };
   };
 
   /** Advance one frame. `dt` is in seconds. */
@@ -3445,6 +3530,7 @@
     this.advanceExpressions(dt);
     this.applyExpressions(this.preferences);
 
+    this.syncPlainMaterials();
     this.renderer.render(this.scene, this.camera);
     this.frame += 1;
   };
@@ -3456,6 +3542,7 @@
   Scene.prototype.applyPreferences = function (preferences) {
     var raw = preferences && typeof preferences === 'object' ? preferences : {};
     this.preferences = this.core.cleanPreferences(preferences);
+    this.applyToonPreferences();
     // A preferences push only carries `motions` when the caller meant to change
     // it. cleanPreferences always produces a (possibly empty) key, so adopting it
     // unconditionally would silently wipe a map set through setMotionMap.
@@ -3649,6 +3736,40 @@
     };
   };
 
+  /** The rendered eyes' midpoint, in canvas CSS pixels, independent of framing and camera orbit. */
+  Scene.prototype.gazeOrigin = function () {
+    var avatar = this.avatar;
+    if (!avatar || !this.THREE || !this.camera) return null;
+    var point = this._gazeOriginVec || (this._gazeOriginVec = new this.THREE.Vector3());
+    var other = this._gazeOtherEyeVec || (this._gazeOtherEyeVec = new this.THREE.Vector3());
+    var humanoid = avatar.vrm && avatar.vrm.humanoid;
+    var left = humanoid && typeof humanoid.getRawBoneNode === 'function' ? humanoid.getRawBoneNode('leftEye') : null;
+    var right = humanoid && typeof humanoid.getRawBoneNode === 'function' ? humanoid.getRawBoneNode('rightEye') : null;
+    left = left || (avatar.bones && avatar.bones.leftEye);
+    right = right || (avatar.bones && avatar.bones.rightEye);
+    var source;
+    if (left && right) {
+      left.getWorldPosition(point); right.getWorldPosition(other);
+      point.add(other).multiplyScalar(0.5);
+      source = 'eyes';
+    } else if (avatar.vrm && avatar.vrm.lookAt && typeof avatar.vrm.lookAt.getLookAtWorldPosition === 'function') {
+      // The loader has already converted VRM 0/1 coordinate conventions for this offset.
+      if (avatar.root) avatar.root.updateWorldMatrix(true, true);
+      avatar.vrm.lookAt.getLookAtWorldPosition(point);
+      source = 'lookAt';
+    } else {
+      var head = gazeNodeFor(avatar);
+      if (!head) return null;
+      head.getWorldPosition(point);
+      source = 'head';
+    }
+    this.camera.updateMatrixWorld(true);
+    var projected = this.projectToCanvas(point);
+    if (!projected || projected.z < -1 || projected.z > 1) return null;
+    projected.source = source;
+    return projected;
+  };
+
   /**
    * Apply the draught to the chains, decay it, and keep it LOCAL.
    *
@@ -3873,6 +3994,10 @@
    */
   Scene.prototype.setSpringDefaults = function (defaults) {
     this.springDefaults = defaults && typeof defaults === 'object' ? defaults : null;
+    // Catalog defaults can arrive after the avatar and preferences on either surface.
+    // Apply them now; waiting for another preference edit makes a reload appear to fix physics.
+    this.applySprings(this.preferences);
+    this.captureSpringBase();
   };
 
   /**
@@ -4939,6 +5064,8 @@
 
   Scene.prototype.dispose = function () {
     if (this.disposed) return;
+    (this.toonMeshes || []).forEach(function (mesh) { mesh.node.material = mesh.original; });
+    (this.toonMaterials || []).forEach(function (entry) { if (entry.plain) entry.plain.dispose(); });
     this.disposed = true;
     // Stop and uncache every mixer before the renderer goes: a mixer holds a
     // binding table that references the model's bones, so leaving them behind

package/lib/config-page.html

@@ -53,6 +53,17 @@
     <div class="row"><span class="k" data-i18n="availableInfo">可用信息</span><span class="grow note" id="model-meta">—</span></div>
   </div>
 
+  <div class="card" id="toon-card" style="margin-top:12px">
+    <h3 data-i18n="toonTitle">卡通增强</h3>
+    <div class="row"><span class="k" data-i18n="toonState">材质状态</span><span class="grow note" id="toon-state" role="status">—</span></div>
+    <div class="row">
+      <label class="k" for="toon-mode">MToon</label>
+      <select id="toon-mode"><option value="original" data-i18n="toonOriginal">模型原始</option><option value="on" data-i18n="on">开启</option><option value="off" data-i18n="toonDisabled">关闭</option></select>
+      <button id="toon-reset" type="button" data-i18n="toonReset">恢复模型原始参数</button>
+    </div>
+    <div id="toon-controls"></div>
+    <p class="note" data-i18n="toonNote">参数仅保存到当前模型，留空使用模型原始值。关闭 MToon 后使用普通光照材质。描边倍率只调整模型已有的描边。</p>
+  </div>
 </section>
 
 <section class="settings-section" id="settings-1">

package/lib/config-page.js

@@ -91,6 +91,20 @@
     zh: {
       // ---- the chrome, and the name each page gives itself ----
       titleModel: 'vrmpet3d · 模型参数',
+      gazePitchUp: '最大抬头角度', gazePitchDown: '最大低头角度', gazePitchTest: '测试 20° / 30°',
+      gazeCurveMode: '曲线模式', gazeAxes: '分轴曲线', gazeRadial: '二维距离曲线',
+      gazeSpatial: '空间角度', gazeCurveSpatial: '空间角度曲率', gazeDistance: '注视距离',
+      gazeSpatialHint: '距离以满偏距离为单位，越大转头越缓。同高时，鼠标越偏向左右，俯仰越小；与双眼同高时俯仰为零。默认曲率 1、注视距离 0.1。',
+      gazeSpanHint: '满偏距离填 0 为自动：水平和垂直均使用屏幕宽度的一半。',
+      gazeCurveX: '水平曲率', gazeCurveY: '垂直曲率', gazeCurveRadial: '二维距离曲率',
+      gazeCurveHint: '数值越小，中心附近越灵敏；1 为线性。二维距离模式按满偏距离归一化后计算方向与强度，可减少远处光标上下穿过视线水平线时的俯仰跳变。各模式的参数分别保存。',
+      gazePitchHint: '自动为抬头、低头各 60°。范围 0–60°；0 表示不向该方向转头。这是视线跟踪的附加角度，动作本身的头部姿势仍会保留。',
+      toonTitle: '卡通增强', toonState: '材质状态', toonOriginal: '模型原始', toonReset: '恢复模型原始参数',
+      toonNote: '参数仅保存到当前模型，留空使用模型原始值。关闭 MToon 后使用普通光照材质。描边倍率只调整模型已有的描边。',
+      toonLoading: '正在读取当前模型材质…', toonUnsupported: '当前模型未声明 MToon 材质，暂不支持转换。',
+      toonStatus: '{n}/{total} 个原生 MToon 材质 · 当前{state}', toonEnabled: '开启', toonDisabled: '关闭',
+      toonToony: '明暗分界硬度', toonShift: '明暗分界偏移', toonShade: '阴影强度', toonOutline: '描边倍率',
+      toonMixed: '模型原始（各材质不同）', toonNoOutline: '模型没有启用描边',
       titleGlobal: 'vrmpet3d · 通用设置',
       headingModel: '模型参数',
       headingGlobal: '通用设置',
@@ -417,6 +431,20 @@
     en: {
       // ---- the chrome, and the name each page gives itself ----
       titleModel: 'vrmpet3d · Model parameters',
+      gazePitchUp: 'Maximum upward pitch', gazePitchDown: 'Maximum downward pitch', gazePitchTest: 'Try 20° / 30°',
+      gazeCurveMode: 'Curve mode', gazeAxes: 'Separate axes', gazeRadial: '2D distance',
+      gazeSpatial: 'Spatial angles', gazeCurveSpatial: 'Spatial angle curve', gazeDistance: 'Target distance',
+      gazeSpatialHint: 'Distance is in span units; larger values soften head turns. At a fixed height, moving sideways reduces pitch. At eye level, pitch is zero. Defaults: curve 1, target distance 0.1.',
+      gazeSpanHint: 'Enter 0 for automatic spans: both axes use half the screen width.',
+      gazeCurveX: 'Horizontal curve', gazeCurveY: 'Vertical curve', gazeCurveRadial: '2D distance curve',
+      gazeCurveHint: 'Lower values increase sensitivity near the center; 1 is linear. The 2D mode uses distance normalized by each axis span, reducing abrupt pitch changes as a distant pointer crosses eye level. Each mode keeps its own values.',
+      gazePitchHint: 'Automatic: 60° up and down. Range: 0–60°. Zero disables tracking in that direction. Gaze adds these angles while preserving the animation’s head pose.',
+      toonTitle: 'Cartoon enhancement', toonState: 'Material status', toonOriginal: 'Model original', toonReset: 'Restore original materials',
+      toonNote: 'Saved for this model only. Leave a value blank to use its original. Turning MToon off uses standard lit materials. Outline scale adjusts existing outlines only.',
+      toonLoading: 'Reading model materials…', toonUnsupported: 'This model has no MToon materials. Conversion is not supported yet.',
+      toonStatus: '{n}/{total} native MToon materials · Currently {state}', toonEnabled: 'on', toonDisabled: 'off',
+      toonToony: 'Shading hardness', toonShift: 'Shading shift', toonShade: 'Shade strength', toonOutline: 'Outline scale',
+      toonMixed: 'Original (varies by material)', toonNoOutline: 'This model has no enabled outlines',
       titleGlobal: 'vrmpet3d · General settings',
       headingModel: 'Model parameters',
       headingGlobal: 'General settings',
@@ -1523,6 +1551,7 @@
   }
 
   function renderModel() {
+    renderToon();
     var spec = element('model-spec');
     var meta = element('model-meta');
     if (!spec || !meta) return;
@@ -1553,6 +1582,67 @@
   // ---------------------------------------------------------------------------
   // Expressions
   // ---------------------------------------------------------------------------
+  function renderToon() {
+    var card = element('toon-card');
+    if (!card) return;
+    var id = modelIdInUse();
+    var info = modelInfo && modelInfoId === id && modelInfo.toon;
+    var materials = info && info.materials || [];
+    var supported = Boolean(id && materials.length);
+    var prefs = (preferences.toon || {})[id] || {};
+    var mode = element('toon-mode');
+    var state = element('toon-state');
+    state.textContent = !info ? (id ? t('toonLoading') : t('noModelChosen')) : !supported ? t('toonUnsupported')
+      : t('toonStatus').replace('{n}', materials.length).replace('{total}', info.total)
+        .replace('{state}', t(prefs.enabled === false ? 'toonDisabled' : 'toonEnabled'));
+    mode.value = prefs.enabled === undefined ? 'original' : prefs.enabled ? 'on' : 'off';
+    mode.disabled = !supported;
+    function save(key, value) {
+      if (id !== modelIdInUse()) return;
+      var all = Object.assign({}, preferences.toon || {});
+      var next = Object.assign({}, all[id] || {});
+      if (value === undefined) delete next[key]; else next[key] = value;
+      if (Object.keys(next).length) all[id] = next; else delete all[id];
+      preferences.toon = core.cleanPreferences({ toon: all }).toon;
+      persist();
+      renderToon();
+    }
+    mode.onchange = function () { save('enabled', mode.value === 'original' ? undefined : mode.value === 'on'); };
+    var reset = element('toon-reset');
+    reset.disabled = !id || !Object.keys(prefs).length;
+    reset.onclick = function () {
+      var all = Object.assign({}, preferences.toon || {});
+      delete all[id]; preferences.toon = all; persist(); renderToon();
+    };
+    var controls = element('toon-controls');
+    controls.textContent = '';
+    [
+      ['shadingToonyFactor', 'toonToony', 0, 1, 0.01],
+      ['shadingShiftFactor', 'toonShift', -1, 1, 0.01],
+      ['shadeStrength', 'toonShade', 0, 1, 0.05],
+      ['outlineScale', 'toonOutline', 0, 3, 0.05],
+    ].forEach(function (spec) {
+      var row = document.createElement('div'); row.className = 'row';
+      var label = document.createElement('label'); label.className = 'k'; label.htmlFor = 'toon-' + spec[0]; label.textContent = t(spec[1]);
+      var input = document.createElement('input'); input.type = 'number'; input.id = label.htmlFor;
+      input.min = spec[2]; input.max = spec[3]; input.step = spec[4];
+      input.value = prefs[spec[0]] === undefined ? '' : prefs[spec[0]];
+      var original = materials.map(function (m) { return m[spec[0]]; });
+      input.placeholder = spec[0] === 'shadeStrength' || spec[0] === 'outlineScale' ? '1'
+        : original.length && original.every(function (v) { return v === original[0]; }) ? String(Number(original[0].toFixed(2))) : t('toonMixed');
+      var noOutline = spec[0] === 'outlineScale' && !materials.some(function (m) { return m.outline; });
+      input.disabled = !supported || prefs.enabled === false || noOutline;
+      input.onchange = function () {
+        if (input.value !== '' && !Number.isFinite(Number(input.value))) return;
+        save(spec[0], input.value === '' ? undefined : Number(input.value));
+      };
+      row.appendChild(label); row.appendChild(input);
+      var note = document.createElement('span'); note.className = 'note';
+      note.textContent = noOutline ? t('toonNoOutline') : spec[2] + ' … ' + spec[3]; row.appendChild(note);
+      controls.appendChild(row);
+    });
+  }
+
   function expressionRows() {
     if (!modelInfo || !Array.isArray(modelInfo.expressions)) return [];
     return modelInfo.expressions.slice().sort(function (left, right) {
@@ -4336,16 +4426,17 @@
    * Both are SETTINGS rather than constants in the renderer (they were `GAZE_CURVE_EDGE_SLOPE` and a fixed
    * span), because the right shape depends on the display and on the person: on a wide monitor the default
    * span makes the head turn very little, and anyone who wants it livelier lowers the curve's edge slope
-   * instead of reaching for a different pet. `0` in either span field means AUTO — the frame's own width —
+   * instead of reaching for a different pet. `0` in either span field means AUTO — half the screen width —
    * and the hint under the row says which number that resolves to for the floating window.
    */
   function bindGazeControls() {
-    var curve = element('pref-gaze-curve');
-    var curveValue = element('pref-gaze-curve-value');
-    var curveReset = element('pref-gaze-curve-reset');
+    var curveMode = element('pref-gaze-mode');
     var spanX = element('pref-gaze-span-x');
     var spanY = element('pref-gaze-span-y');
     var spanReset = element('pref-gaze-span-reset');
+    var pitchUp = element('pref-gaze-pitch-up');
+    var pitchDown = element('pref-gaze-pitch-down');
+    var pitchReset = element('pref-gaze-pitch-reset');
     var idle = element('pref-gaze-idle');
     var idleReset = element('pref-gaze-idle-reset');
     // The draught's four numbers live in the same section — one place for everything that answers "how does the
@@ -4366,9 +4457,20 @@
       persist();
     };
     var showCurve = function () {
-      var slope = Number(preferences.gazeCurve);
-      if (curveValue) curveValue.textContent = slope.toFixed(2) + (slope >= 0.995 ? t('straightLine') : '');
-      if (curve) curve.value = String(Math.round(slope * 100));
+      if (curveMode) curveMode.value = preferences.gazeCurveMode;
+      var radial = element('gaze-curves-radial');
+      if (radial) radial.hidden = preferences.gazeCurveMode !== 'radial';
+      var spatial = element('gaze-curves-spatial');
+      if (spatial) spatial.hidden = preferences.gazeCurveMode !== 'spatial';
+      var distance = element('pref-gaze-distance');
+      if (distance) distance.value = String(preferences.gazeDistance);
+      [['radial', 'gazeCurveRadial'], ['spatial', 'gazeCurveSpatial']].forEach(function (entry) {
+        var control = element('pref-gaze-curve-' + entry[0]);
+        var value = element('pref-gaze-curve-' + entry[0] + '-value');
+        var current = preferences[entry[1]];
+        if (control) control.value = String(Math.round(current * 100));
+        if (value) value.textContent = current.toFixed(2) + (current >= 0.995 ? t('straightLine') : '');
+      });
     };
     var showSpans = function () {
       if (spanX) spanX.value = String(Math.round(Number(preferences.gazeSpanX) || 0));
@@ -4397,18 +4499,21 @@
       if (windSpeed) windSpeed.value = String(Math.round(Number(preferences.windSpeedForMax)));
     };
 
-    if (curve) {
-      curve.addEventListener('input', function () {
-        write('gazeCurve', Number(curve.value) / 100);
-        showCurve();
-      });
-    }
-    if (curveReset) {
-      curveReset.addEventListener('click', function () {
-        write('gazeCurve', core.DEFAULTS.gazeCurve);
-        showCurve();
-      });
-    }
+    if (curveMode) curveMode.onchange = function () { write('gazeCurveMode', curveMode.value === 'radial' ? 'radial' : 'spatial'); showCurve(); };
+    [['radial', 'gazeCurveRadial'], ['spatial', 'gazeCurveSpatial']].forEach(function (entry) {
+      var control = element('pref-gaze-curve-' + entry[0]);
+      var reset = element('pref-gaze-curve-' + entry[0] + '-reset');
+      if (control) control.oninput = function () { write(entry[1], Number(control.value) / 100); showCurve(); };
+      if (reset) reset.onclick = function () { write(entry[1], core.DEFAULTS[entry[1]]); showCurve(); };
+    });
+    var targetDistance = element('pref-gaze-distance');
+    var targetDistanceReset = element('pref-gaze-distance-reset');
+    if (targetDistance) targetDistance.onchange = function () {
+      var value = targetDistance.valueAsNumber;
+      write('gazeDistance', Number.isFinite(value) ? Math.max(0.1, Math.min(5, value)) : core.DEFAULTS.gazeDistance);
+      showCurve();
+    };
+    if (targetDistanceReset) targetDistanceReset.onclick = function () { write('gazeDistance', core.DEFAULTS.gazeDistance); showCurve(); };
     if (spanX) {
       spanX.addEventListener('change', function () {
         write('gazeSpanX', Math.max(0, Number(spanX.value) || 0));
@@ -4495,6 +4600,24 @@
       });
     }
     showCurve();
+    function showPitch() {
+      if (pitchUp) pitchUp.value = String(Math.round(preferences.gazePitchUp * 10) / 10);
+      if (pitchDown) pitchDown.value = String(Math.round(preferences.gazePitchDown * 10) / 10);
+    }
+    [[pitchUp, 'gazePitchUp'], [pitchDown, 'gazePitchDown']].forEach(function (entry) {
+      if (!entry[0]) return;
+      entry[0].onchange = function () {
+        var value = entry[0].valueAsNumber;
+        write(entry[1], Number.isFinite(value) ? Math.max(0, Math.min(60, value)) : core.DEFAULTS[entry[1]]);
+        showPitch();
+      };
+    });
+    function setPitch(up, down) {
+      preferences.gazePitchUp = up; preferences.gazePitchDown = down;
+      persist(); showPitch();
+    }
+    if (pitchReset) pitchReset.onclick = function () { setPitch(core.DEFAULTS.gazePitchUp, core.DEFAULTS.gazePitchDown); };
+    showPitch();
     showSpans();
     showIdle();
     showWind();
@@ -4533,7 +4656,8 @@
         // work area, and the floating pet's horizontal full deflection IS that width.
         var auto = element('pref-gaze-span-auto');
         if (auto) {
-          var work = status.display && status.display.workArea ? Math.round(status.display.workArea.width) : 0;
+          var work = status.page && status.page.gaze && Number.isFinite(status.page.gaze.autoSpan) ? Math.round(status.page.gaze.autoSpan) :
+            status.display && status.display.workArea ? Math.round(status.display.workArea.width / 2) : 0;
           auto.textContent = work > 0 ? fill(t('spanNow'), { px: work }) : t('noScreenSize');
         }
         showAppliedGaze(status);
@@ -4564,6 +4688,8 @@
     } else {
       live.appliedGaze = {
         curve: Number(gaze.curve),
+        curveY: Number.isFinite(gaze.curveY) ? gaze.curveY : Number(gaze.curve),
+        mode: gaze.mode === 'radial' ? 'radial' : 'spatial',
         spanX: Math.round(Number(gaze.spanX) || 0),
         spanY: Math.round(Number(gaze.spanY) || 0),
         aim: { x: Number((gaze.aim && gaze.aim.x) || 0), y: Number((gaze.aim && gaze.aim.y) || 0) },
@@ -4581,7 +4707,9 @@
     }
     var aim = live.appliedGaze;
     host.textContent = fill(t('gazeApplied'), {
-      curve: aim.curve.toFixed(2),
+      curve: aim.mode === 'spatial' ? t('gazeSpatial') + ' ' + aim.curve.toFixed(2)
+        : aim.mode === 'radial' ? t('gazeRadial') + ' ' + aim.curve.toFixed(2)
+        : t('gazeAxes') + ' ' + aim.curve.toFixed(2) + ' / ' + aim.curveY.toFixed(2),
       spanX: aim.spanX,
       spanY: aim.spanY,
       aimX: aim.aim.x.toFixed(2),
@@ -5052,10 +5180,10 @@
        * which it is. The resolved spans are what "auto" currently means, so the number is checkable.
        */
       gaze: {
-        controls: Boolean(element('pref-gaze-curve') && element('pref-gaze-span-x') && element('pref-gaze-span-y')),
-        curve: Number(preferences.gazeCurve),
-        spanX: core.resolveGazeSpan(preferences.gazeSpanX, 0),
-        spanY: core.resolveGazeSpan(preferences.gazeSpanY, 0),
+        controls: Boolean(element('pref-gaze-mode') && element('pref-gaze-curve-spatial') && element('pref-gaze-curve-radial') && element('pref-gaze-span-x') && element('pref-gaze-span-y')),
+        curve: Number(preferences.gazeCurveMode === 'radial' ? preferences.gazeCurveRadial : preferences.gazeCurveSpatial),
+        spanX: core.resolveGazeSpan(preferences.gazeSpanX, Number(globalThis.screen && globalThis.screen.width) || 0),
+        spanY: core.resolveGazeSpan(preferences.gazeSpanY, Number(globalThis.screen && globalThis.screen.width) || 0),
         // The readout of what the RENDERER applies, and the numbers behind it: `applied` is null until the
         // first /vrmpet3d/desktop answer lands, which is why a check asserts the element exists rather than a
         // value that depends on a running window.