@gjsify/example-dom-three-geometry-teapot 0.27.1 → 0.29.0

package/src/gjs/teapot-window.ts

@@ -0,0 +1,145 @@
+// Adwaita window for the three.js teapot example.
+// Uses a Blueprint template for the UI layout and WebGLBridge for WebGL.
+
+import GObject from 'gi://GObject?version=2.0';
+import Gtk from 'gi://Gtk?version=4.0';
+import Adw from 'gi://Adw?version=1';
+import { WebGLBridge } from '@gjsify/webgl';
+import {
+    start,
+    TESS_VALUES,
+    SHADING_VALUES,
+    DEFAULT_TESS_INDEX,
+    DEFAULT_SHADING_INDEX,
+    type TeapotDemo,
+} from '../three-demo.js';
+import Template from './teapot-window.blp';
+
+export class TeapotWindow extends Adw.ApplicationWindow {
+    declare private _glAreaContainer: Gtk.Box;
+    declare private _tessRow: Adw.ComboRow;
+    declare private _lidRow: Adw.SwitchRow;
+    declare private _bodyRow: Adw.SwitchRow;
+    declare private _bottomRow: Adw.SwitchRow;
+    declare private _fitLidRow: Adw.SwitchRow;
+    declare private _nonblinnRow: Adw.SwitchRow;
+    declare private _shadingRow: Adw.ComboRow;
+    declare private _splitView: Adw.OverlaySplitView;
+    declare private _sidebarToggleButton: Gtk.ToggleButton;
+    declare private _pauseButton: Gtk.Button;
+
+    /** Live demo reference; set once the WebGLBridge is ready. */
+    private _demo: TeapotDemo | null = null;
+
+    static {
+        GObject.registerClass(
+            {
+                GTypeName: 'TeapotWindow',
+                Template,
+                InternalChildren: [
+                    'glAreaContainer',
+                    'tessRow',
+                    'lidRow',
+                    'bodyRow',
+                    'bottomRow',
+                    'fitLidRow',
+                    'nonblinnRow',
+                    'shadingRow',
+                    'splitView',
+                    'sidebarToggleButton',
+                    'pauseButton',
+                ],
+            },
+            this,
+        );
+    }
+
+    constructor(application: Adw.Application) {
+        super({ application });
+
+        // Set up ComboRow models
+        this._tessRow.set_model(Gtk.StringList.new(TESS_VALUES.map(String)));
+        this._tessRow.set_selected(DEFAULT_TESS_INDEX);
+
+        this._shadingRow.set_model(Gtk.StringList.new([...SHADING_VALUES]));
+        this._shadingRow.set_selected(DEFAULT_SHADING_INDEX);
+
+        // Create and insert WebGL widget
+        const glArea = new WebGLBridge();
+        glArea.set_hexpand(true);
+        glArea.set_vexpand(true);
+        glArea.installGlobals();
+        this._glAreaContainer.append(glArea);
+
+        // Expose GL area dimensions as innerWidth/innerHeight for three.js
+        Object.defineProperty(globalThis, 'innerWidth', {
+            get: () => glArea.get_allocated_width(),
+            configurable: true,
+        });
+        Object.defineProperty(globalThis, 'innerHeight', {
+            get: () => glArea.get_allocated_height(),
+            configurable: true,
+        });
+
+        // Initialize three.js when GL context is ready
+        glArea.onReady((canvas) => {
+            glArea.grab_focus();
+            const ctx = glArea.get_context()!;
+            print(`Context version: OpenGL${ctx.get_use_es() ? ' ES' : ''} ${ctx.get_version().join('.')}`);
+
+            this._demo = start(canvas);
+            this.connectControls(this._demo);
+        });
+
+        // Pause/Resume button — toggles demo state and swaps the icon.
+        this._pauseButton.connect('clicked', () => {
+            if (!this._demo) return;
+            if (this._demo.isPaused) {
+                this._demo.resume();
+                this._pauseButton.set_icon_name('media-playback-pause-symbolic');
+                this._pauseButton.set_tooltip_text('Pause Rendering');
+            } else {
+                this._demo.pause();
+                this._pauseButton.set_icon_name('media-playback-start-symbolic');
+                this._pauseButton.set_tooltip_text('Resume Rendering');
+            }
+        });
+    }
+
+    private connectControls(demo: TeapotDemo) {
+        this._tessRow.connect('notify::selected', () => {
+            demo.effectController.newTess = TESS_VALUES[this._tessRow.selected];
+            demo.render();
+        });
+
+        this._shadingRow.connect('notify::selected', () => {
+            demo.effectController.newShading = SHADING_VALUES[this._shadingRow.selected];
+            demo.render();
+        });
+
+        this._lidRow.connect('notify::active', () => {
+            demo.effectController.lid = this._lidRow.active;
+            demo.render();
+        });
+
+        this._bodyRow.connect('notify::active', () => {
+            demo.effectController.body = this._bodyRow.active;
+            demo.render();
+        });
+
+        this._bottomRow.connect('notify::active', () => {
+            demo.effectController.bottom = this._bottomRow.active;
+            demo.render();
+        });
+
+        this._fitLidRow.connect('notify::active', () => {
+            demo.effectController.fitLid = this._fitLidRow.active;
+            demo.render();
+        });
+
+        this._nonblinnRow.connect('notify::active', () => {
+            demo.effectController.nonblinn = this._nonblinnRow.active;
+            demo.render();
+        });
+    }
+}

