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