feat: babylon extension

README.md

@@ -23,7 +23,7 @@ callback ([DWM](https://github.com/deno-windowing/dwm) handles both).
 
 ```ts
 // GLES2 3.2 API
-import * as gl from "https://deno.land/x/[email protected].0/api/gles23.2.ts";
+import * as gl from "https://deno.land/x/[email protected].1/api/gles23.2.ts";
 
 // Initialize function pointers
 gl.load(yourGetProcAddress);
@@ -45,6 +45,11 @@ along with `--allow-ffi`.
 deno run --unstable --allow-ffi <file>
 ```
 
+Extensions:
+
+- [Babylon](https://www.babylonjs.com/) (Use
+  `ext/babylon.ts` for an easy to use wrapper)
+
 ## Maintainers
 
 - Dj ([@DjDeveloperr](https://github.com/DjDeveloperr))

examples/babylon.ts

@@ -0,0 +1,61 @@
+import { init, World } from "../ext/babylon.ts";
+
+class Game extends World {
+  constructor() {
+    super({
+      title: "Babylon.js",
+      width: 800,
+      height: 600,
+    }, {
+      preserveDrawingBuffer: true,
+      stencil: true,
+      // deno-lint-ignore no-explicit-any
+    } as any, true);
+  }
+
+  createScene() {
+    const scene = new BABYLON.Scene(this.engine);
+
+    // This creates and positions a free camera (non-mesh)
+    const camera = new BABYLON.FreeCamera(
+      "camera1",
+      new BABYLON.Vector3(0, 5, -10),
+      scene,
+    );
+
+    // This targets the camera to scene origin
+    camera.setTarget(BABYLON.Vector3.Zero());
+
+    // This attaches the camera to the canvas
+    camera.attachControl(window, true);
+
+    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
+    const light = new BABYLON.HemisphericLight(
+      "light",
+      new BABYLON.Vector3(0, 1, 0),
+      scene,
+    );
+
+    // Default intensity is 1. Let's dim the light a small amount
+    light.intensity = 0.7;
+
+    // Our built-in 'sphere' shape.
+    const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {
+      diameter: 2,
+      segments: 32,
+    }, scene);
+
+    // Move the sphere upward 1/2 its height
+    sphere.position.y = 1;
+
+    // Our built-in 'ground' shape.
+    const _ground = BABYLON.MeshBuilder.CreateGround("ground", {
+      width: 6,
+      height: 6,
+    }, scene);
+
+    return scene;
+  }
+}
+
+init(new Game());

examples/babylon2.ts

@@ -0,0 +1,43 @@
+import { init, World } from "../ext/babylon.ts";
+
+class Game extends World {
+  constructor() {
+    super({
+      title: "Babylon.js",
+      width: 800,
+      height: 600,
+    }, {
+      preserveDrawingBuffer: true,
+      stencil: true,
+      // deno-lint-ignore no-explicit-any
+    } as any, true);
+  }
+
+  createScene() {
+    const scene = new BABYLON.Scene(this.engine);
+
+    const camera = new BABYLON.ArcRotateCamera(
+      "camera",
+      -Math.PI / 2,
+      Math.PI / 2.5,
+      15,
+      new BABYLON.Vector3(0, 0, 0),
+    );
+    camera.attachControl(this.canvas, true);
+    const _light = new BABYLON.HemisphericLight(
+      "light",
+      new BABYLON.Vector3(1, 1, 0),
+      scene,
+    );
+
+    BABYLON.SceneLoader.ImportMeshAsync(
+      ["ground", "semi_house"],
+      "https://assets.babylonjs.com/meshes/",
+      "both_houses_scene.babylon",
+    );
+
+    return scene;
+  }
+}
+
+init(new Game());

examples/three.js → examples/three.ts

@@ -1,10 +1,11 @@
+// deno-lint-ignore-file no-explicit-any
 // Copied from https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes_gpu.html
 // Copyright © 2010-2021 three.js authors
 
 import { WebGLCanvas } from "../src/webgl/mod.ts";
-import * as THREE from "https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.module.js";
-import * as BufferGeometryUtils from "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/utils/BufferGeometryUtils.js";
-import { TrackballControls } from "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/controls/TrackballControls.js";
+import * as THREE from "npm:three";
+import * as BufferGeometryUtils from "npm:three/examples/jsm/utils/BufferGeometryUtils.js";
+import { TrackballControls } from "npm:three/examples/jsm/controls/TrackballControls.js";
 
 const canvas = new WebGLCanvas({
   title: "THREE.js Interactive Example",
@@ -29,19 +30,19 @@ Object.defineProperties(window, {
   },
 });
 
-let camera, controls, scene, renderer;
-let pickingTexture, pickingScene;
-let highlightBox;
+let camera: any, controls: any, scene: any, renderer: any;
+let pickingTexture: any, pickingScene: any;
+let highlightBox: any;
 
-const pickingData = [];
+const pickingData: any[] = [];
 
 const pointer = new THREE.Vector2();
 const offset = new THREE.Vector3(10, 10, 10);
 
 init();
 animate();
 
-function applyVertexColors(geometry, color) {
+function applyVertexColors(geometry: any, color: any) {
   const position = geometry.attributes.position;
   const colors = [];
 
@@ -59,7 +60,8 @@ function init() {
   try {
     camera = new THREE.PerspectiveCamera(
       70,
-      window.innerWidth / window.innerHeight,
+      canvas.window.framebufferSize.width /
+        canvas.window.framebufferSize.height,
       1,
       10000,
     );
@@ -156,8 +158,10 @@ function init() {
     scene.add(highlightBox);
 
     renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
-    renderer.setPixelRatio(window.devicePixelRatio);
-    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setSize(
+      canvas.window.framebufferSize.width,
+      canvas.window.framebufferSize.height,
+    );
 
     controls = new TrackballControls(camera, renderer.domElement);
     controls.rotateSpeed = 1.0;
@@ -176,7 +180,7 @@ function init() {
   }
 }
 
-function onMouseMove(e) {
+function onMouseMove(e: any) {
   pointer.x = e.clientX;
   pointer.y = e.clientY;
 }
@@ -190,12 +194,11 @@ function pick() {
   // render the picking scene off-screen
 
   // set the view offset to represent just a single pixel under the mouse
-
   camera.setViewOffset(
     renderer.domElement.width,
     renderer.domElement.height,
-    pointer.x * window.devicePixelRatio | 0,
-    pointer.y * window.devicePixelRatio | 0,
+    pointer.x * (window as any).devicePixelRatio | 0,
+    pointer.y * (window as any).devicePixelRatio | 0,
     1,
     1,
   );
@@ -236,8 +239,12 @@ function pick() {
 }
 
 addEventListener("resize", () => {
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  camera.aspect = window.innerWidth / window.innerHeight;
+  renderer.setSize(
+    canvas.window.framebufferSize.width,
+    canvas.window.framebufferSize.height,
+  );
+  camera.aspect = canvas.window.framebufferSize.width /
+    canvas.window.framebufferSize.height;
   camera.updateProjectionMatrix();
 });
 

examples/triangle.ts

@@ -2,7 +2,7 @@ import {
   createWindow,
   getProcAddress,
   mainloop,
-} from "https://deno.land/x/dwm@0.1.0/mod.ts";
+} from "https://deno.land/x/dwm@0.2.1/mod.ts";
 import * as gl from "../api/gles23.2.ts";
 
 const window = createWindow({

examples/babylon_runner.js → ext/babylon.ts

@@ -1,3 +1,4 @@
+//@deno-types="npm:babylonjs"
 import "https://deno.land/x/[email protected]/mod.ts";
 import { WebGLCanvas } from "../src/webgl/mod.ts";
 import "https://preview.babylonjs.com/ammo.js";
@@ -10,42 +11,45 @@ import "https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proced
 import "https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js";
 import "https://preview.babylonjs.com/loaders/babylonjs.loaders.js";
 import "https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js";
+import { CreateWindowOptions } from "../src/webgl/deps.ts";
 
 BABYLON.SceneLoader.ShowLoadingScreen = false;
 
-export const canvas = new WebGLCanvas({
-  title: "Babylon.js",
-  width: 800,
-  height: 600,
-  // maximized: true,
-});
-
-export const engine = new BABYLON.Engine(canvas, true, {
-  preserveDrawingBuffer: true,
-  stencil: true,
-});
+export abstract class World {
+  canvas: WebGLCanvas;
+  engine: BABYLON.Engine;
+  constructor(
+    settings: CreateWindowOptions = {},
+    engineSettings: BABYLON.EngineOptions = {},
+    antialias = true,
+  ) {
+    this.canvas = new WebGLCanvas(settings);
+    this.engine = new BABYLON.Engine(this.canvas, antialias, engineSettings);
+    addEventListener("resize", () => {
+      this.engine.resize();
+    });
 
-addEventListener("resize", () => {
-  engine.resize();
-});
+    addEventListener("close", () => {
+      this.engine.stopRenderLoop();
+    });
+  }
 
-addEventListener("close", () => {
-  engine.stopRenderLoop();
-});
+  abstract createScene(): BABYLON.Scene;
+}
 
-export function runScene(createScene) {
+export function init<T extends World>(app: T) {
+  const world = app;
   try {
-    const scene = createScene();
-
-    engine.runRenderLoop(() => {
+    const scene = world.createScene();
+    world.engine.runRenderLoop(() => {
       try {
         scene.render();
       } catch (e) {
         console.log(e);
       }
     });
 
-    return canvas.run();
+    return world.canvas.run();
   } catch (e) {
     console.log(e);
   }