minecraft-renderer 0.1.0

package/src/playground/scenes/transparencyIssue.ts

@@ -0,0 +1,11 @@
+import { BasePlaygroundScene } from '../baseScene'
+
+export default class extends BasePlaygroundScene {
+  setupWorld () {
+    this.addWorldBlock(0, 0, 0, 'water')
+    this.addWorldBlock(0, 1, 0, 'lime_stained_glass')
+    this.addWorldBlock(0, 0, -1, 'lime_stained_glass')
+    this.addWorldBlock(0, -1, 0, 'lime_stained_glass')
+    this.addWorldBlock(0, -1, -1, 'stone')
+  }
+}

package/src/playground/shared.ts

@@ -0,0 +1,79 @@
+import WorldLoader, { world } from 'prismarine-world'
+import ChunkLoader from 'prismarine-chunk'
+
+export type BlockFaceType = {
+  side: number
+  textureIndex: number
+  tint?: [number, number, number]
+  isTransparent?: boolean
+
+  // for testing
+  face?: string
+  neighbor?: string
+  light?: number
+}
+
+export type BlockType = {
+  faces: BlockFaceType[]
+
+  // for testing
+  block: string
+}
+
+export const makeError = (str: string) => {
+  reportError?.(str)
+}
+export const makeErrorCritical = (str: string) => {
+  throw new Error(str)
+}
+
+export const getSyncWorld = (version: string): world.WorldSync => {
+  const World = (WorldLoader as any)(version)
+  const Chunk = (ChunkLoader as any)(version)
+
+  const world = new World(version).sync
+
+  const methods = getAllMethods(world)
+  for (const method of methods) {
+    if (method.startsWith('set') && method !== 'setColumn') {
+      const oldMethod = world[method].bind(world)
+      world[method] = (...args) => {
+        const arg = args[0]
+        if (arg.x !== undefined && !world.getColumnAt(arg)) {
+          world.setColumn(Math.floor(arg.x / 16), Math.floor(arg.z / 16), new Chunk(undefined as any))
+        }
+        oldMethod(...args)
+      }
+    }
+  }
+
+  return world
+}
+
+function getAllMethods (obj) {
+  const methods = new Set()
+  let currentObj = obj
+
+  do {
+    for (const name of Object.getOwnPropertyNames(currentObj)) {
+      if (typeof obj[name] === 'function' && name !== 'constructor') {
+        methods.add(name)
+      }
+    }
+  } while ((currentObj = Object.getPrototypeOf(currentObj)))
+
+  return [...methods] as string[]
+}
+
+export const delayedIterator = async <T> (arr: T[], delay: number, exec: (item: T, index: number) => Promise<void>, chunkSize = 1) => {
+  // if delay is 0 then don't use setTimeout
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    if (delay) {
+      // eslint-disable-next-line no-await-in-loop
+      await new Promise(resolve => {
+        setTimeout(resolve, delay)
+      })
+    }
+    await exec(arr[i], i)
+  }
+}

package/src/resourcesManager/index.ts

@@ -0,0 +1,5 @@
+/**
+ * ResourcesManager module - handles Minecraft assets loading and management.
+ */
+
+export * from './resourcesManager'

package/src/resourcesManager/resourcesManager.ts

