feat: v2

.vscode/settings.json

@@ -10,9 +10,11 @@
         "gltf",
         "halfspace",
         "halfspaces",
+        "importmap",
         "linestrip",
         "measurescene",
         "MSAL",
+        "Naviswork",
         "Novorender",
         "Novoweb",
         "objectgroups",
@@ -22,4 +24,5 @@
         "stackblitz",
         "webgl"
     ],
+    "files.associations": { "*.json": "jsonc" }
 }

docusaurus.config.js

@@ -90,6 +90,15 @@ const config = {
             label: "Playground",
           },
           // { to: '/blog', label: 'Blog', position: 'left' },
+          {
+            type: "dropdown",
+            position: "right",
+            label: "Stable",
+            items: [
+              { to: "/", label: "Stable (current)" },
+              { type: "html", value: `<a class="dropdown__link" href="#" onClick="window.location.href = window.location.origin + '/v2'">V2 🚧</a>` },
+            ],
+          },
           {
             href: baseGithub,
             className: "header-github-link",

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "npm run validate-snippets && npm run re-gen && docusaurus build",
+    "build": "npm run validate-snippets && npm run re-gen && docusaurus build && cd v2/ && npm ci && npm run build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",

staticwebapp.config.json

@@ -0,0 +1,6 @@
+{
+  "globalHeaders": {
+    "Cross-Origin-Opener-Policy": "same-origin",
+    "Cross-Origin-Embedder-Policy": "require-corp"
+  }
+}

v2/.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:@docusaurus/recommended", "prettier"],
+  overrides: [],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint"],
+  rules: {},
+  settings: {
+    react: {
+      version: "detect", // React version. "detect" automatically picks the version you have installed.
+      // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
+      // It will default to "latest" and warn if missing, and to "detect" in the future
+    },
+  },
+};

v2/.gitignore

