Index

Version:

• 1.0.2

Author:

• Skeel Lee

Source:

• skulpt.js, line 1

Examples

//How to setup a GPU Skulpt:

//create a plane for sculpting
var TERRAIN_SIZE = 10;
var TERRAIN_RES = 256;
var terrainGeom = new THREE.PlaneGeometry(TERRAIN_SIZE, TERRAIN_SIZE, TERRAIN_RES - 1, TERRAIN_RES - 1);
terrainGeom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
var terrainMesh = new THREE.Mesh(terrainGeom, null);  //a custom material will be assigned later when using SKULPT.GpuSkulpt
scene.add(terrainMesh);

//create a GpuSkulpt instance
var gpuSkulpt = new SKULPT.GpuSkulpt({
    renderer: renderer,
    mesh: terrainMesh,
    size: TERRAIN_SIZE,
    res: TERRAIN_RES
});

//update every frame
renderer.clear();
gpuSkulpt.update(dt);  //have to do this after clear but before render
renderer.render(scene, camera);

//How to sculpt:

//get sculpt position and show/hide cursor
var sculptPosition = getSculptPosition();  //do ray-intersection tests, for example, to determine where the user is clicking on the plane
if (sculptPosition) {
    gpuSkulpt.updateCursor(sculptPosition);
    gpuSkulpt.showCursor();
} else {
    gpuSkulpt.hideCursor();
}

//sculpt
var sculptType = SKULPT.ADD;
var sculptAmount = 1.0;
gpuSkulpt.sculpt(sculptType, sculptPosition, sculptAmount);

//How to clear sculpts:

//clear sculpts
gpuSkulpt.clear();

//How to change sculpt brush parameters:

//change brush size
var brushSize = 1.0;
gpuSkulpt.setBrushSize(brushSize);

//change brush amount
var brushAmount = 1.0;
gpuSkulpt.setBrushAmount(brushAmount);

//How to load sculpt data from an img:

//get image data from canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('yourImageId');
context.drawImage(img, 0, 0, TERRAIN_RES, TERRAIN_RES);
var terrainImageData = context.getImageData(0, 0, TERRAIN_RES, TERRAIN_RES).data;

//load sculpt using image data
var height = 1.0;
var midGreyIsLowest = false;
gpuSkulpt.loadFromImageData(terrainImageData, height, midGreyIsLowest);