package/src/three-demo.ts

@@ -0,0 +1,242 @@
+// Ported from refs/three/examples/webgl_geometry_teapot.html
+// Original: MIT license, three.js contributors
+// Reimplemented as platform-agnostic module for GJS and browser targets.
+
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
+
+export type ShadingMode = 'wireframe' | 'flat' | 'smooth' | 'glossy' | 'textured' | 'reflective';
+
+export const TESS_VALUES = [2, 3, 4, 5, 6, 8, 10, 15, 20, 30, 40, 50] as const;
+export const SHADING_VALUES: readonly ShadingMode[] = [
+    'wireframe',
+    'flat',
+    'smooth',
+    'glossy',
+    'textured',
+    'reflective',
+];
+export const DEFAULT_TESS_INDEX = 7; // "15"
+export const DEFAULT_SHADING_INDEX = 3; // "glossy"
+
+export interface TeapotEffectController {
+    newTess: number;
+    lid: boolean;
+    body: boolean;
+    bottom: boolean;
+    fitLid: boolean;
+    nonblinn: boolean;
+    newShading: ShadingMode;
+}
+
+export interface TeapotDemo {
+    readonly effectController: TeapotEffectController;
+    /** Call after changing effectController properties to schedule a re-render. */
+    render(): void;
+    /** Suppress future render() calls until `resume()` is called. */
+    pause(): void;
+    /** Flush any pending render queued during pause. */
+    resume(): void;
+    /** Current paused state. */
+    readonly isPaused: boolean;
+}
+
+export interface StartOptions {
+    /** Base path for loading texture assets (default: './'). */
+    assetBase?: string;
+}
+
+const TEAPOT_SIZE = 300;
+
+export function start(canvas: HTMLCanvasElement, options?: StartOptions): TeapotDemo {
+    const assetBase = options?.assetBase ?? './';
+
+    // Renderer
+    // oxlint-disable-next-line typescript/no-explicit-any -- THREE.WebGLRenderer canvas option expects OffscreenCanvas; GJS canvas type is incompatible
+    const renderer = new THREE.WebGLRenderer({ canvas: canvas as any, antialias: true });
+    // Pass updateStyle=false: the canvas CSS width/height are managed by the
+    // host container (flex layout). We only want to update the drawing buffer.
+    renderer.setSize(canvas.width, canvas.height, false);
+    // Track the size we last handed the renderer. `renderer.domElement` IS this
+    // canvas, so the obvious `renderer.domElement.width !== w` compares a value
+    // with itself and is never true — the resize branch below would be dead and
+    // the camera aspect would stay frozen at the first allocation. (The pixel
+    // post-processing showcase already carries this shape; keep the two aligned.)
+    let prevW = canvas.width;
+    let prevH = canvas.height;
+
+    // Camera
+    const camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 1, 80000);
+    camera.position.set(-600, 550, 1300);
+
+    // Scene
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0xaaaaaa);
+
+    // Lights
+    const ambientLight = new THREE.AmbientLight(0x7c7c7c, 2.0);
+    scene.add(ambientLight);
+
+    const light = new THREE.DirectionalLight(0xffffff, 2.0);
+    light.position.set(0.32, 0.39, 0.7);
+    scene.add(light);
+
+    // Texture map
+    const textureMap = new THREE.TextureLoader().load(`${assetBase}assets/uv_grid_opengl.jpg`);
+    textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
+    textureMap.anisotropy = 16;
+    textureMap.colorSpace = THREE.SRGBColorSpace;
+
+    // Reflection map (cubemap)
+    const path = `${assetBase}assets/pisa/`;
+    const urls = ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'];
+    const textureCube = new THREE.CubeTextureLoader().setPath(path).load(urls);
+
+    // Materials
+    const materials: Record<ShadingMode, THREE.Material> = {
+        wireframe: new THREE.MeshBasicMaterial({ wireframe: true }),
+        flat: new THREE.MeshPhongMaterial({ specular: 0x000000, flatShading: true, side: THREE.DoubleSide }),
+        smooth: new THREE.MeshLambertMaterial({ side: THREE.DoubleSide }),
+        glossy: new THREE.MeshPhongMaterial({
+            color: 0xc0c0c0,
+            specular: 0x404040,
+            shininess: 300,
+            side: THREE.DoubleSide,
+        }),
+        textured: new THREE.MeshPhongMaterial({ map: textureMap, side: THREE.DoubleSide }),
+        reflective: new THREE.MeshPhongMaterial({ envMap: textureCube, side: THREE.DoubleSide }),
+    };
+
+    // OrbitControls
+    // oxlint-disable-next-line typescript/no-explicit-any -- OrbitControls domElement type is HTMLElement; GJS canvas type is incompatible
+    const cameraControls = new OrbitControls(camera, canvas as any);
+    cameraControls.addEventListener('change', render);
+
+    // Effect controller — external GUI mutates this, then calls render()
+    const effectController: TeapotEffectController = {
+        newTess: 15,
+        lid: true,
+        body: true,
+        bottom: true,
+        fitLid: false,
+        nonblinn: false,
+        newShading: 'glossy',
+    };
+
+    // Track last-rendered state for change detection
+    let tess = -1; // force initial creation
+    let bBottom: boolean;
+    let bLid: boolean;
+    let bBody: boolean;
+    let bFitLid: boolean;
+    let bNonBlinn: boolean;
+    let shading: ShadingMode;
+    let teapot: THREE.Mesh | undefined;
+
+    function createNewTeapot() {
+        if (teapot !== undefined) {
+            teapot.geometry.dispose();
+            scene.remove(teapot);
+        }
+
+        const geometry = new TeapotGeometry(
+            TEAPOT_SIZE,
+            tess,
+            effectController.bottom,
+            effectController.lid,
+            effectController.body,
+            effectController.fitLid,
+            !effectController.nonblinn,
+        );
+
+        teapot = new THREE.Mesh(geometry, materials[shading]);
+        scene.add(teapot);
+    }
+
+    function doRender() {
+        // Check if parameters changed
+        if (
+            effectController.newTess !== tess ||
+            effectController.bottom !== bBottom ||
+            effectController.lid !== bLid ||
+            effectController.body !== bBody ||
+            effectController.fitLid !== bFitLid ||
+            effectController.nonblinn !== bNonBlinn ||
+            effectController.newShading !== shading
+        ) {
+            tess = effectController.newTess;
+            bBottom = effectController.bottom;
+            bLid = effectController.lid;
+            bBody = effectController.body;
+            bFitLid = effectController.fitLid;
+            bNonBlinn = effectController.nonblinn;
+            shading = effectController.newShading;
+
+            createNewTeapot();
+        }
+
+        // Reflective mode uses cubemap as background
+        if (shading === 'reflective') {
+            scene.background = textureCube;
+        } else {
+            scene.background = null;
+        }
+
+        // Handle resize — canvas.width/height are the GTK-owned drawing buffer
+        const w = canvas.width;
+        const h = canvas.height;
+        if (prevW !== w || prevH !== h) {
+            prevW = w;
+            prevH = h;
+            renderer.setSize(w, h, false);
+            camera.aspect = w / h;
+            camera.updateProjectionMatrix();
+        }
+
+        renderer.render(scene, camera);
+    }
+
+    // Render scheduling: coalesce multiple render requests into one frame.
+    // In GTK, the GL context is only current inside the frame pipeline (rAF),
+    // so direct calls from signal handlers would fail.
+    let renderPending = false;
+    let paused = false;
+    // Set when render() is called while paused, so resume() can flush it.
+    let deferredRender = false;
+    function render() {
+        if (paused) {
+            deferredRender = true;
+            return;
+        }
+        if (renderPending) return;
+        renderPending = true;
+        requestAnimationFrame(() => {
+            renderPending = false;
+            doRender();
+        });
+    }
+
+    // Initial render
+    render();
+
+    return {
+        effectController,
+        render,
+        get isPaused() {
+            return paused;
+        },
+        pause() {
+            if (paused) return;
+            paused = true;
+        },
+        resume() {
+            if (!paused) return;
+            paused = false;
+            if (deferredRender) {
+                deferredRender = false;
+                render();
+            }
+        },
+    };
+}