New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@cognite/reveal

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cognite/reveal

WebGL based 3D viewer for CAD and point clouds processed in Cognite CDF.

1.0.0-beta-2
Source
npm

Version published: 5 years ago

Maintainers: 105

Created: 5 years ago

Source

Reveal viewer

Documentation for the latest version is available at https://cognitedata.github.io/reveal/docs/

Code Example

import { Cognite3DViewer } from "@cognite/reveal";
import { CogniteClient } from "@cognite/sdk";

const appId = "com.cognite.reveal.example";
const client = new CogniteClient({ appId });

client.loginWithOAuth({ project: "publicdata" });

const viewer = new Cognite3DViewer({
  sdk: client,
  domElement: document.querySelector("#your-element-for-viewer")
});
viewer.addModel({ modelId: 4715379429968321, revisionId: 5688854005909501 });

Installation

npm install @cognite/reveal

Expose all `.worker.js` and `.wasm` files from `@cognite/reveal`

This library uses web-workers and web-assembly, but it's tricky to bundle them into npm-package.

That's why you will have to make sure that all *.worker.js and *.wasm files from @cognite/reveal are copied to your project's output folder.

Create react app

Install react-app-rewired. It's required to slightly modify react-scripts from create-react-app without running eject
```
npm install react-app-rewired --save-dev
```

'Flip' the existing calls to react-scripts in npm scripts for start, build and test

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

Install copy-webpack-plugin

 npm install copy-webpack-plugin --save-dev

Create a config-overrides.js file in the root directory with the following content

const CopyWebpackPlugin = require('copy-webpack-plugin');

const revealSource = 'node_modules/@cognite/reveal';

module.exports = function override(config) {
  if (!config.plugins) {
    // eslint-disable-next-line no-param-reassign
    config.plugins = [];
  }

  // that's for 6.x version of webpack-copy-plugin
  // if you use 5.x just put content of patterns into constructor
  // new CopyWebpackPlugin([ /* { from, to } */ ])
  config.plugins.push(
    new CopyWebpackPlugin({
      patterns: [
        {
          from: `${revealSource}/**/*.worker.js`,
          to: '.',
          flatten: true,
        },
        {
          from: `${revealSource}/**/*.wasm`,
          to: '.',
          flatten: true,
        },
      ],
    })
  );

  return config;
};

In your index.html file add base location for relative URLs:
```
<head>
   <base href="/" /> 
```

Now all *.worker.js and *.wasm files from @cognite/reveal should be copied into your output folder when you run build.

Non create-react-app based projects

Just make sure that you have *.worker.js and *.wasm files from @cognite/reveal in your output folder. If you use webpack, you might want to add copy-webpack-plugin@^5.1.1 in your webpack.config.js

// webpack.config.js
const revealSource = 'node_modules/@cognite/reveal';

{
  /* ... */
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: `${revealSource}/**/*.worker.js`,
          to: '.',
          flatten: true,
        },
        {
          from: `${revealSource}/**/*.wasm`,
          to: '.',
          flatten: true,
        },
      ],
    })
  ]
}

Make sure your server sends `*.wasm` files with `Content-type: application/wasm` header.

Sometimes servers don't have correct MIME type set for wasm files. In that case you might notice this message in a browser console when it fetches a .wasm file:

Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

In that case you need to configure your server to set the Content-type: application/wasm header for *.wasm files. If you use the nginx add types in the config or edit the mime.types file.

types {
    application/wasm wasm;
}

Coordinate systems

The data served from Cognite Data Fusion is in a right-handed coordinate system with Z up, X to the right and Y pointing into the screen.

In Three.js, which is supported by the Reveal viewer, the coordinate system is right-handed with Y up, X to the right and Z pointing out of the screen.

Conversion between the different coordinate systems

The policy in this repository is to stick with the CDF coordinate system in any code that is not viewer-specific. For viewer-specific code, the conversion should happen as early as possible.

FAQs

What is @cognite/reveal?

Is @cognite/reveal well maintained?

Package last updated on 14 Aug 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install