Voxel renderer and pathfinder for three.js

Overview

cubitos npm-version

screenshot

Examples

Installation

npm install cubitos

Basic usage

import { ChunkMaterial, Volume, World } from 'cubitos';
import { PerspectiveCamera, Scene, sRGBEncoding, WebGLRenderer } from 'three';

const aspect = window.innerWidth / window.innerHeight;
const camera = new PerspectiveCamera(70, aspect, 0.1, 1000);
const renderer = new WebGLRenderer({ antialias: true });
const scene = new Scene();
camera.position.set(64, 64, 64);
renderer.outputEncoding = sRGBEncoding;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(() => renderer.render(scene, camera));

const volume = new Volume({
  width: 128,
  height: 128,
  depth: 128,
  onLoad: () => {
    const world = new World({
      material: new ChunkMaterial({ light: false }),
      volume,
    });
    world.update({ x: 64, y: 64, z: 60 }, 2, 1);
    scene.add(world);
  },
});

ChunkMaterial

new ChunkMaterial({
  // A DataArrayTexture or Texture to use as the atlas
  atlas: new Texture(),
  // Light === max(
  //  ambientColor,
  //  light1Color * light1
  //  + light2Color * light2
  //  + light3Color * light3
  //  + sunlightColor * sunlight
  // );
  ambientColor = new Color(0, 0, 0),
  light1Color = new Color(1, 1, 1),
  light2Color = new Color(1, 1, 1),
  light3Color = new Color(1, 1, 1),
  sunlightColor = new Color(1, 1, 1),
  // Enable/Disable lighting (default: true)
  light: true,
});

Volume

const volume = new Volume({
  // Volume width
  width: 128,
  // Volume height
  height: 128,
  // Volume depth
  depth: 128,
  // Render chunks size (default: 32)
  chunkSize: 32,
  // Maximum light distance (default: 24)
  maxLight: 24,
  // Will be called to determine if a voxel emits light on a channel (optional)
  emission: (value) => (0),
  // Will be called by the mesher to determine a texture from the atlas (optional)
  mapping: (face, value, x, y, z) => (value - 1),
  // Will be called when the volume has allocated the memory and is ready. (optional)
  onLoad: () => {
    // Generates terrain in a worker
    Worldgen({
      // Generate grass
      grass: true,
      // Generate lights
      lights: true,
      // Noise frequency (default: 0.01)
      frequency: 0.01,
      // Noise gain (default: 0.5)
      gain: 0.5,
      // Noise lacunarity (default: 2)
      lacunarity: 2,
      // Noise octaves (default: 3)
      octaves: 3,
      // Noise seed (default: random)
      seed = 1337,
      // Volume instance
      volume,
    })
      .then(() => {
        // Runs the initial light propagation
        volume.propagate();
      })
  },
  // Will be called if there's an error loading the volume. (optional)
  onError: () => {},
});

// Returns the closest ground
// to a position where the height fits
const ground = volume.ground(
  // Position
  new Vector3(0, 0, 0),
  // Height (default: 1)
  4
);

// Returns a list of positions
// to move an actor from A to B
const path = volume.pathfind({
  // Starting position
  from: new Vector3(0, 0, 0),
  // Destination
  to: new Vector3(0, 10, 0),
  // Minimum height it can go through (default: 1)
  height: 4,
  // Maximum nodes it can visit before it bails (default: 4096)
  maxVisited: 2048,
  // Minimum Y it can step at (default: 0)
  minY: 0,
  // Maximum Y it can step at (default: Infinity)
  maxY: Infinity,
});

World

const world = new World({
  // ChunkMaterial (or compatible material)
  material,
  // Volume instance
  volume,
});

world.update(
  // Position
  new Vector3(0, 0, 0),
  // Radius
  1,
  // Value
  1
);

Modifying the WASM programs

To build the C code, you'll need to install LLVM:

On the first build, it will complain about a missing file that you can get here: libclang_rt.builtins-wasm32-wasi-16.0.tar.gz. Just put it on the same path that the error specifies and you should be good to go.

To build wasi-libc, you'll need to install GNU make

# clone this repo and it's submodules
git clone --recursive https://github.com/danielesteban/cubitos.git
cd cubitos
# build wasi-libc
cd vendor/wasi-libc && make -j8 && cd ../..
# install dev dependencies
npm install
# start the dev environment:
npm start
# open http://localhost:8080/ in your browser
You might also like...

JSNation 2022 - Building a Solar System using Hand Recognition and Three.js