@@ -0,0 +1,314 @@
+import { EventEmitter } from 'events'
+import TypedEmitter from 'typed-emitter'
+import blocksAtlases from 'mc-assets/dist/blocksAtlases.json'
+import itemsAtlases from 'mc-assets/dist/itemsAtlases.json'
+import itemDefinitionsJson from 'mc-assets/dist/itemDefinitions.json'
+import blocksAtlasLatest from 'mc-assets/dist/blocksAtlasLatest.png'
+import blocksAtlasLegacy from 'mc-assets/dist/blocksAtlasLegacy.png'
+import itemsAtlasLatest from 'mc-assets/dist/itemsAtlasLatest.png'
+import itemsAtlasLegacy from 'mc-assets/dist/itemsAtlasLegacy.png'
+import christmasPack from 'mc-assets/dist/textureReplacements/christmas'
+import { AtlasParser, ItemsAtlasesOutputJson } from 'mc-assets/dist/atlasParser'
+import worldBlockProvider, { WorldBlockProvider } from 'mc-assets/dist/worldBlockProvider'
+import { ItemsRenderer } from 'mc-assets/dist/itemsRenderer'
+import { getLoadedItemDefinitionsStore } from 'mc-assets'
+
+type ResourceManagerEvents = {
+  assetsTexturesUpdated: () => void
+  assetsInventoryStarted: () => void
+  assetsInventoryReady: () => void
+}
+
+export class LoadedResourcesTransferrable {
+  // todo transfer instead!
+  readonly sourceItemDefinitionsJson: any = itemDefinitionsJson
+  readonly itemsDefinitionsStore = getLoadedItemDefinitionsStore(this.sourceItemDefinitionsJson)
+
+  allReady = false
+  // Atlas parsers
+  itemsAtlasImage!: ImageBitmap
+  blocksAtlasImage!: ImageBitmap
+  blocksAtlasJson!: ItemsAtlasesOutputJson
+  // User data (specific to current resourcepack/version)
+  customBlockStates?: Record<string, any>
+  customModels?: Record<string, any>
+  /** array where the index represents the custom model data value, and the element at that index is the model path to use */
+  customItemModelNames: Record<string, string[]> = {}
+  customTextures: {
+    items?: { tileSize: number | undefined, textures: Record<string, HTMLImageElement> }
+    blocks?: { tileSize: number | undefined, textures: Record<string, HTMLImageElement> }
+    armor?: { tileSize: number | undefined, textures: Record<string, HTMLImageElement> }
+  } = {}
+  guiAtlas: { json: any, image: ImageBitmap } | null = null
+  guiAtlasVersion = 0
+
+  itemsRenderer: ItemsRenderer | undefined
+  worldBlockProvider?: WorldBlockProvider
+  blockstatesModels: any = null
+
+  version!: string
+  texturesVersion!: string
+
+  constructor(data?: any) {
+    if (data) {
+      Object.assign(this, data)
+      // this.itemsRenderer = new ItemsRenderer(
+      //   this.version,
+      //   this.blockstatesModels,
+      //   this.itemsAtlasParser,
+      //   this.blocksAtlasParser
+      // )
+    }
+  }
+
+  prepareForTransfer() {
+    delete this.itemsRenderer
+    delete this.worldBlockProvider
+    this.customTextures = {}
+    return this
+  }
+
+}
+
+export interface ResourcesCurrentConfig {
+  version: string
+  texturesVersion?: string
+  // noBlockstatesModels?: boolean
+  noInventoryGui?: boolean
+  includeOnlyBlocks?: string[]
+}
+
+export interface UpdateAssetsRequest {
+  _?: false
+}
+
+export interface ResourcesManagerTransferred extends TypedEmitter<ResourceManagerEvents> {
+  currentResources: LoadedResourcesTransferrable
+}
+export interface ResourcesManagerCommon extends TypedEmitter<ResourceManagerEvents> {
+  currentResources: LoadedResourcesTransferrable | undefined
+}
+
+const STABLE_MODELS_VERSION = '1.21.4'
+export class ResourcesManager extends (EventEmitter as new () => TypedEmitter<ResourceManagerEvents>) {
+  static restorerName = 'ResourcesManager'
+
+  static restoreTransferred(data: any, worker?: Worker) {
+    const resourcesManager = new ResourcesManager()
+    const upResources = (data) => {
+      resourcesManager.currentResources = new LoadedResourcesTransferrable(data)
+    }
+    upResources(data.currentResources)
+    if (worker) {
+      worker.addEventListener('message', ({ data }) => {
+        if (data.class === ResourcesManager.restorerName) {
+          if (data.type === 'newResources') {
+            console.log('[worker] got new resources')
+            upResources(data.currentResources)
+          }
+          if (data.type === 'event') {
+            resourcesManager.emit(data.eventName, ...data.args)
+          }
+        }
+      })
+    }
+    return resourcesManager
+  }
+
+  prepareForTransfer(worker?: Worker) {
+    if (worker) {
+      // todo do it automatically
+      const oldEmit = this.emit.bind(this) as any
+      this.emit = ((eventName: keyof ResourceManagerEvents, ...args: any[]) => {
+        oldEmit(eventName, ...args)
+        worker.postMessage({
+          class: ResourcesManager.restorerName,
+          type: 'event',
+          eventName,
+          args,
+        })
+        // todo handle assetsInventoryReady
+        if (eventName === 'assetsTexturesUpdated' || eventName === 'assetsInventoryReady') {
+          worker.postMessage({
+            class: ResourcesManager.restorerName,
+            type: 'newResources',
+            currentResources: this.currentResources?.prepareForTransfer(),
+          })
+        }
+      }) as any
+    }
+    return {
+      __restorer: ResourcesManager.restorerName,
+      currentResources: this.currentResources?.prepareForTransfer(),
+    }
+  }
+
+  // Source data (imported, not changing)
+  sourceBlockStatesModels: any = null
+  readonly sourceBlocksAtlases: any = blocksAtlases
+  readonly sourceItemsAtlases: any = itemsAtlases
+
+  currentResources: LoadedResourcesTransferrable | undefined
+  itemsAtlasParser!: AtlasParser
+  blocksAtlasParser!: AtlasParser
+  currentConfig: ResourcesCurrentConfig | undefined
+  abortController = new AbortController()
+  _promiseAssetsReadyResolvers = Promise.withResolvers<void>()
+  get promiseAssetsReady() {
+    return this._promiseAssetsReadyResolvers.promise
+  }
+
+  async loadSourceData(version: string) {
+    // TODO
+    this.sourceBlockStatesModels ??= (await import('mc-assets/dist/blockStatesModels.json')).default
+  }
+
+  resetResources() {
+    this.currentResources = new LoadedResourcesTransferrable()
+  }
+
+  async updateAssetsData(request: UpdateAssetsRequest, unstableSkipEvent = false) {
+    if (!this.currentConfig) throw new Error('No config loaded')
+    this._promiseAssetsReadyResolvers = Promise.withResolvers()
+    const abortController = new AbortController()
+    await this.loadSourceData(this.currentConfig.version)
+    if (abortController.signal.aborted) return
+
+    const resources = this.currentResources ?? new LoadedResourcesTransferrable()
+    resources.version = this.currentConfig.version
+    resources.texturesVersion = this.currentConfig.texturesVersion ?? resources.version
+
+    resources.blockstatesModels = {
+      blockstates: {},
+      models: {}
+    }
+    // todo-low resolve version
+    resources.blockstatesModels.blockstates.latest = {
+      ...this.sourceBlockStatesModels.blockstates.latest,
+      ...resources.customBlockStates
+    }
+
+    resources.blockstatesModels.models.latest = {
+      ...this.sourceBlockStatesModels.models.latest,
+      ...resources.customModels
+    }
+
+    console.time('recreateAtlases')
+    await Promise.all([
+      this.recreateBlockAtlas(resources),
+      this.recreateItemsAtlas(resources)
+    ])
+    console.timeEnd('recreateAtlases')
+
+    if (abortController.signal.aborted) return
+
+    if (resources.version && resources.blockstatesModels && this.itemsAtlasParser && this.blocksAtlasParser) {
+      resources.itemsRenderer = new ItemsRenderer(
+        resources.version,
+        resources.blockstatesModels,
+        this.itemsAtlasParser,
+        this.blocksAtlasParser
+      )
+    }
+
+    if (abortController.signal.aborted) return
+
+    this.currentResources = resources
+    resources.allReady = true
+    if (!unstableSkipEvent) { // todo rework resourcepack optimization
+      this.emit('assetsTexturesUpdated')
+    }
+
+    if (this.currentConfig.noInventoryGui) {
+      this._promiseAssetsReadyResolvers.resolve()
+    } else {
+      this.emit('assetsInventoryStarted')
+      void this.generateGuiTextures().then(() => {
+        if (abortController.signal.aborted) return
+        if (!unstableSkipEvent) {
+          this.emit('assetsInventoryReady')
+        }
+        this._promiseAssetsReadyResolvers.resolve()
+      })
+    }
+  }
+
+  async recreateBlockAtlas(resources: LoadedResourcesTransferrable = this.currentResources!) {
+    const blockTexturesChanges = {} as Record<string, string>
+    const date = new Date()
+    if ((date.getMonth() === 11 && date.getDate() >= 24) || (date.getMonth() === 0 && date.getDate() <= 6)) {
+      Object.assign(blockTexturesChanges, christmasPack)
+    }
+
+    const blocksAssetsParser = new AtlasParser(this.sourceBlocksAtlases, blocksAtlasLatest, blocksAtlasLegacy)
+
+    const customBlockTextures = Object.keys(resources.customTextures.blocks?.textures ?? {})
+    console.time('createBlocksAtlas')
+    const { atlas: blocksAtlas, canvas: blocksCanvas } = await blocksAssetsParser.makeNewAtlas(
+      resources.texturesVersion,
+      (textureName) => {
+        if (this.currentConfig!.includeOnlyBlocks && !this.currentConfig!.includeOnlyBlocks.includes(textureName)) return false
+        const texture = resources.customTextures.blocks?.textures[textureName]
+        return blockTexturesChanges[textureName] ?? texture
+      },
+      undefined,
+      undefined,
+      customBlockTextures,
+      {
+        needHorizontalIndexes: !!this.currentConfig!.includeOnlyBlocks,
+      }
+    )
+    console.timeEnd('createBlocksAtlas')
+
+    this.blocksAtlasParser = new AtlasParser({ latest: blocksAtlas }, blocksCanvas.toDataURL())
+    resources.blocksAtlasImage = await createImageBitmap(blocksCanvas)
+    resources.blocksAtlasJson = this.blocksAtlasParser.atlas.latest
+
+    resources.worldBlockProvider = worldBlockProvider(
+      resources.blockstatesModels,
+      this.blocksAtlasParser.atlas,
+      STABLE_MODELS_VERSION
+    )
+  }
+
+  async recreateItemsAtlas(resources: LoadedResourcesTransferrable = this.currentResources!) {
+    const itemsAssetsParser = new AtlasParser(this.sourceItemsAtlases, itemsAtlasLatest, itemsAtlasLegacy)
+    const customItemTextures = Object.keys(resources.customTextures.items?.textures ?? {})
+    const { atlas: itemsAtlas, canvas: itemsCanvas } = await itemsAssetsParser.makeNewAtlas(
+      resources.texturesVersion,
+      (textureName) => {
+        const texture = resources.customTextures.items?.textures[textureName]
+        if (!texture) return
+        return texture
+      },
+      resources.customTextures.items?.tileSize,
+      undefined,
+      customItemTextures
+    )
+
+    this.itemsAtlasParser = new AtlasParser({ latest: itemsAtlas }, itemsCanvas.toDataURL())
+    resources.itemsAtlasImage = await createImageBitmap(itemsCanvas)
+  }
+
+  async generateGuiTextures() {
+    // TODO!
+    // await generateGuiAtlas()
+  }
+
+  async downloadDebugAtlas(isItems = false) {
+    const resources = this.currentResources
+    if (!resources) throw new Error('No resources loaded')
+    const atlasParser = (isItems ? this.itemsAtlasParser : this.blocksAtlasParser)!
+    const dataUrl = await atlasParser.createDebugImage(true)
+    const a = document.createElement('a')
+    a.href = dataUrl
+    a.download = `atlas-debug-${isItems ? 'items' : 'blocks'}.png`
+    a.click()
+  }
+
+  destroy() {
+    this.abortController.abort()
+    this.currentResources = undefined
+    this.abortController = new AbortController()
+  }
+}

