Skip to content

Commit 9933332

Browse files
alpha to RenderOp with automatic shader props (#18)
I've added alpha to the shader props which can be used for automatic shader props similar to [$dimensions](#1). This is a prop we need for some of the DynamicShader effects. This pull request is also related to #15
2 parents 9952484 + 219723c commit 9933332

File tree

6 files changed

+36
-5
lines changed

6 files changed

+36
-5
lines changed

examples/tests/dynamic-shader.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export default async function ({ renderer }: ExampleSettings) {
154154
y: 100,
155155
width: 250,
156156
height: 500,
157-
color: 0xff0000ff,
157+
color: 0x00000000,
158158
shader: renderer.makeShader('DynamicShader', {
159159
effects: [
160160
{

src/core/renderers/webgl/WebGlCoreRenderOp.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
4343
readonly buffers: BufferCollection,
4444
readonly shader: WebGlCoreShader,
4545
readonly shaderProps: Record<string, unknown>,
46+
readonly alpha: number,
4647
readonly clippingRect: Rect | null,
4748
readonly dimensions: Dimensions,
4849
readonly bufferIdx: number,

src/core/renderers/webgl/WebGlCoreRenderer.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
285285
this.newRenderOp(
286286
targetShader,
287287
shaderProps as any,
288+
alpha,
288289
targetDims,
289290
clippingRect,
290291
bufferIdx,
@@ -447,6 +448,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
447448
private newRenderOp(
448449
shader: WebGlCoreShader,
449450
shaderProps: Record<string, unknown>,
451+
alpha: number,
450452
dimensions: Dimensions,
451453
clippingRect: Rect | null,
452454
bufferIdx: number,
@@ -457,6 +459,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
457459
this.quadBufferCollection,
458460
shader,
459461
shaderProps,
462+
alpha,
460463
clippingRect,
461464
dimensions,
462465
bufferIdx,
@@ -491,10 +494,13 @@ export class WebGlCoreRenderer extends CoreRenderer {
491494
if (recursive) {
492495
throw new Error('Unable to add texture to render op');
493496
}
494-
const { shader, shaderProps, dimensions, clippingRect } = curRenderOp;
497+
498+
const { shader, shaderProps, dimensions, clippingRect, alpha } =
499+
curRenderOp;
495500
this.newRenderOp(
496501
shader,
497502
shaderProps,
503+
alpha,
498504
dimensions,
499505
clippingRect,
500506
bufferIdx,

src/core/renderers/webgl/WebGlCoreShader.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,17 @@ export interface DimensionsShaderProp {
5353
$dimensions?: Dimensions;
5454
}
5555

56+
export interface AlphaShaderProp {
57+
/**
58+
* Alpha of the Node being rendered (Auto-set by the renderer)
59+
*
60+
* @remarks
61+
* DO NOT SET THIS. It is set automatically by the renderer.
62+
* Any values set here will be ignored.
63+
*/
64+
$alpha?: number;
65+
}
66+
5667
export abstract class WebGlCoreShader extends CoreShader {
5768
protected boundBufferCollection: BufferCollection | null = null;
5869
protected buffersBound = false;
@@ -260,6 +271,13 @@ export abstract class WebGlCoreShader extends CoreShader {
260271
}
261272
this.setUniform('u_dimensions', [dimensions.width, dimensions.height]);
262273
}
274+
if (hasOwn(props, '$alpha')) {
275+
let alpha = props.$alpha as number | null;
276+
if (!alpha) {
277+
alpha = renderOp.alpha;
278+
}
279+
this.setUniform('u_alpha', alpha);
280+
}
263281
this.bindProps(props);
264282
}
265283
}

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ import type { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
2121
import {
2222
WebGlCoreShader,
2323
type DimensionsShaderProp,
24+
type AlphaShaderProp,
2425
} from '../WebGlCoreShader.js';
2526
import type { UniformInfo } from '../internal/ShaderUtils.js';
26-
import type { WebGlCoreRenderOp } from '../WebGlCoreRenderOp.js';
2727
import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
2828
import { RadiusEffect } from './effects/RadiusEffect.js';
2929
import { BorderEffect } from './effects/BorderEffect.js';
@@ -37,7 +37,9 @@ import { BorderLeftEffect } from './effects/BorderLeftEffect.js';
3737
import { GlitchEffect } from './effects/GlitchEffect.js';
3838
import { FadeOutEffect } from './effects/FadeOutEffect.js';
3939

40-
export interface DynamicShaderProps extends DimensionsShaderProp {
40+
export interface DynamicShaderProps
41+
extends DimensionsShaderProp,
42+
AlphaShaderProp {
4143
effects?: EffectDesc[];
4244
}
4345

@@ -85,6 +87,7 @@ export class DynamicShader extends WebGlCoreShader {
8587
{ name: 'u_pixelRatio', uniform: 'uniform1f' },
8688
{ name: 'u_texture', uniform: 'uniform2fv' },
8789
{ name: 'u_dimensions', uniform: 'uniform2fv' },
90+
{ name: 'u_alpha', uniform: 'uniform1f' },
8891
...shader.uniforms,
8992
],
9093
shaderSources: {
@@ -324,6 +327,7 @@ export class DynamicShader extends WebGlCoreShader {
324327
width: 0,
325328
height: 0,
326329
},
330+
$alpha: 0,
327331
};
328332
}
329333

@@ -389,6 +393,7 @@ export class DynamicShader extends WebGlCoreShader {
389393
390394
uniform vec2 u_resolution;
391395
uniform vec2 u_dimensions;
396+
uniform float u_alpha;
392397
uniform float u_radius;
393398
uniform sampler2D u_texture;
394399
@@ -416,7 +421,7 @@ export class DynamicShader extends WebGlCoreShader {
416421
417422
${drawEffects}
418423
419-
gl_FragColor = shaderColor * v_color.a;
424+
gl_FragColor = shaderColor * u_alpha;
420425
}
421426
`;
422427
}

src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -536,6 +536,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
536536
distanceRange,
537537
debug: debug.sdfShaderDebug,
538538
} satisfies SdfShaderProps,
539+
alpha,
539540
clippingRect,
540541
{ height: textH, width: textW },
541542
0,

0 commit comments

Comments
 (0)