@@ -0,0 +1,33 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+/docs/api
+/docs/webgl-api
+/docs/data-js-api
+/docs/measure-api
+/docs/web_api
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+docusaurus-theme-github-codeblock-main
+
+scene-screenshot-gen/index.js
+demo-snippets/**/*.js
+src/shared/*.js
+
+/ts

v2/.markdownlint.json

@@ -0,0 +1,11 @@
+{
+    "MD013": {
+        "line_length": 100000
+    },
+    "MD033": {
+        "allowed_elements": [
+            "img",
+            "br"
+        ]
+    }
+}

v2/.prettierignore

@@ -0,0 +1,19 @@
+# Ignore artifacts:
+.docusaurus/*
+.git
+.github
+.husky
+.vscode
+.markdownlint.json
+build
+coverage
+blog
+scene-screenshot-gen
+static
+type-definitions
+LICENSE
+typings.d.ts
+tsconfig.json
+docs/data-js-api
+docs/measure-api
+docs/webgl-api

v2/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 280
+}

v2/README.md

@@ -0,0 +1 @@
+WIP Documentation for Web API aka v2 api

v2/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};

v2/demo-snippets/config/index.ts

@@ -0,0 +1,100 @@
+import { Core3DImports, DeviceProfile, RenderStateChanges, getDeviceProfile, Core3DImportMap, downloadImports } from "@novorender/api";
+// @ts-expect-error
+import { shaders } from "@novorender/api/public/shaders";
+import type { IPosition } from "monaco-editor";
+
+export interface IModule {
+  main(): RenderStateChanges;
+}
+export interface DemoHostCtor<T> {
+  new (context: IDemoContext): IDemoHost<T>;
+}
+export interface IDemoHost<T> {
+  run(): Promise<void>;
+  updateModule(module: T): string | undefined; // return potential error from validation
+  exit(): void;
+}
+
+interface ICanvas {
+  primaryCanvas: HTMLCanvasElement;
+  canvas2D?: HTMLCanvasElement;
+  previewCanvas?: HTMLCanvasElement;
+}
+export interface IDemoContext<T = any> {
+  readonly canvasElements: ICanvas;
+  readonly deviceProfile: DeviceProfile;
+  readonly imports: Core3DImports;
+}
+
+/** Core imports, you can provide your own to `createDemoContext` if want */
+export let coreImportsPromise: Promise<Core3DImports>;
+// for fixing docusaurus build
+if (typeof window !== "undefined") {
+  const baseUrl = new URL(".", window.location.origin + "/v2/");
+  const coreImportsMap: Core3DImportMap = { baseUrl, shaders };
+  coreImportsPromise = downloadImports(coreImportsMap);
+}
+
+export async function createDemoContext(canvasElements: ICanvas, importsPromise: Promise<Core3DImports> = coreImportsPromise): Promise<IDemoContext> {
+  const gpuTier = 2; // laptop with reasonably new/powerful GPU.
+  const deviceProfile = getDeviceProfile(gpuTier);
+  const imports = await importsPromise;
+  return { canvasElements, deviceProfile, imports };
+}
+
+export interface IDempProps {
+  /** Directory that contains this demo, e.g. `getting_started/condos.ts`, `getting_started` is the dirName here */
+  dirName: string;
+  /** A friendly name for the demo (must be unique) */
+  demoName: string;
+  /** editor config */
+  editorConfig: IEditorConfig;
+  /** Github edit URL, should be relative path e.g. `demo-snippets/tutorials/clipping_volumes/box.ts` */
+  editUrl: string;
+  /** Code that needs to be in the editor */
+  code: string;
+  /** preview image URL for the playground, sample: `assets/demo-screenshots/imageName.png` */
+  previewImageUrl?: string;
+  /** short description for this demo */
+  description: string;
+  /** Demo host */
+  hostCtor: DemoHostCtor<any>;
+}
+
+export interface IEditorConfig {
+  /** should playground start automatically? defaults to `true` */
+  clickToRun?: boolean;
+  /** whether to enable a secondary canvas for 2D or not, defaults to `true` */
+  canvas2D?: boolean;
+  /** whether to enable a third canvas for 2D image preview or not, defaults to `false` */
+  enablePreviewCanvas?: boolean;
+  /** using `fill` will make the playground to take entire viewport's width and height, `inline` is default */
+  mode?: "inline" | "fill";
+  /** Set the primary position of the cursor (https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditor.html#setPosition)*/
+  cursorPosition?: IPosition;
+  /** Scroll vertically as necessary and reveal a line close to the top of the viewport (https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditor.html#revealLineNearTop) */
+  revealLine?: number;
+}
+
+export type IDemo = Record<string, IDempProps>;
+
+export function demo<T extends string>(dirName: string, demoName: T, code: string, hostCtor: DemoHostCtor<any>, config: IEditorConfig = {}, desc?: string): IDemo {
+  return {
+    [demoName]: {
+      dirName,
+      demoName,
+      editorConfig: {
+        clickToRun: true,
+        mode: "inline",
+        canvas2D: true,
+        enablePreviewCanvas: false,
+        ...config,
+      },
+      hostCtor,
+      code,
+      editUrl: `demo-snippets/tutorials/${dirName}/${demoName}.ts`,
+      previewImageUrl: `/assets/demo-screenshots/${demoName}.png`,
+      description: desc || "No Description Available",
+    } as const,
+  } as const;
+}

v2/demo-snippets/index.ts

@@ -0,0 +1,3 @@
+import * as tutorials from "./tutorials";
+
+export { tutorials };

v2/demo-snippets/tsconfig.json

