Skip to content

Commit

Permalink
Make GLText work in workers (#622)
Browse files Browse the repository at this point in the history
This is half-reasonable, half-hack:
* Preferring `OffscreenCanvas`, and detecting it at runtime is
  reasonable.
* Hacking `document` for TinySDF is a bit crazy. I've raised an issue
  upstream, hopefully this won't live long.

Test plan: Linked against a local webviz and opened a bag containing a
strange character with the worker flag on.
  • Loading branch information
MatthewSteel authored Apr 16, 2021
1 parent 05c5ab9 commit 7407ef1
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 2 deletions.
2 changes: 1 addition & 1 deletion packages/regl-worldview/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "regl-worldview",
"version": "0.16.1",
"version": "0.16.2",
"description": "A reusable component for rendering 2D and 3D views using regl",
"license": "Apache-2.0",
"repository": "cruise-automation/webviz/tree/master/packages/regl-worldview",
Expand Down
10 changes: 9 additions & 1 deletion packages/regl-worldview/src/commands/GLText.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@ import { createInstancedGetChildrenForHitmap } from "../utils/getChildrenForHitm
import Command, { type CommonCommandProps } from "./Command";
import { isColorDark, type TextMarker } from "./Text";

// HACK: TinySDF doesn't agree with workers. Until support is added, hack this to make it work.
// TODO(steel): Upstream the fix in memoizedCreateCanvas.
if (!self.document) {
// $FlowFixMe: Flow doesn't know about OffscreenCanvas.
self.document = { createElement: () => new OffscreenCanvas(0, 0) };
}

// The GLText command renders text from a Signed Distance Field texture.
// There are many external resources about SDFs and text rendering in WebGL, including:
// https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
Expand Down Expand Up @@ -80,7 +87,8 @@ const BG_COLOR_LIGHT = Object.freeze({ r: 1, g: 1, b: 1, a: 1 });
const BG_COLOR_DARK = Object.freeze({ r: 0, g: 0, b: 0, a: 1 });

const memoizedCreateCanvas = memoizeOne((font) => {
const canvas = document.createElement("canvas");
// $FlowFixMe: Flow doesn't know about OffscreenCanvas.
const canvas: HTMLCanvasElement = self.OffscreenCanvas ? new OffscreenCanvas(0, 0) : document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.font = font;
return ctx;
Expand Down

0 comments on commit 7407ef1

Please sign in to comment.