VJ UNION

Cover image for Workbench 5.0 is Beautiful
vdmo
vdmo

Posted on

Workbench 5.0 is Beautiful

Blockbench is a free, open‑source low‑poly 3D editor with pixel‑art texturing and a built‑in Animate workspace for bone/keyframe animation, making it a fast path from modeling to motion for real‑time visuals. It exports to production formats like glTF/glb, FBX, and DAE so the same animated assets can run in browsers, game engines, and VJ pipelines, including Three.js playback in the web.[1][2][3][4]

Website: https://www.blockbench.net
Github: https://github.com/JannisX11/blockbench

Blockbench at a glance

Blockbench focuses on low‑poly modeling with pixel‑art textures, ships a modern, beginner‑friendly UI, and supports deep customization through plugins for advanced users and workflows. It handles standardized exports for general 3D use and has dedicated formats for Minecraft Java and Bedrock when you need game‑specific features and animation integration.[1]

Why VJs should care

The glTF/glb export preserves hierarchy, materials, and animation while keeping assets lightweight and web‑friendly, which is ideal for browser‑based shows and real‑time playback. Three.js loads glTF 2.0 directly via GLTFLoader, so your Blockbench animations can be streamed into a scene and driven live with mixers, timelines, or MIDI/OSC bridges.[3][4][5]

Animate in Blockbench

  • Set up a clean bone hierarchy with sensible pivots so each movable piece rotates around the right point; use the Pivot tool and a root bone to control the whole figure.[2]
  • Switch to the Animate tab, create a named animation, and keyframe rotation/position/scale on the timeline; Blockbench auto‑generates keyframes when you adjust transforms at new times.[2]
  • Use the playhead to preview loops, tweak timing, and refine secondary motion; save your project to keep animation data alongside the model.[2]

Export for production

glTF/glb is the go‑to for web and Sketchfab, FBX is preferred for Unreal/Unity, and DAE is great for Blender/Unity interchange; OBJ is widely supported but lacks hierarchy/animations and is best for static objects. Blockbench’s export menu lives under File → Export, with guidance for program‑specific setup like pixel‑perfect filtering and alpha modes in DCCs/engines.[3]

Use case Recommended format
Browser/Godot/Sketchfab glTF/glb, with embedded textures and animation support [3]
Unreal Engine FBX for robust engine import workflows [3]
Unity FBX or DAE depending on pipeline needs [3]
Blender (rendering) glTF for materials/animation fidelity [3]
Blender (modeling) DAE for interchange editing [3]
Static meshes OBJ (no animations) [3]

Play it in Three.js

GLTFLoader loads glTF 2.0 scenes, meshes, materials, skins, morph targets, and embedded animations, keeping asset delivery efficient for the web. AnimationMixer plays AnimationClips on a model, while AnimationAction handles play/pause/loop/blending for clip control and seamless transitions in a live set.[4][5][6]

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { AnimationMixer, LoopRepeat } from 'three'

// load model + animations
const loader = new GLTFLoader()
let mixer, actions = {}

loader.load('models/character.glb', (gltf) => {
  const model = gltf.scene
  scene.add(model)

  mixer = new AnimationMixer(model)

  // assume multiple clips exported from Blockbench
  gltf.animations.forEach((clip) => {
    const action = mixer.clipAction(clip)
    action.setLoop(LoopRepeat)
    actions[clip.name] = action
  })

  // play a specific Blockbench clip by name
  actions['Idle']?.play()
})

// in your render loop
const clock = new THREE.Clock()
function render() {
  const dt = clock.getDelta()
  if (mixer) mixer.update(dt)
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}
render()
Enter fullscreen mode Exit fullscreen mode

Use mixer.timeScale for tempo sync, or switch actions with crossfading for scene changes while keeping CPU overhead predictable.[5][6]

Pro tips for VJ performance

  • Keep geometry lean and texture resolutions modest; glTF supports pixel‑perfect filtering for crisp art‑direction in low‑poly/pixel‑art styles.[3]
  • Export multiple short loops as separate clips and blend them with AnimationAction to move between states without pops, using clampWhenFinished and blend modes as needed.[6]
  • Drive speed with mixer.timeScale for BPM‑locked motion, and pre‑load GLBs to avoid hitches during live transitions.[5]

Extend with plugins

