Skip to content

Commit

Permalink
Merge pull request #16 from xeokit/performancemodel-colorize
Browse files Browse the repository at this point in the history 
Implemented colorize for PerformanceModel
  • Loading branch information
@xeolabs
xeolabs authored Feb 18, 2019
2 parents 49aeafb + ccf449e commit 39fc9d4
Show file tree
Hide file tree
Showing 10 changed files with 1,273 additions and 71 deletions.
4 changes: 2 additions & 2 deletions examples/picking_canvas_mesh_colorize.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ <h1>Colorizing with the Pointer</h1>
src: "./models/gltf/schependomlaan/scene.gltf",
metaModelSrc: "./metaModels/schependomlaan/metaModel.json",
edges: true,
performance: false // https://github.com/xeokit/xeokit-sdk/issues/12
performance: true // https://github.com/xeokit/xeokit-sdk/issues/12
});

viewer.camera.orbitPitch(20);
Expand Down Expand Up @@ -87,7 +87,7 @@ <h1>Colorizing with the Pointer</h1>
lastEntity = hit.entity;
lastColorize = hit.entity.colorize.slice();

hit.entity.colorize = [0.0, 1.0, 0.0, 1.0];
hit.entity.colorize = [0.0, 1.0, 0.0];
}
} else {

Expand Down
317 changes: 317 additions & 0 deletions examples/sceneRepresentation_PerformanceModel_batching_colorize.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,317 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PerformanceModel Geometry Instancing</title>
<link href="css/styles.css" type="text/css" rel="stylesheet"/>

<style>
#myCanvas {
background: lightblue;
}
</style>

</head>

<body>

<canvas id="myCanvas"></canvas>

<div id="info">
<h1>PerformanceModel</h1>
<p>Geometry batching example</p>
<ul>
<li>
<a target="_other"
href="./../docs/class/src/viewer/Viewer.js~Viewer.html">Viewer</a>
- xeokit Viewer
</li>
<li>
<a target="_other"
href="./../docs/class/src/scene/PerformanceModel/PerformanceModel.js~PerformanceModel.html">PerformanceModel</a>
- high-performance model representation
</li>
<li>
<a target="_other" href="https://github.com/xeolabs/xeokit-sdk/wiki/High-Performance-Model-Representation">User Guide</a>
</li>

</ul>
</div>
</body>

<script type="module">

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {Viewer} from "../src/viewer/Viewer.js";
import {PerformanceModel} from "../src/scene/PerformanceModel/PerformanceModel.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

const viewer = new Viewer({
canvasId: "myCanvas",
transparent: true
});

viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
viewer.scene.camera.look = [0, -5.75, 0];
viewer.scene.camera.up = [0.37, 0.91, -0.11];

//------------------------------------------------------------------------------------------------------------------
// Create a PerformanceModel representing a table with four legs, using geometry batching
//------------------------------------------------------------------------------------------------------------------

const performanceModel = new PerformanceModel(viewer.scene, {
id: "table",
isModel: true, // <--------------------- Represents a model, registers PerformanceModel by ID on viewer.scene.models
position: [0, 0, 0],
scale: [1, 1, 1],
rotation: [0, 0, 0],
edges: true
});

//-----------------------------------------------------------
// Create a red table leg object
// Each object is comprised of a mesh, which belongs to a node
//-----------------------------------------------------------

performanceModel.createMesh({
id: "redLegMesh",

// The primitive type - allowed values are "points", "lines", "line-loop", "line-strip",
// "triangles", "triangle-strip" and "triangle-fan".
// See the OpenGL/WebGL specification docs for how the coordinate arrays are supposed to be laid out.
primitive: "triangles",

// The vertices - eight for our cube, each one spanning three array elements for X,Y and Z
positions: [
1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // v0-v1-v2-v3 front
1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // v0-v3-v4-v1 right
1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, // v0-v1-v6-v1 top
-1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // v1-v6-v7-v2 left
-1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1,// v7-v4-v3-v2 bottom
1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1 // v4-v7-v6-v1 back
],

// Normal vectors, one for each vertex
normals: [
0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,// v0-v1-v2-v3 front
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,// v0-v3-v4-v5 right
0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,// v0-v5-v6-v1 top
-1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,// v1-v6-v7-v2 left
0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0,// v7-v4-v3-v2 bottom
0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1// v4-v7-v6-v5 back
],

// Indices - these organise the positions and and normals
// into geometric primitives in accordance with the "primitive" parameter,
// in this case a set of three indices for each triangle.
//
// Note that each triangle is specified in counter-clockwise winding order.
//
indices: [
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right
8, 9, 10, 8, 10, 11, // top
12, 13, 14, 12, 14, 15, // left
16, 17, 18, 16, 18, 19, // bottom
20, 21, 22, 20, 22, 23
],

position: [-4, -6, -4],
scale: [1, 3, 1],
rotation: [0, 0, 0],
color: [1, 0.3, 0.3]
});

