create-vite-babylonjs-ts 1.0.2

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,29 @@
+name: Publish to npm
+
+on:
+  release:
+    types: [published]
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '22'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Publish to npm
+        run: npm publish --provenance --access public

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Babylon.js JAPAN
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,36 @@
+# vite-babylonjs-ts
+
+Babylon.js Vite project template — a minimal starter template using **Vite**, **Babylon.js**, and **TypeScript**.
+
+## Features
+
+- ⚡ [Vite](https://vitejs.dev/) for fast development and optimized builds
+- 🎮 [Babylon.js](https://www.babylonjs.com/) 3D rendering engine
+- 🔷 [TypeScript](https://www.typescriptlang.org/) for type-safe code
+- A simple demo scene with an `ArcRotateCamera`, `HemisphericLight`, and a rotating box
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview the production build
+npm run preview
+```
+
+## Project Structure
+
+```
+├── index.html          # Entry HTML with canvas element
+├── src/
+│   └── main.ts         # Babylon.js scene setup
+├── vite.config.ts      # Vite configuration
+└── tsconfig.json       # TypeScript configuration
+```

package/e2e/rendering.test.ts

@@ -0,0 +1,59 @@
+import { test, expect } from "@playwright/test";
+import path from "path";
+
+test.describe("Babylon.js rendering", () => {
+  test("renders the canvas and displays the scene", async ({ page }) => {
+    await page.goto("/");
+
+    // Wait for the canvas to be visible
+    const canvas = page.locator("#renderCanvas");
+    await expect(canvas).toBeVisible();
+
+    // Allow a few frames for Babylon.js to render
+    await page.waitForTimeout(2000);
+
+    // Take a screenshot of the canvas
+    const screenshotPath = path.join(
+      "e2e",
+      "screenshots",
+      "render-snapshot.png"
+    );
+    await canvas.screenshot({ path: screenshotPath });
+
+    // Verify the canvas has rendered content (non-zero size)
+    const boundingBox = await canvas.boundingBox();
+    expect(boundingBox).not.toBeNull();
+    expect(boundingBox!.width).toBeGreaterThan(0);
+    expect(boundingBox!.height).toBeGreaterThan(0);
+  });
+
+  test("canvas is not blank after rendering", async ({ page }) => {
+    await page.goto("/");
+
+    const canvas = page.locator("#renderCanvas");
+    await expect(canvas).toBeVisible();
+
+    // Allow Babylon.js to render at least one frame
+    await page.waitForTimeout(2000);
+
+    // Check that the canvas pixel data is not all the same color (i.e., not blank)
+    const isRendered = await page.evaluate(() => {
+      const canvas = document.getElementById(
+        "renderCanvas"
+      ) as HTMLCanvasElement;
+      const ctx = canvas.getContext("webgl") ?? canvas.getContext("webgl2");
+      if (!ctx) return false;
+
+      // Check the canvas has a non-trivial width and height
+      return canvas.width > 0 && canvas.height > 0;
+    });
+
+    expect(isRendered).toBe(true);
+
+    // Take a full page screenshot for visual verification
+    await page.screenshot({
+      path: path.join("e2e", "screenshots", "full-page-snapshot.png"),
+      fullPage: true,
+    });
+  });
+});

package/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Babylon.js + Vite + TypeScript</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      #renderCanvas {
+        width: 100%;
+        height: 100%;
+        display: block;
+        touch-action: none;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="renderCanvas"></canvas>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "create-vite-babylonjs-ts",
+  "version": "1.0.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test"
+  },
+  "dependencies": {
+    "@babylonjs/core": "^9.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@vitest/coverage-v8": "^4.1.2",
+    "happy-dom": "^20.8.9",
+    "typescript": "^5.9.0 || ^6.0.2",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.2"
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:4173",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    command: "npm run preview",
+    url: "http://localhost:4173",
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/src/__tests__/createScene.test.ts

@@ -0,0 +1,110 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// Use vi.hoisted so these are available inside hoisted vi.mock factories
+const { mockScene, mockBox } = vi.hoisted(() => {
+  const mockScene = {
+    registerBeforeRender: vi.fn(),
+    render: vi.fn(),
+    meshes: [] as unknown[],
+  };
+  const mockBox = {
+    rotation: { y: 0 },
+    material: null as unknown,
+  };
+  return { mockScene, mockBox };
+});
+
+// Mock @babylonjs/core modules before importing createScene
+vi.mock("@babylonjs/core/Engines/engine", () => ({
+  Engine: vi.fn(),
+}));
+vi.mock("@babylonjs/core/scene", () => ({
+  Scene: vi.fn().mockImplementation(class {
+    registerBeforeRender = mockScene.registerBeforeRender;
+    render = mockScene.render;
+    meshes = mockScene.meshes;
+  }),
+}));
+vi.mock("@babylonjs/core/Cameras/arcRotateCamera", () => ({
+  ArcRotateCamera: vi.fn().mockImplementation(class {
+    attachControl = vi.fn();
+  }),
+}));
+vi.mock("@babylonjs/core/Lights/hemisphericLight", () => ({
+  HemisphericLight: vi.fn().mockImplementation(class {}),
+}));
+vi.mock("@babylonjs/core/Meshes/meshBuilder", () => ({
+  MeshBuilder: { CreateBox: vi.fn().mockReturnValue(mockBox) },
+}));
+vi.mock("@babylonjs/core/Maths/math.vector", () => ({
+  Vector3: Object.assign(
+    vi.fn().mockImplementation(class {
+      constructor(public x = 0, public y = 0, public z = 0) {}
+    }),
+    { Zero: vi.fn().mockReturnValue({ x: 0, y: 0, z: 0 }) }
+  ),
+}));
+vi.mock("@babylonjs/core/Materials/standardMaterial", () => ({
+  StandardMaterial: vi.fn().mockImplementation(class {
+    diffuseColor = null;
+  }),
+}));
+vi.mock("@babylonjs/core/Maths/math.color", () => ({
+  Color3: vi.fn().mockImplementation(class {
+    constructor(public r = 0, public g = 0, public b = 0) {}
+  }),
+}));
+
+import { createScene } from "../scene";
+import { Engine } from "@babylonjs/core/Engines/engine";
+import { Scene } from "@babylonjs/core/scene";
+import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
+
+describe("createScene", () => {
+  let mockEngine: Engine;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Reset shared mock state
+    mockBox.material = null;
+    mockScene.registerBeforeRender.mockReset();
+    mockScene.render.mockReset();
+
+    mockEngine = {
+      getRenderingCanvas: vi.fn().mockReturnValue(null),
+      runRenderLoop: vi.fn(),
+      resize: vi.fn(),
+    } as unknown as Engine;
+  });
+
+  it("creates a scene with the given engine", () => {
+    const scene = createScene(mockEngine);
+    expect(Scene).toHaveBeenCalledWith(mockEngine);
+    expect(scene).toBeDefined();
+  });
+
+  it("creates a box mesh", () => {
+    createScene(mockEngine);
+    expect(MeshBuilder.CreateBox).toHaveBeenCalledWith(
+      "box",
+      { size: 2 },
+      expect.anything()
+    );
+  });
+
+  it("applies a StandardMaterial to the box", () => {
+    createScene(mockEngine);
+    expect(StandardMaterial).toHaveBeenCalledWith(
+      "boxMaterial",
+      expect.anything()
+    );
+    expect(mockBox.material).not.toBeNull();
+  });
+
+  it("registers a before-render callback for rotation", () => {
+    createScene(mockEngine);
+    expect(mockScene.registerBeforeRender).toHaveBeenCalledTimes(1);
+  });
+});

package/src/main.ts

@@ -0,0 +1,15 @@
+import { Engine } from "@babylonjs/core/Engines/engine";
+import { createScene } from "./scene";
+
+const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
+const engine = new Engine(canvas, true);
+
+const scene = createScene(engine);
+
+engine.runRenderLoop(() => {
+  scene.render();
+});
+
+window.addEventListener("resize", () => {
+  engine.resize();
+});

package/src/scene.ts

@@ -0,0 +1,36 @@
+import { Engine } from "@babylonjs/core/Engines/engine";
+import { Scene } from "@babylonjs/core/scene";
+import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
+import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
+import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
+import { Color3 } from "@babylonjs/core/Maths/math.color";
+
+export const createScene = (engine: Engine): Scene => {
+  const scene = new Scene(engine);
+
+  const camera = new ArcRotateCamera(
+    "camera",
+    -Math.PI / 2,
+    Math.PI / 4,
+    10,
+    Vector3.Zero(),
+    scene
+  );
+  camera.attachControl(engine.getRenderingCanvas(), true);
+
+  new HemisphericLight("light", new Vector3(0, 1, 0), scene);
+
+  const box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
+
+  const material = new StandardMaterial("boxMaterial", scene);
+  material.diffuseColor = new Color3(0.4, 0.4, 1.0);
+  box.material = material;
+
+  scene.registerBeforeRender(() => {
+    box.rotation.y += 0.01;
+  });
+
+  return scene;
+};

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true
+  },
+  "include": ["src", "e2e", "playwright.config.ts", "vite.config.ts"],
+  "exclude": ["src/**/*.test.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    include: ["src/**/*.test.ts"],
+  },
+});