Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adapt examples to new update API in CadNode #295

Merged
merged 2 commits into from Mar 18, 2020
Merged

Adapt examples to new update API in CadNode #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d859dc
Adapt examples to new update API in CadNode
dragly Mar 18, 2020
50928fd
Merge branch 'master' into dragly/adapt-examples-to-new-api
dragly Mar 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 8 additions & 1 deletion examples/src/custom-scene-elements.ts
View file
Open in desktop
Expand Up @@ -23,9 +23,13 @@ async function main() {
renderer.setClearColor('#000000');
renderer.setSize(window.innerWidth, window.innerHeight);

let modelNeedsUpdate = false;
const sectorModel = await reveal.loadCadModelByUrl('/primitives');
const sectorModelNode = new reveal_threejs.CadNode(sectorModel);
scene.add(sectorModelNode);
sectorModelNode.addEventListener('update', () => {
modelNeedsUpdate = true;
});

const controls = new CameraControls(camera, renderer.domElement);
const pos = new THREE.Vector3(100, 100, 100);
Expand Down Expand Up @@ -56,7 +60,10 @@ async function main() {
const render = () => {
const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const modelNeedsUpdate = sectorModelNode.update(camera);

if (controlsNeedUpdate) {
sectorModelNode.update(camera);
}

if (controlsNeedUpdate || modelNeedsUpdate) {
renderer.render(scene, camera);
Expand Down
13 changes: 10 additions & 3 deletions examples/src/filtering.ts
View file
Open in desktop
Expand Up @@ -44,6 +44,10 @@ async function main() {
const scene = new THREE.Scene();
const cadModel = await loadCadModelFromCdfOrUrl(modelId, await createClientIfNecessary(modelId));
const cadNode = new reveal_threejs.CadNode(cadModel, { shading });
let modelNeedsUpdate = false;
cadNode.addEventListener('update', () => {
modelNeedsUpdate = true;
});

scene.add(cadNode);

Expand All @@ -58,13 +62,16 @@ async function main() {
controls.setLookAt(position.x, position.y, position.z, target.x, target.y, target.z);
controls.update(0.0);
camera.updateMatrixWorld();
cadNode.update(camera);
const clock = new THREE.Clock();
const render = async () => {
const render = () => {
const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const sectorsNeedUpdate = await cadNode.update(camera);
if (controlsNeedUpdate) {
cadNode.update(camera);
}

if (controlsNeedUpdate || sectorsNeedUpdate || shadingNeedsUpdate) {
if (controlsNeedUpdate || modelNeedsUpdate || shadingNeedsUpdate) {
renderer.render(scene, camera);
shadingNeedsUpdate = false;
}
Expand Down
13 changes: 10 additions & 3 deletions examples/src/picking.ts
View file
Open in desktop
Expand Up @@ -35,6 +35,10 @@ async function main() {
// Add some data for Reveal
const cadModel = await loadCadModelFromCdfOrUrl(modelId, await createClientIfNecessary(modelId));
const cadNode = new reveal_threejs.CadNode(cadModel, { shading });
let modelNeedsUpdate = false;
cadNode.addEventListener('update', () => {
modelNeedsUpdate = true;
});
scene.add(cadNode);

// Add some other geometry
Expand Down Expand Up @@ -69,14 +73,17 @@ async function main() {
controls.setLookAt(position.x, position.y, position.z, target.x, target.y, target.z);
controls.update(0.0);
camera.updateMatrixWorld();
cadNode.update(camera);
let pickingNeedsUpdate = false;
const clock = new THREE.Clock();
const render = async () => {
const render = () => {
const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const sectorsNeedUpdate = await cadNode.update(camera);
if (controlsNeedUpdate) {
cadNode.update(camera);
}

if (controlsNeedUpdate || sectorsNeedUpdate || pickingNeedsUpdate) {
if (controlsNeedUpdate || pickingNeedsUpdate || modelNeedsUpdate) {
renderer.render(scene, camera);
pickingNeedsUpdate = false;
}
Expand Down
13 changes: 10 additions & 3 deletions examples/src/post-processing-effects.ts
View file
Open in desktop
Expand Up @@ -25,6 +25,10 @@ async function main() {

const cadModel = await loadCadModelFromCdfOrUrl(modelId, await createClientIfNecessary(modelId));
const cadModelNode = new reveal_threejs.CadNode(cadModel);
let modelNeedsUpdate = false;
cadModelNode.addEventListener('update', () => {
modelNeedsUpdate = true;
});
scene.add(cadModelNode);

const controls = new CameraControls(camera, renderer.domElement);
Expand All @@ -33,6 +37,7 @@ async function main() {
controls.setLookAt(pos.x, pos.y, pos.z, target.x, target.y, target.z);
controls.update(0.0);
camera.updateMatrixWorld();
cadModelNode.update(camera);

// See https://vanruesc.github.io/postprocessing/public/docs/identifiers.html
const effectPass = new postprocessing.EffectPass(camera, new postprocessing.DotScreenEffect());
Expand All @@ -42,12 +47,14 @@ async function main() {
effectComposer.addPass(effectPass);

const clock = new THREE.Clock();
const render = async () => {
const render = () => {
const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const modelNeedsUpdate = await cadModelNode.update(camera);
const needsUpdate = controlsNeedUpdate || modelNeedsUpdate;
if (controlsNeedUpdate) {
cadModelNode.update(camera);
}

const needsUpdate = controlsNeedUpdate || modelNeedsUpdate;
if (needsUpdate) {
effectComposer.render(delta);
}
Expand Down
8 changes: 7 additions & 1 deletion examples/src/sector-with-pointcloud.ts
View file
Open in desktop
Expand Up @@ -46,6 +46,10 @@ async function main() {
await createClientIfNecessary(cadModelIdentifier)
);
const cadNode = new reveal_threejs.CadNode(cadModel);
let modelNeedsUpdate = false;
cadNode.addEventListener('update', () => {
modelNeedsUpdate = true;
});
const cadModelOffsetRoot = new THREE.Group();
cadModelOffsetRoot.name = 'Sector model offset root';
cadModelOffsetRoot.add(cadNode);
Expand Down Expand Up @@ -74,7 +78,9 @@ async function main() {
const render = async () => {
const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const modelNeedsUpdate = renderOptions.loadingEnabled && (await cadNode.update(camera));
if (renderOptions.loadingEnabled) {
cadNode.update(camera);
}
const needsUpdate =
renderOptions.renderMode === RenderMode.AlwaysRender ||
(renderOptions.renderMode === RenderMode.WhenNecessary &&
Expand Down
19 changes: 15 additions & 4 deletions examples/src/side-by-side.ts
View file
Open in desktop
Expand Up @@ -19,6 +19,8 @@ import { CogniteClient } from '@cognite/sdk';

CameraControls.install({ THREE });

let modelNeedsUpdate = false;

function initializeModel(
cadModel: reveal.CadModel,
canvas: HTMLCanvasElement,
Expand All @@ -32,6 +34,9 @@ function initializeModel(
const scene = new THREE.Scene();
const sectorModelNode = new reveal_threejs.CadNode(cadModel);
scene.add(sectorModelNode);
sectorModelNode.addEventListener('update', () => {
modelNeedsUpdate = true;
});
const options = createRendererDebugWidget(sectorScene.root, renderer, sectorModelNode, gui);

return [renderer, scene, sectorModelNode, options];
Expand Down Expand Up @@ -80,26 +85,32 @@ async function main() {
controls.setLookAt(position.x, position.y, position.z, target.x, target.y, target.z);
controls.update(0.0);
camera.updateMatrixWorld();
modelNode1.update(camera);
modelNode2.update(camera);

const clock = new THREE.Clock();
const render = async () => {
requestAnimationFrame(render);

const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const sectors1NeedUpdate = options1.loadingEnabled && (await modelNode1.update(camera));
const sectors2NeedUpdate = options2.loadingEnabled && (await modelNode2.update(camera));
if (options1.loadingEnabled) {
modelNode1.update(camera);
}
if (options2.loadingEnabled) {
modelNode2.update(camera);
}

if (
options1.renderMode === RenderMode.AlwaysRender ||
(options1.renderMode === RenderMode.WhenNecessary && (controlsNeedUpdate || sectors1NeedUpdate))
(options1.renderMode === RenderMode.WhenNecessary && (controlsNeedUpdate || modelNeedsUpdate))
) {
applyRenderingFilters(scene1, options1.renderFilter);
renderer1.render(scene1, camera);
}
if (
options2.renderMode === RenderMode.AlwaysRender ||
(options2.renderMode === RenderMode.WhenNecessary && (controlsNeedUpdate || sectors2NeedUpdate))
(options2.renderMode === RenderMode.WhenNecessary && (controlsNeedUpdate || modelNeedsUpdate))
) {
applyRenderingFilters(scene2, options2.renderFilter);
renderer2.render(scene2, camera);
Expand Down
13 changes: 10 additions & 3 deletions examples/src/ssao.ts
View file
Open in desktop
Expand Up @@ -17,6 +17,10 @@ async function main() {
const scene = new THREE.Scene();
const cadModel = await loadCadModelFromCdfOrUrl(modelIdentifier, await createClientIfNecessary(modelIdentifier));
const cadNode = new CadNode(cadModel);
let modelNeedsUpdate = false;
cadNode.addEventListener('update', () => {
modelNeedsUpdate = true;
});

scene.add(cadNode);

Expand All @@ -32,6 +36,7 @@ async function main() {
controls.setLookAt(position.x, position.y, position.z, target.x, target.y, target.z);
controls.update(0.0);
camera.updateMatrixWorld();
cadNode.update(camera);
const clock = new THREE.Clock();

let effectNeedsUpdate = false;
Expand Down Expand Up @@ -71,12 +76,14 @@ async function main() {
.max(0.2)
.onChange(updateEffect);

const render = async () => {
const render = () => {
const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const sectorsNeedUpdate = await cadNode.update(camera);
if (controlsNeedUpdate) {
cadNode.update(camera);
}

if (controlsNeedUpdate || sectorsNeedUpdate || effectNeedsUpdate) {
if (controlsNeedUpdate || modelNeedsUpdate || effectNeedsUpdate) {
effect.render(renderer, scene, camera, renderSettings.pass);
effectNeedsUpdate = false;
}
Expand Down
19 changes: 15 additions & 4 deletions examples/src/two-models.ts
View file
Open in desktop
Expand Up @@ -21,7 +21,14 @@ async function main() {
const sectorModel1 = await reveal.loadCadModelByUrl('/primitives');
const sectorModel2 = await reveal.loadCadModelByUrl('/primitives');
const sectorModelNode1 = new reveal_threejs.CadNode(sectorModel1);
let modelNeedsUpdate = false;
sectorModelNode1.addEventListener('update', () => {
modelNeedsUpdate = true;
});
const sectorModelNode2 = new reveal_threejs.CadNode(sectorModel2);
sectorModelNode2.addEventListener('update', () => {
modelNeedsUpdate = true;
});
const model2Offset = new THREE.Group();
model2Offset.position.set(-50, -50, 0);
model2Offset.add(sectorModelNode2);
Expand All @@ -34,14 +41,18 @@ async function main() {
controls.setLookAt(pos.x, pos.y, pos.z, target.x, target.y, target.z);
controls.update(0.0);
camera.updateMatrixWorld();
sectorModelNode1.update(camera);
sectorModelNode2.update(camera);

const clock = new THREE.Clock();
const render = async () => {
const render = () => {
const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const model1NeedsUpdate = await sectorModelNode1.update(camera);
const model2NeedsUpdate = await sectorModelNode2.update(camera);
const needsUpdate = controlsNeedUpdate || model1NeedsUpdate || model2NeedsUpdate;
if (controlsNeedUpdate) {
sectorModelNode1.update(camera);
sectorModelNode2.update(camera);
}
const needsUpdate = controlsNeedUpdate || modelNeedsUpdate;

if (needsUpdate) {
renderer.render(scene, camera);
Expand Down
12 changes: 9 additions & 3 deletions examples/src/walkable-path.ts
View file
Open in desktop
Expand Up @@ -50,6 +50,10 @@ async function main() {

const scene = new THREE.Scene();
const cadNode = new CadNode(cadModel);
let modelNeedsUpdate = false;
cadNode.addEventListener('update', () => {
modelNeedsUpdate = true;
});
const { position, target, near, far } = cadNode.suggestCameraConfig();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, near, far);
const controls = new CameraControls(camera, renderer.domElement);
Expand Down Expand Up @@ -88,13 +92,15 @@ async function main() {
});

const clock = new THREE.Clock();
const render = async () => {
const render = () => {
const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const sectorsNeedUpdate = await cadNode.update(camera);
if (controlsNeedUpdate) {
cadNode.update(camera);
}
const walkablePathUpdated = updated;

if (controlsNeedUpdate || sectorsNeedUpdate || walkablePathUpdated) {
if (controlsNeedUpdate || modelNeedsUpdate || walkablePathUpdated) {
updated = false;
renderer.render(scene, camera);
}
Expand Down
13 changes: 10 additions & 3 deletions examples/src/world-to-screen.ts
View file
Open in desktop
Expand Up @@ -33,6 +33,10 @@ async function main() {
});

const cadNode = new CadNode(cadModel, { shading });
let modelNeedsUpdate = false;
cadNode.addEventListener('update', () => {
modelNeedsUpdate = true;
});
scene.add(cadNode);

const renderer = new THREE.WebGLRenderer();
Expand All @@ -49,14 +53,17 @@ async function main() {
controls.setLookAt(position.x, position.y, position.z, target.x, target.y, target.z);
controls.update(0.0);
camera.updateMatrixWorld();
cadNode.update(camera);

const clock = new THREE.Clock();
const render = async () => {
const render = () => {
const delta = clock.getDelta();
const controlsNeedUpdate = controls.update(delta);
const sectorsNeedUpdate = await cadNode.update(camera);
if (controlsNeedUpdate) {
cadNode.update(camera);
}

if (controlsNeedUpdate || sectorsNeedUpdate || pickingNeedsUpdate) {
if (controlsNeedUpdate || modelNeedsUpdate || pickingNeedsUpdate) {
renderer.render(scene, camera);
}
requestAnimationFrame(render);
Expand Down