@dreamoment/gobble
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

gobble

Language: English | 中文简体

What is gobble ?

threejs batching tool that integrates multiple batching methods.

Features

  • lightweight and easy to use

  • support static batching and GPU Instancing

  • support typescript

Scenarios

method material geometry transformability generated time rendering performance memory usage
Static Batching single unlimited no slow better high
GPU Instancing Single single single yes fast good low
GPU Instancing Multiple single multiple yes fast good low

Install

npm i @dreamoment/gobble

Examples

// StaticBatching
import * as THREE from 'three'
import { StaticBatching } from '@dreamoment/gobble'

const commonMaterial = new THREE.MeshStandardMaterial()

const staticBatching = new StaticBatching([group1, group2], commonMaterial, total)
const mesh = staticBatching.getMesh()
scene.add(mesh)
import * as THREE from 'three'

const sphereGeometry = new THREE.SphereGeometry(1.0, 16, 8)
const commonMaterial = new THREE.MeshStandardMaterial()

const total = 100
const instancingSingle = new GPUInstancing.Single(sphereGeometry, commonMaterial, total)
// If you take the first child, do the same for the other 99
const object3D = instancingSingle.create()
object3D.setPosition(child.position)
object3D.setRotation(child.rotation)
object3D.setScale(child.scale)
instancingSingle.add(object3D)
import * as THREE from 'three'
import { StaticBatching, GPUInstancing } from '@dreamoment/gobble'

const sphereGeometry = new THREE.SphereGeometry(1.0, 16, 8)
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 16)
const commonMaterial = new THREE.MeshStandardMaterial()

const total = 100
const instancingMultiple = new GPUInstancing.Multiple([sphereGeometry, c], commonMaterial, total)
// If you take the first child, do the same for the other 99
const object3D = instancingMultiple.create(0)       // base sphereGeometry
// const object3D = instancingMultiple.create(1)    // base cylinderGeometry
object3D.setPosition(child.position)
object3D.setRotation(child.rotation)
object3D.setScale(child.scale)
instancingMultiple.add(object3D)

StaticBatching API

Static batching.

new StaticBatching(object3Ds: THREE.Object3D[], material?: THREE.Material)

getMesh

Get the processed mesh.

getMesh(): THREE.Mesh

GPUInstancing API

GPU Instancing Single.

new GPUInstancing.Single(geometry: THREE.BufferGeometry, material: THREE.Material, total: number)

GPU Instancing Multiple.

new GPUInstancing.Multiple(geometries: THREE.BufferGeometry[], material: THREE.Material, total: number)

getMesh

Get the processed mesh.

getMesh(): THREE.Mesh

create

Generate a child object.

// from GPUInstancing.Single
create(): GPUInstancingObject3D
// from GPUInstancing.Multiple
create(type: number): GPUInstancingObject3D

add

Add a child object.

add(object3D: GPUInstancingObject3D): GPUInstancingMultiple

remove

Remove a child object.

remove(object3D: GPUInstancingObject3D): GPUInstancingMultiple

GPUInstancingObject3D API

The child object that GPUInstancing generates.

getPosition / setPosition

Get/set the position information of the child object.

getPosition(): THREE.Vector3
setPosition(position: THREE.Vector3): void

getRotation / setRotation

Get/set the rotation information of the child object.

getRotation(): THREE.Euler
setRotation(rotation: THREE.Euler): void

getScale / setScale

Get/set the scale information of the child object.

getScale(): THREE.Vector3
setScale(scale: THREE.Vector3): void

getVisible / setVisible

Get/set the visible information of the child object.

getVisible(): boolean
setVisible(visible: boolean): void

Readme

Keywords

none

Package Sidebar

Install

npm i @dreamoment/gobble

Weekly Downloads

1

Version

0.0.1

License

MIT

Unpacked Size

23.1 kB

Total Files

6

Last publish

Collaborators

  • dreamoment-npm