JSNation 2022 - Building a Solar System using Hand Recognition and Three.js

Building a Solar System using Hand Recognition and Three.js 🚀 Accompanying code for JSNation 2022 talk. Demo video here: https://www.youtube.com/watc

Dec 14, 2022

College project done for the CG Artwork lecture in 2022. Used HTML for the indexes and mainly JavaScript (using to THREE.js). Ended with the final A grade (17.3 in scale grade).

CG Artwork Project 2022 This project was done by a group of 3 in 2022 with an educational purpose for the CG Artwork lecture in Instituto Superior Téc

Sep 19, 2022

A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh

A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh

three-bvh-csg An experimental, in progress, flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh. More than 100 time

Jan 5, 2023

A three.js and roslibjs powered web-control for zju fast-drone-250 for laptop-free flight control

A three.js and roslibjs powered web-control for zju fast-drone-250 for laptop-free flight control

Web Control for ZJU Fast-Drone-250 A three.js and roslibjs powered web-control for zju fast-drone-250 for laptop-free flight control (tested on Xiaomi

Nov 11, 2022

The zkPass browser extension can proxy three parties TLS and generate zero-knowledge proofs

zkPass Extension zkPass a Chromium extension which can proxy three parties TLS and generate zero-knowledge proofs. Technology Dependence Multi-party c

Nov 1, 2022

Intuitive and dynamic Chrome Dev Tool Extension for Three.js debugging

Intuitive and dynamic Chrome Dev Tool Extension for Three.js debugging

sceneSniff An intuitive and dynamic Chrome Dev Tool Extension for Three.js debugging sceneSniff is an in browser developer tool for Three.js projects.

Dec 8, 2022

This fictive project was created to showcase my current skills using Three.js and GSAP.

This fictive project was created to showcase my current skills using Three.js and GSAP.

Bike Demo Three.js This fictive project was created to showcase my current skills using Three.js and GSAP. It was inspired by the tutorial created by

Dec 29, 2022

Open game experiment with vehicles and physics in Three.js

TNTGame Open game experiment with vehicles and physics in Three.js You can try it online here: Crater scene: https://yomboprime.github.io/TNTGame/app?

Oct 5, 2022

Adding volumetric effects to a built-in Three.js shader.

Adding volumetric effects to a built-in Three.js shader.

Magical Marbles in Three.js Adding volumetric effects to a built-in Three.js shader. Article on Codrops Demo Installation Install dependencies: yarn

Dec 9, 2022
Owner
Daniel Esteban Nombela
Daniel Esteban Nombela
A community contributed game system for Pathfinder Second Edition.

The Official Pathfinder Second Edition Game System for FoundryVTT This system uses trademarks and/or copyrights owned by Paizo Inc., which are used wi

Foundry Virtual Tabletop 104 Jan 5, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Text Engraving & Extrusion demo based on Three.js is implemented with Typescript and webpack5. Used THREE-CSGMesh as the core tech to achieve engraving and extrusion results

Text Engraving & Extrusion Text Engraving & Extrusion demo is implemented using Three.js, with Typescript and webpack5. Used THREE-CSGMesh as the core

Jiahong Li 3 Oct 12, 2022
three.js examples. if you are first in learning three.js , this will give you much help.

three-projected-material Three.js Material which lets you do Texture Projection on a 3d Model. Installation After having installed three.js, install i

null 22 Nov 2, 2022
BonsaiJS is a graphics library and renderer

Bonsai (previously known as bikeshedjs) The art of bonsai tells a story through living illusion. A bonsai artist searches for ways to express his pers

uxebu 2k Dec 21, 2022
Three.js boilerplate project configured with typescript, webpack and css/style loader, HTTPS local server, and a sample test codes !!

three.js-boilerplate Welcome, this is a three.js boilerplate project where you can clone it and start to work !!! Installed and Configured Items: Type

pravin poudel 4 Jul 6, 2022
Mixed Reality Capture module for WebXR and Three.js

Reality Mixer JS This is a small Mixed Reality Capture module for WebXR + Three.js. You can use this module to allow users to record your WebXR experi

Fabio 56 Dec 28, 2022
project using three.js and mediapipe

three.js-with-mediapipe project using three.js and mediapipe KOR 미디어파이프와 three js를 이용한 프로젝트 입니다. 해당 코드 작동을 위해서는 영상을 넣어주거나, video가 아닌 camera사용하도록 수정하여야

donguk 4 Sep 20, 2022