dsh-plugin-vrmpet3d 0.1.1 → 0.1.2

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.