Overview

Spectacles Polynode is a "polyfill" for missing libraries from Node.js and HTML5 browser ecosystems. This is intended for portability when porting existing libraries and not a replacement for true spatial design. That said, it is a good starting point for designing experiences to be used in AR if you only know HTML5/Canvas. This project will contain libraries for use in your own projects, and will eventually migrate to being an asset if they are found to be useful.

These are the currently supported libraries:

• Spacecanvas
• (future) Spacedom
• (future) SVG (this may already work, but need to test)

Build

At the moment the repo doesn't have a prefab created for the library, but you can just add the library to an existing project. For a good example, see SpaceCanvasDemo.ts or SpaceCanvasGameOfLife.ts.

The general scheme to follow in your code is to import the libraries you need

import { SpaceCanvas } from './Spacecanvas';
import { WebView } from 'WebView.lspkg/WebView';

Add a WebView into your input to the script cpomonent:

@input
@hint('WebView component from WebView.lspkg, drag into the Scene')
webView!: WebView;

There are some error conditions to guard against:

    if (!this.webView) {
      print('[GameOfLife] ERROR: No webView assigned.');
      return;
    }

This is the boilerplate to set up the scene:

    const W = 1024;
    const H = 768;
    const CELL = 8;
    const COLS = Math.floor(W / CELL);
    const ROWS = Math.floor(H / CELL);

    const canvas = new SpaceCanvas(W, H, this.webView, this);
    const ctx = await canvas.getContext('2d');
    // Draw initial background
    ctx.fillStyle = '#0a0a1a';
    ctx.fillRect(0, 0, W, H);

Now your rendering:

ctx.executeRaw('YOURJSCODEHERE');
ctx.flush();

The JS code used will be any sort of ctx calls. See: https://www.w3schools.com/html/html5_canvas.asp When that's all set up, your actual ctx must be flushed.

Test

TODO - need to get a conformance test suite in to see what is missing in terms of the W3C spec for canvas.

Demos

• SpaceCanvasSamples : a general set of samples of various HTML5 canvas type features
• SpaceCanvasGameOfLife: It's everyone's favorite Conway's Game Of Life
• SpaceCanvasNotDoom: It's not Doom. But it aspires to show what a FPS can look like spatially.

Known Issues

• Heat! :fire It will overheat your device quickly if you have a busy canvas
• compatibility: may not be 100% 1-1 with HTML5 Canvas
• Multiple canvases may not render simulatenously. Not sure if this is a WebView issue that it only will run one at a time.

Roadmap

• Add DOM api for porting compability: spacedom
• Add SVG rendering support

Attributions

JorgeP and I started on some of these ideas last summer. We were working on a project to get LaTeX rendering working on spectacles. This was supposed to be something we could do in TS/JS using existng libraries. We figured out quickly that all of the libraries relied on output of PDF, SVG, HTML5, or png. Since we don't have access to native code, generating a PNG would have required a bunch of retooling of the LaTeX parser. Outputing PDF wasn't an option. SVG seemed like it would be viable, but SVG rendering isn't supported natively in Lens Studio. So we were stuck. Yeah, we did not want to venture down a full rewrite of a library like MathJAX, something that took years to create.

I started to think the problem was not me, but the ecosystem. All ecosystems assume DOM is available, event emitters, easy XML parsing, and the biggie, HTML5 Canvas. This was the light that went off. We need an HTML5 canvas exposed in Snap Spectacles as an API that is roughly compatible. A lot of optimization has gone into the web stack. Many devs understand HTML5 Canvas as a tool for animation or working outside of the principles of CSS layout. So get canvas done first, and then unlock other things that we might need for compatibility.

90% of this code was built by a mix of Grok (I started with this prompt): I am building a spatial version of HTML5 canvas as a widget to use in Lens Studio for Snap Spectacles. Please propose an approach for designing an HTML5 canvas design that will work in 3D space and provde a performant best effort pollyfill/shim for canvas from html5. To avoid confusion with a similarly named classes, and lets call it spacecanvas. The code proposal should use Typescript and utilize Lens Scripting apis : https://developers.snap.com/lens-studio/api/lens-scripting/

Grok had a lot of issues with inventing apis that didn't exist, but conceptually, it came up with the core concept: use a WebView to get the HTML5 context without re-inventing that. Then expose the API for canvas in a wrapper to the SpaceCanvas api. Grok got a bit annoying in its inability to solve problems once stuck. So in comes claude code to cleanup the existing code produced by Grok, which was just Spacecanvas.ts. Claude produced a working design after we gave up trying to use a programatic WebView and switched to using one placed in the scene.

Special thanks to the product team for dropping this little detail about how to inject data into the WebView : https://www.reddit.com/r/Spectacles/comments/1rjsa2x/comment/o8hzrrm/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button . This gives us offline capability to render data from within a Spectacles Lens Script API.