Diorama AR default for mobile

With fallback for devices that don't support it. With scene placed on the floor and adjustable scale.

AI use: Interactive session with Opus 4.8 with decisions and review.

Author: tracygardner

api/effects.js

@@ -45,6 +45,8 @@ export const flockEffects = {
       flock.shadowCasters.forEach((m) => {
         if (!m.isDisposed()) flock.shadowGenerator.addShadowCaster(m);
       });
+      // A scaled-down AR scene catches its shadow on the room's floor instead.
+      flock._syncARGround?.();
     } else {
       // Turn the directional light back off so the scene returns to its
       // flat hemispheric look (no shading, no cast shadows). Marked casters
@@ -54,6 +56,7 @@ export const flockEffects = {
         flock.shadowGenerator.dispose();
         flock.shadowGenerator = null;
       }
+      flock._syncARGround?.();
     }
   },
   setShadow(meshName, { cast = true } = {}) {

api/xr.js

@@ -203,6 +203,28 @@ export function defineXRBlocks() {
     },
   };
 
+  Blockly.Blocks['set_ar_scene_size'] = {
+    init: function () {
+      this.jsonInit({
+        type: 'set_ar_scene_size',
+        message0: translate('set_ar_scene_size'),
+        args0: [
+          {
+            type: 'input_value',
+            name: 'SIZE',
+            check: 'Number',
+          },
+        ],
+        previousStatement: null,
+        nextStatement: null,
+        colour: categoryColours['Scene'],
+        tooltip: getTooltip('set_ar_scene_size'),
+      });
+      this.setHelpUrl(getHelpUrlFor(this.type));
+      this.setStyle('scene_blocks');
+    },
+  };
+
   Blockly.Blocks['set_xr_ui_placement'] = {
     init: function () {
       this.jsonInit({

blocks/xr.js

@@ -8,7 +8,7 @@ import HavokPhysics from '@babylonjs/havok';
 import * as BABYLON from '@babylonjs/core';
 import * as BABYLON_GUI from '@babylonjs/gui/2D/index.js';
 import * as BABYLON_LOADER from '@babylonjs/loaders';
-import { GradientMaterial } from '@babylonjs/materials';
+import { GradientMaterial, ShadowOnlyMaterial } from '@babylonjs/materials';
 import * as BABYLON_EXPORT from '@babylonjs/serializers';
 
 // Point Babylon’s Draco loader at local folder for offline use
@@ -121,6 +121,7 @@ export const flock = {
   BABYLON: BABYLON,
   BABYLON_LOADER: BABYLON_LOADER,
   GradientMaterial: GradientMaterial,
+  ShadowOnlyMaterial: ShadowOnlyMaterial,
   scene: null,
   highlighter: null,
   glowLayer: null,
@@ -1111,6 +1112,7 @@ export const flock = {
       setXRViewMode: this.setXRViewMode?.bind(this),
       setXRCameraMotionMode: this.setXRCameraMotionMode?.bind(this),
       setXRUIPlacement: this.setXRUIPlacement?.bind(this),
+      setARSceneSize: this.setARSceneSize?.bind(this),
       addTeleportTarget: this.addTeleportTarget?.bind(this),
       removeTeleportTarget: this.removeTeleportTarget?.bind(this),
       applyForce: this.applyForce?.bind(this),
@@ -1242,6 +1244,7 @@ export const flock = {
       'setXRViewMode',
       'setXRCameraMotionMode',
       'setXRUIPlacement',
+      'setARSceneSize',
       'addTeleportTarget',
       'removeTeleportTarget',
       'lightIntensity',

flock.js

@@ -581,6 +581,12 @@ export function registerSceneGenerators(javascriptGenerator) {
     return `setXRViewMode(${JSON.stringify(block.getFieldValue('VIEW'))});\nsetXRCameraMotionMode(${JSON.stringify(block.getFieldValue('MOTION'))});\n`;
   };
 
+  javascriptGenerator.forBlock['set_ar_scene_size'] = function (block) {
+    const size =
+      javascriptGenerator.valueToCode(block, 'SIZE', javascriptGenerator.ORDER_ATOMIC) || '80';
+    return `setARSceneSize(${size});\n`;
+  };
+
   javascriptGenerator.forBlock['set_xr_ui_placement'] = function (block) {
     return `setXRUIPlacement(${JSON.stringify(block.getFieldValue('PLACEMENT'))});\n`;
   };

generators/generators-scene.js

@@ -487,6 +487,7 @@ export default {
   device_camera_background: 'verwende %1 Kamera als Hintergrund',
   set_xr_mode: 'XR‑Modus auf %1 setzen',
   set_xr_view_mode: 'VR-Ansicht auf %1 mit Kamerabewegung %2 setzen',
+  set_ar_scene_size: 'AR-Szenengröße auf %1 cm setzen', // ai
   set_xr_ui_placement: 'VR-Oberfläche auf %1 anzeigen', // ai
   add_teleport_target: 'Teleportationsziel %1 hinzufügen',
   remove_teleport_target: 'Teleportationsziel %1 entfernen',

locale/de.js

@@ -373,6 +373,7 @@ export default {
   device_camera_background: 'use %1 camera as background',
   set_xr_mode: 'set XR mode to %1',
   set_xr_view_mode: 'set VR view to %1 with camera motion %2',
+  set_ar_scene_size: 'set AR scene size to %1 cm',
   set_xr_ui_placement: 'show VR UI on %1',
   add_teleport_target: 'add teleport target %1',
   remove_teleport_target: 'remove teleport target %1',
@@ -679,6 +680,8 @@ export default {
   set_xr_mode_tooltip: 'Set the XR mode for the scene.\nOptions: VR, AR, Magic Window.',
   set_xr_view_mode_tooltip:
     'Choose whether to watch or embody the followed object and how its camera moves. Watch comfort catches up after movement stops; embody teleport uses controller-ray teleportation.',
+  set_ar_scene_size_tooltip:
+    'How wide the whole scene appears in the real room in AR. A phone starts at 80 cm, so the scene sits on the floor in front of you like a model. Use 0 for life size, where you stand inside the scene instead.\nKeyword: diorama',
   set_xr_ui_placement_tooltip:
     'Choose where buttons, sliders and text appear in VR. The heads-up display floats in front of you; the wrist attaches them to your left controller like a watch.',
   add_teleport_target_tooltip: 'Allow teleporting onto the ground, one object, or all objects.',

locale/en.js

@@ -367,6 +367,7 @@ export default {
   device_camera_background: 'usar cámara %1 como fondo', // human
   set_xr_mode: 'establecer modo XR a %1', // human
   set_xr_view_mode: 'establecer vista de RV a %1 con movimiento de cámara %2',
+  set_ar_scene_size: 'fijar tamaño de escena AR a %1 cm', // ai
   set_xr_ui_placement: 'mostrar interfaz de RV en %1', // ai
   add_teleport_target: 'añadir destino de teletransporte %1',
   remove_teleport_target: 'eliminar destino de teletransporte %1',

locale/es.js

@@ -334,6 +334,7 @@ export default {
   device_camera_background: 'utiliser la caméra %1 comme arrière-plan',
   set_xr_mode: 'définir le mode XR sur %1',
   set_xr_view_mode: 'définir la vue RV sur %1 avec mouvement de caméra %2',
+  set_ar_scene_size: 'définir la taille de la scène RA à %1 cm', // ai
   set_xr_ui_placement: "afficher l'interface RV sur %1", // ai
   add_teleport_target: 'ajouter la cible de téléportation %1',
   remove_teleport_target: 'retirer la cible de téléportation %1',

locale/fr.js

@@ -339,6 +339,7 @@ export default {
   device_camera_background: 'usa la %1 del dispositivo come sfondo',
   set_xr_mode: 'imposta modalità XR su %1',
   set_xr_view_mode: 'imposta vista VR su %1 con movimento della camera %2',
+  set_ar_scene_size: 'imposta dimensione scena AR a %1 cm', // ai
   set_xr_ui_placement: 'mostra interfaccia VR su %1', // ai
   add_teleport_target: 'aggiungi destinazione teletrasporto %1',
   remove_teleport_target: 'rimuovi destinazione teletrasporto %1',