package/src/shims/minecraftData.ts

@@ -0,0 +1,41 @@
+/**
+ * Minecraft Data Shim
+ *
+ * Provides a minimal minecraft-data implementation that only loads
+ * the versions specified in globalThis.includedVersions.
+ */
+
+const VERSION = '1.16.5'
+
+// Lazy-loaded data for each data type
+const createLazyData = (version: string) => ({
+  get attributes() { return require("minecraft-data/minecraft-data/data/pc/1.16/attributes.json") },
+  get blocks() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/blocks.json") },
+  get blockCollisionShapes() { return require("minecraft-data/minecraft-data/data/pc/1.16.1/blockCollisionShapes.json") },
+  get biomes() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/biomes.json") },
+  get effects() { return require("minecraft-data/minecraft-data/data/pc/1.16.1/effects.json") },
+  get items() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/items.json") },
+  get enchantments() { return require("minecraft-data/minecraft-data/data/pc/1.16.4/enchantments.json") },
+  get recipes() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/recipes.json") },
+  get instruments() { return require("minecraft-data/minecraft-data/data/pc/1.16.1/instruments.json") },
+  get materials() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/materials.json") },
+  get language() { return require("minecraft-data/minecraft-data/data/pc/1.16.1/language.json") },
+  get entities() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/entities.json") },
+  get protocol() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/protocol.json") },
+  get windows() { return require("minecraft-data/minecraft-data/data/pc/1.16.1/windows.json") },
+  get version() { return require("minecraft-data/minecraft-data/data/pc/1.16.5/version.json") },
+  get foods() { return require("minecraft-data/minecraft-data/data/pc/1.16.1/foods.json") },
+  get particles() { return require("minecraft-data/minecraft-data/data/pc/1.16/particles.json") },
+  get blockLoot() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/blockLoot.json") },
+  get entityLoot() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/entityLoot.json") },
+  get loginPacket() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/loginPacket.json") },
+  get tints() { return require("minecraft-data/minecraft-data/data/pc/1.16.2/tints.json") },
+  get mapIcons() { return require("minecraft-data/minecraft-data/data/pc/1.16/mapIcons.json") },
+  get sounds() { return require("minecraft-data/minecraft-data/data/pc/1.16/sounds.json") }
+})
+
+module.exports = {
+  pc: {
+    [VERSION]: createLazyData(VERSION),
+  }
+}

