Export symbols necessary for custom shaders/effects/textures...

- Add an example project that shows how to create/install custom shaders/effects/textures - Update README.md to show how to install fonts post core extensions
pecoram · Jul 10, 2024 · 70f6834 · 70f6834
1 parent b8a07de
commit 70f6834
Show file tree

Hide file tree

Showing 18 changed files with 1,188 additions and 51 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,8 +3,7 @@ node_modules
 .idea
 typedocs
 dist
-dist-cfg
-dist-vitest
+dist-*
 examples/dist-tsc
 visual-regression/failed-results
 visual-regression/certified-snapshots/*-local

diff --git a/README.md b/README.md
@@ -89,63 +89,42 @@ See [docs/ManualRegressionTests.md].
 
 See [RELEASE.md](./RELEASE.md)
 
-## Core Extensions
+## Installing Fonts
 
-To load fonts, and/or other custom code into the Core Space, you must write a
-Core Extension and pass it via dynamically importable URL to the initialization
-of the Renderer.
-
-Just like with loading the ThreadX Core Web Worker for the ThreadX, you import
-your core extension using the `@lightningjs/vite-plugin-import-chunk-url` plugin so that
-it's code is bundled and loaded seperately from your main app's bundle.
-
-You can write a Core Extension by extending the CoreExtension class from the
-Core API like so:
+Fonts can be installed into the Font Manager exposed by the Renderer's Stage.
+There are two types of fonts that you can install, Web/Canvas2D fonts (WebTrFontFace)
+and SDF fonts (SdfTrFontFace). Install that fonts that your applications needs
+at start up so they are ready when your application is rendered.
 
 ```ts
 import {
-  CoreExtension,
+  RendererMain,
   WebTrFontFace,
   SdfTrFontFace,
-  type Stage,
-} from '@lightning/renderer/core';
-
-export default class MyCoreExtension extends CoreExtension {
-  async run(stage: Stage) {
-    // Load fonts into core
-    stage.fontManager.addFontFace(
-      new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
-    );
-
-    stage.fontManager.addFontFace(
-      new SdfTrFontFace(
-        'Ubuntu',
-        {},
-        'msdf',
-        stage,
-        '/fonts/Ubuntu-Regular.msdf.png',
-        '/fonts/Ubuntu-Regular.msdf.json',
-      ),
-    );
-  }
-}
-```
-
-And then in your application's main entry point you can import it using
-`@lightningjs/vite-plugin-import-chunk-url`:
-
-```ts
-import coreExtensionModuleUrl from './MyCoreExtension.js?importChunkUrl';
+} from '@lightningjs/renderer';
 
-// Set up driver, etc.
-
-// Initialize the Renderer
 const renderer = new RendererMain(
   {
-    // Other Renderer Config...
-    coreExtensionModule: coreExtensionModuleUrl,
+    appWidth: 1920,
+    appHeight: 1080,
+    // ...Other Renderer Config
   },
-  'app',
-  driver,
+  'app', // id of div to insert Canvas.
+);
+
+// Load fonts into renderer
+renderer.stage.fontManager.addFontFace(
+  new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
+);
+
+renderer.stage.fontManager.addFontFace(
+  new SdfTrFontFace(
+    'Ubuntu',
+    {},
+    'msdf',
+    stage,
+    '/fonts/Ubuntu-Regular.msdf.png',
+    '/fonts/Ubuntu-Regular.msdf.json',
+  ),
 );
 ```
diff --git a/docs/CustomShaderEffectTexture.md b/docs/CustomShaderEffectTexture.md
@@ -0,0 +1,5 @@
+# Custom Shaders / Effects / Textures
+
+For some examples on how to create custom shaders, effects and textures, see
+the (custom-shader-effect-texture)[./example-projects/custom-shader-effect-texture]
+example project.
diff --git a/docs/example-projects/custom-shader-effect-texture/index.html b/docs/example-projects/custom-shader-effect-texture/index.html
@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <title>Renderer Browser Test</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+
+      #app {
+        display: inline-block;
+        background: #3677e0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/index.ts"></script>
+  </body>
+</html>
diff --git a/docs/example-projects/custom-shader-effect-texture/package.json b/docs/example-projects/custom-shader-effect-texture/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "renderer-custom-shader",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "start": "vite --open --host",
+    "build": "tsc && vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@lightningjs/renderer": "link:../../.."
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.12",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
+  }
+}