BabylonJS Popover 3D

Demos and projects
,
1

babylonjs-popover

babylonjs-popover-screenshot
babylonjs-popover-screenshot905×470 37.8 KB

Lightweight 3D popover component for Babylon.js: short-lived text in the scene (damage numbers, pickups, etc.).

Modes

  • 3D Billboard – text in the scene that always faces the camera. Use Popover3DPositioningMode.BILLBOARD.
  • 3D Vertical – text in the scene, upright (vertical to ground); rotates only around Y to face camera at creation, then stays fixed. Use Popover3DPositioningMode.VERTICAL.

Install

npm i babylonjs-popover
# or
yarn add babylonjs-popover

Usage

3D popover (Billboard or Vertical)

import Popover, { Popover3DPositioningMode } from 'babylonjs-popover'
import { Scene, Vector3 } from 'babylonjs'

const popover = Popover.getInstance()

// Billboard: always faces the camera
await popover.showText3D('-10%', scene, position, 'rgba(255,80,80,0.9)', 'rgba(0,0,0,0.85)', 2)

// Vertical: upright, fixed orientation (Y-only rotation at creation)
await popover.showText3D(
  '+1 Apple',
  scene,
  position,
  'rgba(200,208,198,0.95)',
  'rgba(0,0,0,0.85)',
  2,
  Popover3DPositioningMode.VERTICAL
)

Project-wide defaults (font, size)

Call configure() once before any getInstance() so the singleton uses your defaults:

import Popover from 'babylonjs-popover'

Popover.configure({ fontFamily: 'Helvetica', fontSize: 24 })
const popover = Popover.getInstance()

Per-instance font and size

popover.setFontFamily('YourFont')
popover.setFontSize(24)

3D texture width (avoid clipping last character)

Width is measured with CanvasRenderingContext2D.measureText() for the actual font, then multiplied by a padding factor (default 1.2 = 20% extra). If the last letter still clips (e.g. with some fonts), increase the factor:

Popover.configure({
  fontFamily: 'Helvetica',
  textureWidthPaddingFactor: 1.3,  // e.g. 30% extra width
  // texture3DMinWidth: 256,
  // texture3DMaxWidth: 1024,
})

Configure: 3D animation and rendering

All 3D defaults from POPOVER_CONFIG can be overridden via Popover.configure() (call before getInstance()). Example with common 3D options:

import Popover, { Popover3DPositioningMode } from 'babylonjs-popover'

Popover.configure({
  fontFamily: 'Helvetica',
  fontSize: 24,
  positioningMode3D: Popover3DPositioningMode.VERTICAL,
  // 3D animation
  animationOffsetY3D: 3.5,      // vertical offset (world units) during fade-out
  scaleFactor3D: 1.2,            // end scale multiplier
  animationSpeed3D: 40,          // ms per animation step
  alphaFadeStart3D: 0.7,         // start fade at 70% of duration (0–1)
  alphaFadeDuration3D: 800,     // fade duration in ms
  // 3D rendering
  textureAlpha3D: 0.8,
  planeBaseHeight3D: 1,
  renderingGroupId3D: 2,
  // texture size (if needed)
  textureWidthPaddingFactor: 1.2,
  texture3DMinWidth: 256,
  texture3DMaxWidth: 1024,
})

const popover = Popover.getInstance()

License

This project is licensed under the Apache License 2.0.

4 Likes
2

Before reading the topic I thought it was a tool to Popovify something, like making it a bit more @Evgeni_Popov - like :joy:

4 Likes
3

Yeah, you know, at first I stuffed 2D functionality using @babylonjs/gui into this package, but then I decided I wanted to build everything from small “bricks.” It’s that YAGNI (You Ain’t Gonna Need It) principle—keeping it lean so I can reuse those pieces later.

When I was younger, I churned out so much code, but as I’ve started getting older, I’ve begun asking myself: is my code even reusable? I figure it’ll be a win if, after the game development process, I leave behind at least a couple of modules that someone else finds useful.

And man, I didn’t even catch that Evgeny Popov pun at first. I’m starting to suspect Evgeny is somehow involved in all of this.

People have actually told me before that I should submit a PR to the engine itself, but I’m honestly so self-conscious about my code. I just don’t feel like it’s high-quality enough to become part of the BabylonJS . So, I end up just putting things together as various addons instead. Maybe I’ll grow into it and start making Pull Requests once I feel more confident in my skills. :grin:

1 Like
4

If i can PR to the code, you definitely can :slight_smile: i lost code consciousness so long ago ahah That is the beauty of Open Source: worst case scenario ppl will help making the code better. I learned so much from PR feedback that it is definitely worth it and i was never shamed on repo feedback, this only happened on stackoverflow :slight_smile:

Even my PR titles forgot they were public
Attachment.jpeg

1 Like
5

Thanks to AI, things have become easier now. I was embarrassed to admit that I couldn’t even properly work with Git without IDE. My knowledge is largely superficial, and as a result, after years of development, I found myself wondering how I couldn’t use many things properly.

There was a moment when someone told me on the forum that I could make a pull request, but I was embarrassed to say that I couldn’t. :grin: May be time will come and I will create official addons for BabylonJS. :roll_eyes:

1 Like