package/src/sign-renderer/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover" />
+    <title>%VITE_NAME%</title>
+    <style>
+        @font-face {
+    font-family: mojangles;
+    src: url(../../../assets/mojangles.ttf);
+}
+    </style>
+</head>
+
+<body>
+    <div id="root" style="font-family: mojangles;">test</div>
+    <script src="./playground.ts" type="module"></script>
+</body>
+
+</html>

package/src/sign-renderer/index.ts

@@ -0,0 +1,216 @@
+import type { ChatMessage } from 'prismarine-chat'
+import { createCanvas } from '../lib/utils'
+
+type SignBlockEntity = {
+  Color?: string
+  GlowingText?: 0 | 1
+  Text1?: string
+  Text2?: string
+  Text3?: string
+  Text4?: string
+} | {
+  // todo
+  is_waxed?: 0 | 1
+  front_text: {
+    color: string
+    messages: string[]
+    // todo
+    has_glowing_text?: 0 | 1
+  }
+  // todo
+  // back_text: {}
+}
+
+type JsonEncodedType = string | null | Record<string, any>
+
+const parseSafe = (text: string, task: string) => {
+  try {
+    return JSON.parse(text)
+  } catch (e) {
+    console.warn(`Failed to parse ${task}`, e)
+    return null
+  }
+}
+
+const LEGACY_COLORS = {
+  black: '#000000',
+  dark_blue: '#0000AA',
+  dark_green: '#00AA00',
+  dark_aqua: '#00AAAA',
+  dark_red: '#AA0000',
+  dark_purple: '#AA00AA',
+  gold: '#FFAA00',
+  gray: '#AAAAAA',
+  dark_gray: '#555555',
+  blue: '#5555FF',
+  green: '#55FF55',
+  aqua: '#55FFFF',
+  red: '#FF5555',
+  light_purple: '#FF55FF',
+  yellow: '#FFFF55',
+  white: '#FFFFFF',
+}
+
+export const renderSign = (
+  blockEntity: SignBlockEntity,
+  isHanging: boolean,
+  PrismarineChat: typeof ChatMessage,
+  ctxHook = (ctx) => { },
+  canvasCreator = (width, height): OffscreenCanvas => { return createCanvas(width, height) }
+) => {
+  // todo don't use texture rendering, investigate the font rendering when possible
+  // or increase factor when needed
+  const factor = 40
+  const fontSize = 1.6 * factor
+  const signboardY = [16, 9]
+  const heightOffset = signboardY[0] - signboardY[1]
+  const heightScalar = heightOffset / 16
+  // todo the text should be clipped based on it's render width (needs investigate)
+
+  const texts = 'front_text' in blockEntity ? /* > 1.20 */ blockEntity.front_text.messages : [
+    blockEntity.Text1,
+    blockEntity.Text2,
+    blockEntity.Text3,
+    blockEntity.Text4
+  ]
+
+  if (!texts.some((text) => text !== 'null')) {
+    return undefined
+  }
+
+  const canvas = canvasCreator(16 * factor, heightOffset * factor)
+
+  const _ctx = canvas.getContext('2d')!
+
+  ctxHook(_ctx)
+  const defaultColor = ('front_text' in blockEntity ? blockEntity.front_text.color : blockEntity.Color) || 'black'
+  for (const [lineNum, text] of texts.slice(0, 4).entries()) {
+    if (text === 'null') continue
+    renderComponent(text, PrismarineChat, canvas, fontSize, defaultColor, fontSize * (lineNum + 1) + (isHanging ? 0 : -8))
+  }
+  return canvas
+}
+
+export const renderComponent = (
+  text: JsonEncodedType | string | undefined,
+  PrismarineChat: typeof ChatMessage,
+  canvas: OffscreenCanvas,
+  fontSize: number,
+  defaultColor: string,
+  offset = 0
+) => {
+  // todo: in pre flatenning it seems the format was not json
+  const parsed = typeof text === 'string' && (text?.startsWith('{') || text?.startsWith('"')) ? parseSafe(text ?? '""', 'sign text') : text
+  if (!parsed || (typeof parsed !== 'object' && typeof parsed !== 'string')) return
+  // todo fix type
+
+  const ctx = canvas.getContext('2d')!
+  if (!ctx) throw new Error('Could not get 2d context')
+  ctx.imageSmoothingEnabled = false
+  ctx.font = `${fontSize}px mojangles`
+
+  type Formatting = {
+    color: string | undefined
+    underlined: boolean | undefined
+    strikethrough: boolean | undefined
+    bold: boolean | undefined
+    italic: boolean | undefined
+  }
+
+  type Message = ChatMessage & Formatting & { text: string }
+
+  const message = new PrismarineChat(parsed) as Message
+
+  const toRenderCanvas: Array<{
+    fontStyle: string
+    fillStyle: string
+    underlineStyle: boolean
+    strikeStyle: boolean
+    offset: number
+    text: string
+  }> = []
+  let visibleFormatting = false
+  let plainText = ''
+  let textOffset = offset
+  const textWidths: number[] = []
+
+  const renderText = (component: Message, parentFormatting?: Formatting | undefined) => {
+    const { text } = component
+    const formatting = {
+      color: component.color ?? parentFormatting?.color,
+      underlined: component.underlined ?? parentFormatting?.underlined,
+      strikethrough: component.strikethrough ?? parentFormatting?.strikethrough,
+      bold: component.bold ?? parentFormatting?.bold,
+      italic: component.italic ?? parentFormatting?.italic
+    }
+    visibleFormatting = visibleFormatting || formatting.underlined || formatting.strikethrough || false
+    if (text?.includes('\n')) {
+      for (const line of text.split('\n')) {
+        addTextPart(line, formatting)
+        textOffset += fontSize
+        plainText = ''
+      }
+    } else if (text) {
+      addTextPart(text, formatting)
+    }
+    if (component.extra) {
+      for (const child of component.extra) {
+        renderText(child as Message, formatting)
+      }
+    }
+  }
+
+  const addTextPart = (text: string, formatting: Formatting) => {
+    plainText += text
+    textWidths[textOffset] = ctx.measureText(plainText).width
+    let color = formatting.color ?? defaultColor
+    if (!color.startsWith('#')) {
+      color = LEGACY_COLORS[color.toLowerCase()] || color
+    }
+    toRenderCanvas.push({
+      fontStyle: `${formatting.bold ? 'bold' : ''} ${formatting.italic ? 'italic' : ''}`,
+      fillStyle: color,
+      underlineStyle: formatting.underlined ?? false,
+      strikeStyle: formatting.strikethrough ?? false,
+      offset: textOffset,
+      text
+    })
+  }
+
+  renderText(message)
+
+  // skip rendering empty lines
+  if (!visibleFormatting && !message.toString().trim()) return
+
+  let renderedWidth = 0
+  let previousOffsetY = 0
+  for (const { fillStyle, fontStyle, underlineStyle, strikeStyle, offset: offsetY, text } of toRenderCanvas) {
+    if (previousOffsetY !== offsetY) {
+      renderedWidth = 0
+    }
+    previousOffsetY = offsetY
+    ctx.fillStyle = fillStyle
+    ctx.textRendering = 'optimizeLegibility'
+    ctx.font = `${fontStyle} ${fontSize}px mojangles`
+    const textWidth = textWidths[offsetY] ?? ctx.measureText(text).width
+    const offsetX = (canvas.width - textWidth) / 2 + renderedWidth
+    ctx.fillText(text, offsetX, offsetY)
+    if (strikeStyle) {
+      ctx.lineWidth = fontSize / 8
+      ctx.strokeStyle = fillStyle
+      ctx.beginPath()
+      ctx.moveTo(offsetX, offsetY - ctx.lineWidth * 2.5)
+      ctx.lineTo(offsetX + ctx.measureText(text).width, offsetY - ctx.lineWidth * 2.5)
+      ctx.stroke()
+    }
+    if (underlineStyle) {
+      ctx.lineWidth = fontSize / 8
+      ctx.strokeStyle = fillStyle
+      ctx.beginPath()
+      ctx.moveTo(offsetX, offsetY + ctx.lineWidth)
+      ctx.lineTo(offsetX + ctx.measureText(text).width, offsetY + ctx.lineWidth)
+      ctx.stroke()
+    }
+    renderedWidth += ctx.measureText(text).width
+  }
+}

package/src/sign-renderer/noop.js

@@ -0,0 +1 @@
+module.exports = {}