@@ -0,0 +1,63 @@
+{
+    // "include": ["./**/*"],
+    "compilerOptions": {
+        /* Basic Options */
+        // "incremental": true,                   /* Enable incremental compilation */
+        "target": "ESNext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+        "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+        // "lib": [],                             /* Specify library files to be included in the compilation. */
+        // "allowJs": true,                       /* Allow javascript files to be compiled. */
+        // "checkJs": true,                       /* Report errors in .js files. */
+        // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+        // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+        // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+        // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+        // "outFile": "./",                       /* Concatenate and emit output to single file. */
+        // "outDir": "./",                        /* Redirect output structure to the directory. */
+        // "rootDir": "../",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+        // "composite": true,                     /* Enable project compilation */
+        // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+        // "removeComments": true,                /* Do not emit comments to output. */
+        "noEmit": true, /* Do not emit outputs. */
+        // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+        // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+        // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+        /* Strict Type-Checking Options */
+        "strict": true, /* Enable all strict type-checking options. */
+        // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+        // "strictNullChecks": true,              /* Enable strict null checks. */
+        // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+        // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+        // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+        // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+        // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+        /* Additional Checks */
+        // "noUnusedLocals": true,                /* Report errors on unused locals. */
+        // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+        // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+        // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+        /* Module Resolution Options */
+        // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+        // "baseUrl": "../",                       /* Base directory to resolve non-absolute module names. */
+        // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+        // "rootDirs": ["../"],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+        // "typeRoots": [],                       /* List of folders to include type definitions from. */
+        // "types": [],                           /* Type declaration files to be included in compilation. */
+        // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+        "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+        // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+        // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+        /* Source Map Options */
+        // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+        // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+        // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+        // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+        /* Experimental Options */
+        // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+        // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+        /* Advanced Options */
+        "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
+        "skipLibCheck": true,
+        // "noResolve": true
+    },
+}

v2/demo-snippets/tutorials/getting_started/basic.ts

@@ -0,0 +1,5 @@
+import type { RenderStateChanges } from "@novorender/api";
+
+export function main(): RenderStateChanges {
+  return { grid: { enabled: true } };
+}

v2/demo-snippets/tutorials/getting_started/index.ts

@@ -0,0 +1,66 @@
+/** Here goes  code demo code that you can see in the playground */
+import spheres from "./spheres.ts?raw";
+import basic from "./basic.ts?raw";
+
+import { IDemoContext, IDemoHost, IModule, demo } from "../../config";
+import { View } from "@novorender/api";
+
+/**
+ * Add any boilerplate code here in this class that will work
+ * behind the scenes and is not related to the objective of demo
+ * e.g. you can create context or view here that doesn't need to
+ * be in the demo
+ * @notes host class must implement `IDemoHost<IModule>`
+ */
+class RenderStateDemoHost implements IDemoHost<IModule> {
+  private _module: IModule | undefined;
+  private _view: View | undefined;
+
+  constructor(readonly context: IDemoContext) {}
+
+  async run(): Promise<void> {
+    const {
+      canvasElements: { primaryCanvas: canvas },
+      deviceProfile,
+      imports,
+    } = this.context;
+    const view = new View(canvas, deviceProfile, imports);
+    const envs = await view.availableEnvironments("https://api.novorender.com/assets/env/index.json");
+    const env = envs[0];
+
+    view.modifyRenderState({ background: { url: env.url, blur: 0.2 } });
+
+    this._view = view;
+
+    let prev_module = this._module;
+
+    view.animate = () => {
+      try {
+        if (prev_module !== this._module) {
+          prev_module = this._module;
+          const stateChanges = prev_module?.main();
+          if (stateChanges) {
+            view.modifyRenderState(stateChanges);
+          }
+        }
+      } catch (error) {}
+    };
+
+    await view.run();
+    view.dispose();
+  }
+
+  updateModule(module: IModule): string | undefined {
+    this._module = module;
+    return "test";
+  }
+
+  exit(): void {
+    this._view?.exit();
+  }
+}
+
+export const gettingStarted = {
+  ...demo("getting_started", "basic_condos", basic, RenderStateDemoHost, {}, "A basic demonstration of the WebGL Web API."),
+  ...demo("getting_started", "spheres", spheres, RenderStateDemoHost, {}, "Dynamic Spheres."),
+};