Plugins are JavaScript files registered with Plugin.register, can target desktop or web variants, and are hot‑loadable for rapid iteration, enabling custom exporters, tools, or QC checks for show pipelines. The Plugin API and reference docs cover metadata, lifecycle hooks, and TypeScript typings for better autocompletion and stability in complex setups. Notably, while Blockbench’s core is GPL‑3.0, plugins/themes may be proprietary or paid, which suits studio toolchains and marketplace distribution.[7][8][1]

Open source and builds

Blockbench is GPL‑3.0 licensed; clone the repo, install dependencies, bundle, and run dev to hack features, test plugins, or tailor exports for your venue pipeline. The project ships frequent releases, with recent updates continuing to refine collections, selection, and workflow polish for production use.[1]

Quick VJ checklist

  • Model low‑poly with clean bone pivots for performant, predictable animation.[2]
  • Animate in the Animate tab and preview tight loops with clear clip names.[2]
  • Export glTF/glb for web playback; keep textures embedded for simpler deployment.[3]
  • Load with Three.js GLTFLoader and play clips via AnimationMixer/AnimationAction.[4][6][5]
  • Use mixer.timeScale and action crossfades for tempo‑aware transitions on stage.[6][5]

With Blockbench’s approachable modeling, keyframed animation, and glTF export, creating live‑ready 3D loops for browser‑based shows becomes a fast, repeatable pipeline from concept to stage visuals.[4][3][2]

Here are the links, now displayed as clickable URLs:

  1. https://github.com/JannisX11/blockbench
  2. https://www.blockbench.net/wiki/guides/bedrock-modeling/
  3. https://www.blockbench.net/wiki/guides/export-formats/
  4. https://threejs.org/docs/examples/en/loaders/GLTFLoader.html
  5. https://threejs.org/docs/api/en/animation/AnimationMixer.html
  6. https://threejs.org/docs/api/en/animation/AnimationAction.html
  7. https://www.blockbench.net/wiki/api/plugin/
  8. https://www.blockbench.net/wiki/docs/plugin/
  9. https://www.youtube.com/watch?v=HY_wjAnSy4I
  10. https://www.reddit.com/r/Blockbench/comments/1du5c6v/how_do_i_animate/
  11. https://www.youtube.com/playlist?list=PLvULVkjBtg2TQWdJvyz-tpAqcwhIhctSP
  12. https://www.youtube.com/watch?v=QdZX1W1IEL0
  13. https://www.blockbench.net
  14. https://www.blockbench.net/wiki/guides/model-rendering/
  15. https://www.blockbench.net/wiki/guides/minecraft-particles-sounds/
  16. https://www.reddit.com/r/Blockbench/comments/p9uewn/gltf_in_blockbench_i_dont_know_what_flair_to_use/
  17. https://github.com/JannisX11/blockbench-plugins
  18. https://www.youtube.com/watch?v=y0ees2j17AY
  19. https://www.blockbench.net/wiki/blockbench/formats/
  20. https://www.blockbench.net/wiki/api/blockbench/
  21. https://sketchfab.com/tags/blockbench-animation
  22. https://www.facebook.com/groups/nomadsculpt/posts/1541909993656201/
  23. https://stackoverflow.com/questions/77733958/create-brand-new-weapon-with-blockbench-and-a-minecraft-plugin-api
  24. https://mcreator.net/wiki/entity-model-animations
  25. https://threejs.org/docs/
  26. https://sbcode.net/threejs/gltf-loader/
  27. https://threejs.org/manual/
  28. https://sbcode.net/threejs/loaders-gltf/
  29. https://henryegloff.com/how-to-load-gltf-animations-as-separate-files-in-three-js/
  30. https://www.modelo.io/damf/article/2024/05/22/0852/mastering-three.js-gltfloader--a-complete-guide
  31. https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970
  32. https://www.youtube.com/watch?v=WBe3xrV4CPM
  33. https://www.youtube.com/watch?v=NsJ0sPa8Za8
  34. https://discourse.threejs.org/t/how-to-use-the-animation-that-comes-with-the-gltf-file-that-i-downloaded-in-sketchfab/51529
  35. https://discourse.threejs.org/t/gltfexporter-and-gltfloader/49883
  36. https://threejs.org/docs/api/en/animation/AnimationObjectGroup.html
  37. https://stackoverflow.com/questions/60704912/play-a-gltf-animation-three-js
  38. https://discourse.threejs.org/t/playing-list-of-animation-at-once/33530
  39. https://sbcode.net/threejs/gltf-animation/
  40. https://pythreejs.readthedocs.io/en/stable/api/animation/AnimationMixer_autogen.html
  41. https://threejs.org/examples/

Discussion (0)