performanceModel.createEntity({
id: "redLeg",
meshIds: ["redLegMesh"],
isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
});

//--------------------------------------------------------
// Green table leg object
//--------------------------------------------------------

performanceModel.createMesh({
id: "greenLegMesh",
primitive: "triangles",
positions: [
1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1,
1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1,
-1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1
],
normals: [
0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
-1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1
],
indices: [
0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15,
16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23
],
position: [4, -6, -4],
scale: [1, 3, 1],
rotation: [0, 0, 0],
color: [0.3, 1.0, 0.3]
});

performanceModel.createEntity({
id: "greenLeg",
meshIds: ["greenLegMesh"],
isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
});

//--------------------------------------------------------
// Blue table leg object
//--------------------------------------------------------

performanceModel.createMesh({
id: "blueLegMesh",
positions: [
1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1,
-1, -1, 1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1,
-1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1
],
normals: [
0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
-1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0,
-1, 0, 0, -1
],
indices: [
0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19,
20, 21, 22, 20, 22, 23
],
position: [4, -6, 4],
scale: [1, 3, 1],
rotation: [0, 0, 0],
color: [0.3, 0.3, 1.0]
});

performanceModel.createEntity({
id: "blueLeg",
meshIds: ["blueLegMesh"],
isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
});

//--------------------------------------------------------
// Yellow table leg object
//--------------------------------------------------------

performanceModel.createMesh({
id: "yellowLegMesh",
positions: [
1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1,
-1, -1, 1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1,
-1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1
],
normals: [
0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
-1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1
],
indices: [
0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19,
20, 21, 22, 20, 22, 23
],
position: [-4, -6, 4],
scale: [1, 3, 1],
rotation: [0, 0, 0],
color: [1.0, 1.0, 0.0]
});

performanceModel.createEntity({
id: "yellowLeg",
meshIds: ["yellowLegMesh"],
isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
});

//--------------------------------------------------------
// Purple table top object
//--------------------------------------------------------

performanceModel.createMesh({
id: "purpleTableTopMesh",
positions: [
1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1,
-1, -1, 1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1,
-1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1
],
normals: [
0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
-1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1
],
indices: [
0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19,
20, 21, 22, 20, 22, 23
],
position: [0, -3, 0],
scale: [6, 0.5, 6],
rotation: [0, 0, 0],
color: [1.0, 0.3, 1.0]
});

performanceModel.createEntity({
id: "purpleTableTop",
meshIds: ["purpleTableTopMesh"],
isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
});

//------------------------------------------------------------
// Finalize the PerformanceModel.
//
// Internally, this builds any geometry batches or instanced
// arrays that are currently under construction within it.
//------------------------------------------------------------

performanceModel.finalize();

//------------------------------------------------------------------------------------------------------------------
// Find Entities by their IDs
//------------------------------------------------------------------------------------------------------------------

// Get the whole table model
var table = viewer.scene.models["table"];

// Get some leg objects
var redLeg = viewer.scene.objects["redLeg"];
var greenLeg = viewer.scene.objects["greenLeg"];
var blueLeg = viewer.scene.objects["blueLeg"];

//------------------------------------------------------------------------------------------------------------------
// Mouse over Entities to highlight them
//------------------------------------------------------------------------------------------------------------------

var lastEntity = null;

viewer.scene.input.on("mousemove", function (coords) {

var hit = viewer.scene.pick({
canvasPos: coords
});

if (hit) {

if (!lastEntity || hit.entity.id !== lastEntity.id) {

if (lastEntity) {
lastEntity.colorize = [1.0, 1.0, 1.0];
}

lastEntity = hit.entity;
lastEntity.colorize = [1.0, 0.0, 0.0];
}
} else {

if (lastEntity) {
lastEntity.colorize = [1.0, 1.0, 1.0];
lastEntity = null;
}
}
});

</script>
</html>
Loading

0 comments on commit 39fc9d4

Please sign in to comment.