Babylon.js 8 + Vite 6 Typescript Template with Havok Physics

Demos and projects
1

With the dazzling arrival of the incredible Babylon 8.0, it’s time to update our favorite development template and share it with you!

  • Freshiest Babylon.js, Vite, Typescript and all other dependencies
  • WebGPU engine by default, WebGL2 supported as well
  • Havok Physics already set up and included in the demo scene
  • FPS Counter in the right top corner
  • Inspector - press Ctrl+Alt+Shift+I
  • Axes Viewer
  • Default Rendering Pipeline with FXAA and MSAA enabled
  • All console.log messages are cleared in the production build
  • Easy to disable not needed functions (Havok, Axes Viewer, Pipeline etc)
14 Likes
Another havok in ts react project
2

Thank you for this solution!
Previously, I didn’t know about this way to exclude dependencies in vite.config.ts:

  optimizeDeps: {
    exclude: ["@babylonjs/havok"],
  },

Before, I used a dirty hack in my code like this:

async physicsEngine() {
  const wasmBinary = await fetch('./node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm');
  const wasmBinaryArrayBuffer = await wasmBinary.arrayBuffer();
  return HavokPhysics({
    wasmBinary: wasmBinaryArrayBuffer,
  });
}

:heart:

2 Likes
3

The small update - GitHub - eldinor/bp800: Babylon.js 8 + Vite 6 Typescript Template with Havok Physics

  • Tree-shaking to reduce bundle size
  • Inspector’s import only for DEV mode to reduce bundle size
5 Likes
4

Updated to 8.2.1

2 Likes
5

You’re really punctual

1 Like
6

Oh, I am happy to hear that!

We made a slight change to the declaration files (to support node16 and nodenext module resolutions), and though i fully tested it, anything can go wrong. So - Happy to hear that 8.2.1 is working correctly :slight_smile:

7

There were some things in 8.2.0 which should be corrected :slight_smile:

Thanks! :slight_smile:

1 Like
8

Updated to 8.31.0

6 Likes
9

GJ on the template. Vite,even with it’s quirks is nicer to work with than 95% of the other options out there for client side dev.

1 Like
10

Update to 8.36.1, scene.createDefaultEnvironment() import issue fix.

3 Likes
11

Hey @labris!

I’m having some issues with importing the AdvancedDynamicTexture from the GUI.

I keep getting this error:

Uncaught (in promise) TypeError: engine.createDynamicTexture is not a function

I tried importing like this:

import { AdvancedDynamicTexture, TextBlock, Control } from “@babylonjs/gui”;

When I import the entire core package it works fine. So I’m thinking I’m simply missing a needed import to make it work.


import "@babylonjs/core/Materials/Textures/dynamicTexture"; 

import "@babylonjs/loaders/glTF";

import "@babylonjs/core";

import { Engine } from "@babylonjs/core/Engines/engine";

import { Scene } from "@babylonjs/core/scene";

import { Vector3 } from "@babylonjs/core/Maths/math.vector";

import { Color3 } from "@babylonjs/core/Maths/math.color";

import { WebGPUEngine } from "@babylonjs/core/Engines/webgpuEngine";

import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";

import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";

import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";

import { Space } from "@babylonjs/core/Maths/math.axis"; 

import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";

import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";

import { Texture } from "@babylonjs/core/Materials/Textures/texture";

import { GlowLayer } from "@babylonjs/core/Layers/glowLayer"; 

import "@babylonjs/core/Helpers/sceneHelpers";

import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent";

import {  TextBlock, Control } from "@babylonjs/gui";

import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
12

For WebGL2 engine it would be enough

import { AdvancedDynamicTexture, Button } from "@babylonjs/gui/2D";

But for WebGPU engine (which is turned on by default in this template, see bp800/src/app.ts at c656f9d7b06e93a8d098fc0df3785c97efd571df · eldinor/bp800 · GitHub ) one needs to add


// WebGPU specific imports

import "@babylonjs/core/Engines/WebGPU/Extensions/engine.dynamicTexture";

import "@babylonjs/core/Engines/WebGPU/Extensions/engine.renderTarget";

You may find the working WebGPU example in this branch

4 Likes
13

Thanks for the quick reply, this was it! :smiling_face_with_sunglasses:

1 Like
14

I added GUI support for WebGL and WebGPU to the default template

2 Likes
15

So I can consider this as a contribution on my part? :smiley: Jk, you guys are awesome!

1 Like