@lightningjs/renderer 0.6.1 → 0.7.1

package/src/core/renderers/webgl/internal/RendererUtils.ts

@@ -17,6 +17,8 @@
  * limitations under the License.
  */
 
+import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
+
 export interface CoreWebGlParameters {
   MAX_RENDERBUFFER_SIZE: number;
   MAX_TEXTURE_SIZE: number;
@@ -32,10 +34,10 @@ export interface CoreWebGlParameters {
 
 /**
  * Get device specific webgl parameters
- * @param gl
+ * @param glw
  */
 export function getWebGlParameters(
-  gl: WebGLRenderingContext | WebGL2RenderingContext,
+  glw: WebGlContextWrapper,
 ): CoreWebGlParameters {
   const params: CoreWebGlParameters = {
     MAX_RENDERBUFFER_SIZE: 0,
@@ -55,7 +57,7 @@ export function getWebGlParameters(
   const keys = Object.keys(params) as Array<keyof CoreWebGlParameters>;
   keys.forEach((key) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    params[key] = gl.getParameter(gl[key]);
+    params[key] = glw.getParameter(glw[key]);
   });
 
   return params;
@@ -77,10 +79,10 @@ export interface CoreWebGlExtensions {
 
 /**
  * Get device webgl extensions
- * @param gl
+ * @param glw
  */
 export function getWebGlExtensions(
-  gl: WebGLRenderingContext,
+  glw: WebGlContextWrapper,
 ): CoreWebGlExtensions {
   const extensions: CoreWebGlExtensions = {
     ANGLE_instanced_arrays: null,
@@ -98,7 +100,7 @@ export function getWebGlExtensions(
   const keys = Object.keys(extensions) as Array<keyof CoreWebGlExtensions>;
   keys.forEach((key) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    extensions[key] = gl.getExtension(key);
+    extensions[key] = glw.getExtension(key);
   });
 
   return extensions;
@@ -107,15 +109,11 @@ export function getWebGlExtensions(
 /**
  * Allocate big memory chunk that we
  * can re-use to draw quads
+ *
+ * @param glw
  * @param size
  */
-export function createIndexBuffer(
-  gl: WebGLRenderingContext | WebGL2RenderingContext,
-  size: number,
-) {
-  if (!gl) {
-    throw new Error('No WebGL context');
-  }
+export function createIndexBuffer(glw: WebGlContextWrapper, size: number) {
   const maxQuads = ~~(size / 80);
   const indices = new Uint16Array(maxQuads * 6);
 
@@ -128,7 +126,6 @@ export function createIndexBuffer(
     indices[i + 5] = j + 3;
   }
 
-  const buffer = gl.createBuffer();
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
-  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+  const buffer = glw.createBuffer();
+  glw.elementArrayBufferData(buffer, indices, glw.STATIC_DRAW);
 }

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 
+import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
 import type { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
 
 //#region Types
@@ -93,43 +94,43 @@ export interface ShaderProgramSources {
 //#endregion Types
 
 export function createShader(
-  gl: WebGLRenderingContext,
+  glw: WebGlContextWrapper,
   type: number,
   source: string,
 ) {
-  const shader = gl.createShader(type);
+  const shader = glw.createShader(type);
   if (!shader) {
     throw new Error();
   }
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  glw.shaderSource(shader, source);
+  glw.compileShader(shader);
+  const success = glw.getShaderParameter(shader, glw.COMPILE_STATUS);
   if (success) {
     return shader;
   }
 
-  console.log(gl.getShaderInfoLog(shader));
-  gl.deleteShader(shader);
+  console.log(glw.getShaderInfoLog(shader));
+  glw.deleteShader(shader);
 }
 
 export function createProgram(
-  gl: WebGLRenderingContext,
+  glw: WebGlContextWrapper,
   vertexShader: WebGLShader,
   fragmentShader: WebGLShader,
 ) {
-  const program = gl.createProgram();
+  const program = glw.createProgram();
   if (!program) {
     throw new Error();
   }
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
+  glw.attachShader(program, vertexShader);
+  glw.attachShader(program, fragmentShader);
+  glw.linkProgram(program);
+  const success = glw.getProgramParameter(program, glw.LINK_STATUS);
   if (success) {
     return program;
   }
 
-  console.log(gl.getProgramInfoLog(program));
-  gl.deleteProgram(program);
+  console.log(glw.getProgramInfoLog(program));
+  glw.deleteProgram(program);
   return undefined;
 }

package/src/core/renderers/webgl/shaders/DefaultShader.ts

@@ -36,13 +36,9 @@ export class DefaultShader extends WebGlCoreShader {
   }
 
   override bindTextures(textures: WebGlCoreCtxTexture[]) {
-    const { gl } = this;
-    if (gl.getParameter(gl.TEXTURE_BINDING_2D) === textures[0]!.ctxTexture) {
-      return;
-    }
-
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, textures[0]!.ctxTexture);
+    const { glw } = this;
+    glw.activeTexture(0);
+    glw.bindTexture(textures[0]!.ctxTexture);
   }
 
   static override shaderSources: ShaderProgramSources = {

package/src/core/renderers/webgl/shaders/DefaultShaderBatched.ts

@@ -44,7 +44,7 @@ export class DefaultShaderBatched extends WebGlCoreShader {
   }
 
   override bindTextures(texture: WebGlCoreCtxTexture[]) {
-    const { renderer, gl } = this;
+    const { renderer, glw } = this;
     if (
       texture.length > renderer.system.parameters.MAX_VERTEX_TEXTURE_IMAGE_UNITS
     ) {
@@ -53,8 +53,8 @@ export class DefaultShaderBatched extends WebGlCoreShader {
       );
     }
     texture.forEach((t, i) => {
-      gl.activeTexture(gl.TEXTURE0 + i);
-      gl.bindTexture(gl.TEXTURE_2D, t.ctxTexture);
+      glw.activeTexture(i);
+      glw.bindTexture(t.ctxTexture);
     });
     const samplers = Array.from(Array(texture.length).keys());
     this.setUniform('u_textures[0]', samplers);

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -27,6 +27,7 @@ import type { UniformInfo } from '../internal/ShaderUtils.js';
 import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
 import { ShaderEffect } from './effects/ShaderEffect.js';
 import type { EffectMap } from '../../../CoreShaderManager.js';
+import memize from 'memize';
 
 /**
  * Allows the `keyof EffectMap` to be mapped over and form an discriminated
@@ -79,6 +80,27 @@ export interface SpecificEffectDesc<
   props?: ExtractProps<EffectMap[FxType]>;
 }
 
+const effectCache = new Map<string, EffectDesc[]>();
+const getResolvedEffect = (
+  effects: EffectDesc[] | undefined,
+  effectContructors: Partial<EffectMap> | undefined,
+): EffectDesc[] => {
+  const key = JSON.stringify(effects);
+  if (effectCache.has(key)) {
+    return effectCache.get(key)!;
+  }
+
+  const value = (effects ?? []).map((effect) => ({
+    type: effect.type,
+    props: effectContructors![effect.type]!.resolveDefaults(
+      (effect.props || {}) as any,
+    ),
+  })) as EffectDesc[];
+
+  effectCache.set(key, value);
+  return value;
+};
+
 export class DynamicShader extends WebGlCoreShader {
   effects: Array<InstanceType<EffectMap[keyof EffectMap]>> = [];
 
@@ -108,19 +130,22 @@ export class DynamicShader extends WebGlCoreShader {
     this.effects = shader.effects as Array<
       InstanceType<EffectMap[keyof EffectMap]>
     >;
+
+    this.calculateProps = memize(this.calculateProps.bind(this));
   }
 
   override bindTextures(textures: WebGlCoreCtxTexture[]) {
-    const { gl } = this;
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, textures[0]!.ctxTexture);
+    const { glw } = this;
+    glw.activeTexture(0);
+    glw.bindTexture(textures[0]!.ctxTexture);
   }
 
-  protected override bindProps(props: Required<DynamicShaderProps>): void {
-    const effects = this.renderer.shManager.getRegisteredEffects();
-    props.effects?.forEach((eff, index) => {
+  private calculateProps(effects: EffectDesc[]) {
+    const regEffects = this.renderer.shManager.getRegisteredEffects();
+    const results: { name: string; value: unknown }[] = [];
+    effects?.forEach((eff, index) => {
       const effect = this.effects[index]!;
-      const fxClass = effects[effect.name as keyof EffectMap]!;
+      const fxClass = regEffects[effect.name as keyof EffectMap]!;
       const props = eff.props ?? {};
       const uniInfo = effect.uniformInfo;
       Object.keys(props).forEach((p) => {
@@ -132,9 +157,17 @@ export class DynamicShader extends WebGlCoreShader {
         if (Array.isArray(value)) {
           value = new Float32Array(value);
         }
-        this.setUniform(propInfo.name, value);
+        results.push({ name: propInfo.name, value });
       });
     });
+    return results;
+  }
+
+  protected override bindProps(props: Required<DynamicShaderProps>): void {
+    const results = this.calculateProps(props.effects);
+    results.forEach((r) => {
+      this.setUniform(r.name, r.value);
+    });
   }
 
   static createShader(
@@ -333,12 +366,7 @@ export class DynamicShader extends WebGlCoreShader {
     effectContructors?: Partial<EffectMap>,
   ): Required<DynamicShaderProps> {
     return {
-      effects: (props.effects ?? []).map((effect) => ({
-        type: effect.type,
-        props: effectContructors![effect.type]!.resolveDefaults(
-          (effect.props || {}) as any,
-        ),
-      })) as MapEffectDescs<keyof EffectMap>[],
+      effects: getResolvedEffect(props.effects, effectContructors),
       $dimensions: {
         width: 0,
         height: 0,

package/src/core/renderers/webgl/shaders/RoundedRectangle.ts

@@ -71,9 +71,9 @@ export class RoundedRectangle extends WebGlCoreShader {
   }
 
   override bindTextures(textures: WebGlCoreCtxTexture[]) {
-    const { gl } = this;
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, textures[0]!.ctxTexture);
+    const { glw } = this;
+    glw.activeTexture(0);
+    glw.bindTexture(textures[0]!.ctxTexture);
   }
 
   protected override bindProps(props: Required<RoundedRectangleProps>): void {

package/src/core/renderers/webgl/shaders/SdfShader.ts

@@ -80,9 +80,9 @@ export class SdfShader extends WebGlCoreShader {
   }
 
   override bindTextures(textures: WebGlCoreCtxTexture[]) {
-    const { gl } = this;
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, textures[0]!.ctxTexture);
+    const { glw } = this;
+    glw.activeTexture(0);
+    glw.bindTexture(textures[0]!.ctxTexture);
   }
 
   protected override bindProps(props: SdfShaderProps): void {

package/src/core/renderers/webgl/shaders/effects/BorderEffect.ts

@@ -77,7 +77,7 @@ export class BorderEffect extends ShaderEffect {
 
   static override onEffectMask = `
   float mask = clamp(shaderMask + width, 0.0, 1.0) - clamp(shaderMask, 0.0, 1.0);
-  return mix(shaderColor, maskColor, mask);
+  return mix(shaderColor, mix(shaderColor, maskColor, maskColor.a), mask);
   `;
 
   static override onColorize = `

package/src/core/renderers/webgl/shaders/effects/GrayscaleEffect.ts

@@ -16,7 +16,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ShaderEffect } from './ShaderEffect.js';
+import {
+  ShaderEffect,
+  type DefaultEffectProps,
+  type ShaderEffectUniforms,
+} from './ShaderEffect.js';
+
+/**
+ * Properties of the {@link GrayscaleEffect} effect
+ */
+export interface GrayscaleEffectProps extends DefaultEffectProps {
+  /**
+   * Grey scale amount between 0 - 1.
+   *
+   * @default 1
+   */
+  amount?: number;
+}
 
 /**
  * Grayscale effect grayscales the color values of the current mask color
@@ -28,10 +44,24 @@ export class GrayscaleEffect extends ShaderEffect {
     return `grayscale`;
   }
 
+  static override resolveDefaults(
+    props: GrayscaleEffectProps,
+  ): Required<GrayscaleEffectProps> {
+    return {
+      amount: props.amount ?? 1,
+    };
+  }
+
+  static override uniforms: ShaderEffectUniforms = {
+    amount: {
+      value: 1,
+      method: 'uniform1f',
+      type: 'float',
+    },
+  };
+
   static override onColorize = `
-    vec3 color = pow(maskColor.rgb, vec3(2.0));
-    float gray = dot(color, vec3(0.2126, 0.7152, 0.0722));
-    float gammaGray = sqrt(gray);
-    return vec4(gammaGray, gammaGray, gammaGray, 1.0);
+    float grayness = 0.2 * maskColor.r + 0.6 * maskColor.g + 0.2 * maskColor.b;
+    return vec4(amount * vec3(grayness) + (1.0 - amount) * maskColor.rgb, maskColor.a);
   `;
 }

package/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts

@@ -91,14 +91,14 @@ export class SdfTrFontFace<
       .then(async (response) => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         (this.data as SdfFontData) = await response.json();
-        // We know `data` is defined here, because we just set it
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        (this.shaper as FontShaper) = new SdfFontShaper(this.data!);
         // Add all the glyphs to the glyph map
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         this.data!.chars.forEach((glyph) => {
           this.glyphMap.set(glyph.id, glyph);
         });
+        // We know `data` is defined here, because we just set it
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        (this.shaper as FontShaper) = new SdfFontShaper(this.data!, this.glyphMap);
         this.checkLoaded();
       })
       .catch(console.error);

package/src/core/text-rendering/font-face-types/SdfTrFontFace/internal/SdfFontShaper.test.ts

@@ -24,12 +24,17 @@ import { SdfFontShaper, type SdfFontData } from './SdfFontShaper.js';
 import { getUnicodeCodepoints } from '../../../renderers/SdfTextRenderer/internal/getUnicodeCodepoints.js';
 import sdfData from 'test/mockdata/Ubuntu-Bold.msdf.json';
 
+const glyphMap = new Map<number, SdfFontData['chars'][0]>();
+sdfData.chars.forEach((glyph) => {
+  glyphMap.set(glyph.id, glyph);
+});
+
 // TODO: Need tests for
 // - mapped = false
 
 describe('SdfFontShaper', () => {
   it('should be able to shape text.', () => {
-    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData);
+    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData, glyphMap);
     const peekableCodepoints = new PeekableIterator(
       getUnicodeCodepoints('Hi!'),
     );
@@ -83,7 +88,7 @@ describe('SdfFontShaper', () => {
   });
 
   it('should be able to shape text that we know have kerning pairs.', () => {
-    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData);
+    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData, glyphMap);
     const peekableCodepoints = new PeekableIterator(
       getUnicodeCodepoints('WeVo'),
     );
@@ -125,7 +130,8 @@ describe('SdfFontShaper', () => {
   });
 
   it('should be able to shape text with letterSpacing.', () => {
-    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData);
+
+    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData, glyphMap);
     const peekableCodepoints = new PeekableIterator(
       getUnicodeCodepoints('We!'),
     );

package/src/core/text-rendering/font-face-types/SdfTrFontFace/internal/SdfFontShaper.ts

@@ -36,11 +36,13 @@ type KerningTable = Record<
 
 export class SdfFontShaper extends FontShaper {
   private readonly data: SdfFontData;
+  private readonly glyphMap: Map<number, SdfFontData['chars'][0]>;
   private readonly kernings: KerningTable;
 
-  constructor(data: SdfFontData) {
+  constructor(data: SdfFontData, glyphMap: Map<number, SdfFontData['chars'][0]>) {
     super();
     this.data = data;
+    this.glyphMap = glyphMap;
 
     const kernings: KerningTable = (this.kernings = {});
     data.kernings.forEach((kerning) => {
@@ -59,7 +61,7 @@ export class SdfFontShaper extends FontShaper {
     let lastGlyphId: number | undefined = undefined;
     while ((codepointResult = codepoints.peek()) && !codepointResult.done) {
       const codepoint = codepointResult.value;
-      const glyph = this.data.chars.find((char) => char.id === codepoint);
+      const glyph = this.glyphMap.get(codepoint);
       codepoints.next();
       if (glyph !== undefined) {
         // We found a glyph for this codepoint

package/src/core/text-rendering/renderers/CanvasTextRenderer.ts

@@ -30,6 +30,7 @@ import {
   getNormalizedAlphaComponent,
   type BoundWithValid,
   createBound,
+  type RectWithValid,
 } from '../../lib/utils.js';
 import type { ImageTexture } from '../../textures/ImageTexture.js';
 import type { TrFontFace } from '../font-face-types/TrFontFace.js';
@@ -209,6 +210,26 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
         state.props.letterSpacing = value;
         this.invalidateLayoutCache(state);
       },
+      lineHeight: (state, value) => {
+        state.props.lineHeight = value;
+        this.invalidateLayoutCache(state);
+      },
+      maxLines: (state, value) => {
+        state.props.maxLines = value;
+        this.invalidateLayoutCache(state);
+      },
+      textBaseline: (state, value) => {
+        state.props.textBaseline = value;
+        this.invalidateLayoutCache(state);
+      },
+      verticalAlign: (state, value) => {
+        state.props.verticalAlign = value;
+        this.invalidateLayoutCache(state);
+      },
+      overflowSuffix: (state, value) => {
+        state.props.overflowSuffix = value;
+        this.invalidateLayoutCache(state);
+      },
       // debug: (state, value) => {
       //   state.props.debug = value;
       // },
@@ -321,6 +342,11 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
         wordWrapWidth:
           state.props.contain === 'none' ? undefined : state.props.width,
         letterSpacing: state.props.letterSpacing,
+        lineHeight: state.props.lineHeight,
+        maxLines: state.props.maxLines,
+        textBaseline: state.props.textBaseline,
+        verticalAlign: state.props.verticalAlign,
+        overflowSuffix: state.props.overflowSuffix,
       };
       // const renderInfoCalculateTime = performance.now();
       state.renderInfo = state.lightning2TextRenderer.calculateRenderInfo();
@@ -499,7 +525,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
   override renderQuads(
     state: CanvasTextRendererState,
     transform: Matrix3d,
-    clippingRect: Rect | null,
+    clippingRect: RectWithValid,
     alpha: number,
   ): void {
     const { stage } = this;

package/src/core/text-rendering/renderers/LightningTextTextureRenderer.ts

@@ -73,7 +73,7 @@ export interface Settings {
   verticalAlign: TextVerticalAlign;
   offsetY: number | null;
   maxLines: number;
-  maxLinesSuffix: string;
+  overflowSuffix: string;
   precision: number;
   textColor: RGBA;
   paddingLeft: number;
@@ -248,7 +248,7 @@ export class LightningTextTextureRenderer {
           suffix = '';
           break;
         case 'ellipsis':
-          suffix = this._settings.maxLinesSuffix;
+          suffix = this._settings.overflowSuffix;
           break;
         default:
           suffix = this._settings.textOverflow;
@@ -283,10 +283,10 @@ export class LightningTextTextureRenderer {
       const usedLines = lines.slice(0, this._settings.maxLines);
 
       let otherLines = null;
-      if (this._settings.maxLinesSuffix) {
+      if (this._settings.overflowSuffix) {
         // Wrap again with max lines suffix enabled.
-        const w = this._settings.maxLinesSuffix
-          ? this.measureText(this._settings.maxLinesSuffix)
+        const w = this._settings.overflowSuffix
+          ? this.measureText(this._settings.overflowSuffix)
           : 0;
         const al = this.wrapText(
           usedLines[usedLines.length - 1]!,
@@ -295,7 +295,7 @@ export class LightningTextTextureRenderer {
           textIndent,
         );
         usedLines[usedLines.length - 1] = `${al.l[0]!}${
-          this._settings.maxLinesSuffix
+          this._settings.overflowSuffix
         }`;
         otherLines = [al.l.length > 1 ? al.l[1] : ''];
       } else {
@@ -676,7 +676,7 @@ export class LightningTextTextureRenderer {
       verticalAlign: 'top',
       offsetY: null,
       maxLines: 0,
-      maxLinesSuffix: '..',
+      overflowSuffix: '...',
       textColor: [1.0, 1.0, 1.0, 1.0],
       paddingLeft: 0,
       paddingRight: 0,