,
72 | };
73 | }
74 |
--------------------------------------------------------------------------------
/lib/src/hooks/useCompositeEffectPass.ts:
--------------------------------------------------------------------------------
1 | import { createRenderTarget } from "../core/renderTarget";
2 | import { useLifeCycleCallback } from "../internal/useLifeCycleCallback";
3 | import type {
4 | CompositeEffectPass,
5 | EffectPass,
6 | RenderCallback,
7 | RenderTarget,
8 | UpdatedCallback,
9 | } from "../types";
10 |
11 | export function useCompositeEffectPass>>(
12 | passes: P,
13 | ): CompositeEffectPass
{
14 | const effectPasses = Object.values(passes);
15 | const outputPass = effectPasses.at(-1)!;
16 |
17 | const [beforeRenderCallbacks, onBeforeRender] = useLifeCycleCallback>();
18 | const [afterRenderCallbacks, onAfterRender] = useLifeCycleCallback>();
19 | const [onUpdatedCallbacks, onUpdated] = useLifeCycleCallback>();
20 |
21 | function render() {
22 | for (const callback of beforeRenderCallbacks) callback({ uniforms: {} });
23 | for (const pass of effectPasses) pass.render();
24 | for (const callback of afterRenderCallbacks) callback({ uniforms: {} });
25 | }
26 |
27 | function initialize(gl: WebGL2RenderingContext) {
28 | for (const [index, pass] of effectPasses.entries()) {
29 | pass.initialize(gl);
30 |
31 | if (index < effectPasses.length - 1) {
32 | pass.setTarget(createRenderTarget(gl));
33 | }
34 |
35 | pass.onUpdated((newUniforms, oldUniforms) => {
36 | for (const callback of onUpdatedCallbacks) {
37 | callback(newUniforms, oldUniforms);
38 | }
39 | });
40 | }
41 | }
42 |
43 | function setSize(size: { width: number; height: number }) {
44 | for (const pass of effectPasses) {
45 | pass.setSize(size);
46 | }
47 | }
48 |
49 | function setTarget(target: RenderTarget | null) {
50 | outputPass.setTarget(target);
51 | }
52 |
53 | return {
54 | target: outputPass.target,
55 | passes,
56 | onBeforeRender,
57 | onAfterRender,
58 | onUpdated,
59 | initialize,
60 | render,
61 | setSize,
62 | setTarget,
63 | };
64 | }
65 |
--------------------------------------------------------------------------------
/lib/src/hooks/useCompositor.ts:
--------------------------------------------------------------------------------
1 | import { createRenderTarget } from "../core/renderTarget";
2 | import { findUniformName } from "../internal/findName";
3 | import type { CompositeEffectPass, EffectPass, RenderPass } from "../types";
4 |
5 | /**
6 | * The compositor handles the combination of the render pass and the effects:
7 | * - initialize the gl context and create render targets for all effects
8 | * - provide each effect with its previousPass and inputPass to use in uniforms
9 | * - fill the texture uniforms with the previous pass if they are not provided in uniforms
10 | * - detect the first texture uniform of each effect and, if it has no value provided, fill it with the previous pass
11 | * - render all passes in the correct order
12 | */
13 | export function useCompositor(
14 | gl: WebGL2RenderingContext,
15 | renderPass: RenderPass,
16 | effects: Array | CompositeEffectPass>>>,
17 | ) {
18 | if (effects.length > 0 && renderPass.target === null) {
19 | renderPass.setTarget(createRenderTarget(gl));
20 | }
21 |
22 | let previousPass = renderPass;
23 |
24 | for (const [index, effect] of effects.entries()) {
25 | effect.initialize(gl);
26 | effect.setTarget(index === effects.length - 1 ? null : createRenderTarget(gl));
27 |
28 | if (isCompositeEffectPass(effect)) {
29 | const inputPass = previousPass;
30 | for (const effectPass of Object.values(effect.passes)) {
31 | const previousPassRef = previousPass;
32 | setupEffectPass(effectPass, previousPassRef, inputPass);
33 | previousPass = effectPass;
34 | }
35 | } else {
36 | setupEffectPass(effect, previousPass);
37 | previousPass = effect;
38 | }
39 | }
40 |
41 | const allPasses = [renderPass, ...effects];
42 |
43 | function render() {
44 | for (const pass of allPasses) {
45 | pass.render();
46 | }
47 | }
48 |
49 | function setSize(size: { width: number; height: number }) {
50 | for (const pass of allPasses) {
51 | pass.setSize(size);
52 | }
53 | }
54 |
55 | return { render, setSize, allPasses };
56 | }
57 |
58 | function isCompositeEffectPass(
59 | effect: EffectPass | CompositeEffectPass,
60 | ): effect is CompositeEffectPass {
61 | return typeof (effect as CompositeEffectPass).passes === "object";
62 | }
63 |
64 | function setupEffectPass(
65 | effect: EffectPass,
66 | previousPass: EffectPass | RenderPass,
67 | inputPass?: EffectPass | RenderPass,
68 | ) {
69 | // provide the previousPass and inputPass to the uniforms functions
70 | for (const uniformName of Object.keys(effect.uniforms)) {
71 | const uniformValue = effect.uniforms[uniformName];
72 | if (typeof uniformValue === "function") {
73 | effect.uniforms[uniformName] = () => uniformValue({ previousPass, inputPass });
74 | }
75 | }
76 |
77 | // detect the first texture uniform and, if it has no texture provided, fill it with the previous pass
78 | const textureUniformName =
79 | findUniformName(effect.fragment, "image") ||
80 | findUniformName(effect.fragment, "texture") ||
81 | findUniformName(effect.fragment, "pass");
82 |
83 | if (textureUniformName && effect.uniforms[textureUniformName] === undefined) {
84 | effect.uniforms[textureUniformName] = () => previousPass.target?.texture;
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/lib/src/hooks/useEffectPass.ts:
--------------------------------------------------------------------------------
1 | import type { EffectPass, EffectUniforms } from "../types";
2 | import type { QuadPassOptions } from "./useQuadRenderPass";
3 | import { useQuadRenderPass } from "./useQuadRenderPass";
4 |
5 | export function useEffectPass(
6 | options: QuadPassOptions,
7 | ): EffectPass {
8 | return useQuadRenderPass(undefined, options);
9 | }
10 |
--------------------------------------------------------------------------------
/lib/src/hooks/useLoop.ts:
--------------------------------------------------------------------------------
1 | interface LoopData {
2 | /**
3 | * time elapsed in milliseconds since the loop started, excluding pauses.
4 | *
5 | * This timer is paused when the loop is paused, to avoid jumps in animations. If you want to get the time elapsed including pauses, use `elapsedTime` instead.
6 | */
7 | time: number;
8 | /**
9 | * Δt in milliseconds since the previous loop iteration.
10 | */
11 | deltaTime: number;
12 | /**
13 | * time elapsed in milliseconds since the loop started, including pauses.
14 | *
15 | * This timer is NOT paused when the loop is paused, which can cause jumps in animations. If you want to get the time elapsed excluding pauses, use `time` instead.
16 | */
17 | elapsedTime: number;
18 | }
19 |
20 | export interface UseLoopOptions {
21 | /**
22 | * If true, the loop will start immediately.
23 | *
24 | * If false, the loop will start when the `play` method is called.
25 | * @default true
26 | */
27 | immediate?: boolean;
28 | }
29 |
30 | interface LoopObj {
31 | play: () => void;
32 | pause: () => void;
33 | }
34 |
35 | const allLoops: Array = [];
36 |
37 | /**
38 | * A custom hook that creates an animation loop.
39 | * @param callback A function that will be called on every animation frame.
40 | * @param options Options for the loop.
41 | * @returns An object with `play` and `pause` methods to control the animation loop.
42 | */
43 | export function useLoop(
44 | callback: ({ time, deltaTime }: LoopData) => void,
45 | options?: UseLoopOptions,
46 | ) {
47 | let animationFrameHandle: number;
48 | let pauseTime: number | null;
49 | let loopStartTime: number;
50 | let delay = 0;
51 |
52 | const { immediate = true } = options || {};
53 |
54 | function loopFn(previousTime: number, delay = 0) {
55 | const currentTime = performance.now();
56 | const elapsedTime = currentTime - loopStartTime;
57 | const time = elapsedTime - delay;
58 | const deltaTime = currentTime - previousTime;
59 | callback({ time, elapsedTime, deltaTime });
60 |
61 | animationFrameHandle = requestAnimationFrame(() => loopFn(currentTime, delay));
62 | }
63 |
64 | function play() {
65 | const currentTime = performance.now();
66 | if (loopStartTime === undefined) {
67 | loopStartTime = performance.now();
68 | }
69 | delay += currentTime - (pauseTime || currentTime);
70 | cancelAnimationFrame(animationFrameHandle);
71 | animationFrameHandle = requestAnimationFrame(() => loopFn(currentTime, delay));
72 | pauseTime = null;
73 | }
74 |
75 | function pause() {
76 | if (pauseTime == null) {
77 | pauseTime = performance.now();
78 | }
79 | cancelAnimationFrame(animationFrameHandle);
80 | }
81 |
82 | if (immediate) {
83 | play();
84 | }
85 |
86 | const loop = {
87 | /**
88 | * Play the animation loop.
89 | */
90 | play,
91 | /**
92 | * Pause the animation loop.
93 | */
94 | pause,
95 | };
96 |
97 | allLoops.push(loop);
98 |
99 | return loop;
100 | }
101 |
102 | /**
103 | * Play all loops that have been registered with `useLoop`.
104 | */
105 | export function playAllLoops() {
106 | for (const loop of allLoops) {
107 | loop.play();
108 | }
109 | }
110 |
111 | /**
112 | * Pause all loops that have been registered with `useLoop`.
113 | */
114 | export function pauseAllLoops() {
115 | for (const loop of allLoops) {
116 | loop.pause();
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/lib/src/hooks/usePingPongFBO.ts:
--------------------------------------------------------------------------------
1 | import { createRenderTarget } from "../core/renderTarget";
2 | import { createFloatDataTexture, type DataTextureParams } from "../core/texture";
3 | import type { Attribute, RenderPass, Uniforms } from "../types";
4 | import { useQuadRenderPass } from "./useQuadRenderPass";
5 |
6 | export type PingPongFBOOptions> = {
7 | uniforms?: U;
8 | fragment: string;
9 | dataTexture: {
10 | name?: string;
11 | initialData: Float32Array | number[];
12 | };
13 | };
14 |
15 | interface PingPongFBOPass> extends RenderPass {
16 | texture: DataTextureParams | WebGLTexture;
17 | coords: Attribute;
18 | }
19 |
20 | export function usePingPongFBO(
21 | gl: WebGL2RenderingContext,
22 | { uniforms = {} as U, dataTexture, fragment }: PingPongFBOOptions,
23 | ) {
24 | // enable the extension for float textures
25 | gl.getExtension("EXT_color_buffer_float");
26 |
27 | const { initialData, name: dataTextureName = "tData" } = dataTexture;
28 | const elementsCount = initialData.length / 4;
29 |
30 | const initialDataTexture = createFloatDataTexture(initialData);
31 | const { data: _, ...textureParams } = initialDataTexture;
32 |
33 | const coords = new Float32Array(elementsCount * 2);
34 | for (let i = 0; i < elementsCount; i++) {
35 | const u = (i % textureParams.width) / textureParams.width;
36 | const v = Math.floor(i / textureParams.width) / textureParams.height;
37 | coords.set([u, v], i * 2);
38 | }
39 |
40 | const fboPass = useQuadRenderPass(gl, {
41 | fragment,
42 | uniforms: Object.assign(uniforms, {
43 | [dataTextureName]: initialDataTexture,
44 | }),
45 | });
46 |
47 | const pingPongFBOPass: PingPongFBOPass = Object.assign(fboPass, {
48 | texture: initialDataTexture,
49 | coords: {
50 | data: coords,
51 | size: 2,
52 | },
53 | });
54 |
55 | let fboRead = createRenderTarget(gl, textureParams);
56 | let fboWrite = createRenderTarget(gl, textureParams);
57 |
58 | function swap() {
59 | const temp = fboRead;
60 | fboRead = fboWrite;
61 | fboWrite = temp;
62 | }
63 |
64 | const renderFn = pingPongFBOPass.render;
65 |
66 | pingPongFBOPass.render = () => {
67 | renderFn({ target: fboWrite });
68 | pingPongFBOPass.texture = fboWrite.texture;
69 | Object.assign(pingPongFBOPass.uniforms, {
70 | [dataTextureName]: () => fboRead.texture,
71 | });
72 | swap();
73 | };
74 |
75 | return pingPongFBOPass;
76 | }
77 |
--------------------------------------------------------------------------------
/lib/src/hooks/usePointerEvents.ts:
--------------------------------------------------------------------------------
1 | import type { BoundingRect } from "./useBoundingRect";
2 | import { useBoundingRect } from "./useBoundingRect";
3 |
4 | type HandlerArgs = {
5 | pointer: {
6 | x: number;
7 | y: number;
8 | };
9 | canvasRect: BoundingRect;
10 | canvasCenter: {
11 | x: number;
12 | y: number;
13 | };
14 | };
15 |
16 | type PointerEventsHandlers = {
17 | enter?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
18 | move?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
19 | leave?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
20 | down?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
21 | up?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
22 | };
23 |
24 | /**
25 | * Listen to common pointer events and provide additional infos about the canvas
26 | */
27 | export function usePointerEvents(canvas: HTMLCanvasElement, handlers: PointerEventsHandlers) {
28 | const { rect: canvasRect, center: canvasCenter } = useBoundingRect(canvas);
29 |
30 | const activeHandlers = Object.fromEntries(
31 | Object.entries(handlers)
32 | .filter(([, handler]) => typeof handler === "function")
33 | .map(([handlerName, handlerFunction]) => [
34 | handlerName,
35 | (e: PointerEvent) => {
36 | handlerFunction({
37 | pointer: { x: e.clientX, y: e.clientY },
38 | canvasRect,
39 | canvasCenter,
40 | });
41 | },
42 | ]),
43 | );
44 |
45 | function listen() {
46 | for (const [event, handler] of Object.entries(activeHandlers)) {
47 | canvas.addEventListener(`pointer${event as keyof PointerEventsHandlers}`, handler, {
48 | passive: true,
49 | });
50 | }
51 | }
52 |
53 | function stop() {
54 | for (const [event, handler] of Object.entries(activeHandlers)) {
55 | canvas.removeEventListener(`pointer${event as keyof PointerEventsHandlers}`, handler);
56 | }
57 | }
58 |
59 | listen();
60 |
61 | return { stop, listen };
62 | }
63 |
--------------------------------------------------------------------------------
/lib/src/hooks/useQuadRenderPass.ts:
--------------------------------------------------------------------------------
1 | import type { Uniforms } from "../types";
2 | import { useRenderPass, type RenderPassOptions } from "./useRenderPass";
3 | import { findAttributeName, findVaryingName } from "../internal/findName";
4 |
5 | export type QuadPassOptions> = Omit<
6 | RenderPassOptions,
7 | "vertex"
8 | > & { vertex?: string };
9 |
10 | export function useQuadRenderPass(
11 | gl: WebGL2RenderingContext | undefined,
12 | { attributes = {}, fragment, vertex, ...renderPassOptions }: QuadPassOptions,
13 | ) {
14 | const uvVaryingName = findVaryingName(fragment, "uv");
15 |
16 | const vertexShader =
17 | vertex ||
18 | (uvVaryingName
19 | ? quadVertexShaderSource.replace(/\bvUv\b/g, uvVaryingName)
20 | : quadVertexShaderSource);
21 |
22 | const hasPositionAttribute = Object.keys(attributes).some((attributeName) =>
23 | attributeName.toLocaleLowerCase().endsWith("position"),
24 | );
25 |
26 | if (!hasPositionAttribute) {
27 | const positionAttributeName = findAttributeName(vertexShader, "position");
28 | if (positionAttributeName) {
29 | attributes[positionAttributeName] = {
30 | size: 2,
31 | data: quadVertexPositions,
32 | };
33 | }
34 | }
35 |
36 | return useRenderPass(gl, {
37 | ...renderPassOptions,
38 | attributes,
39 | fragment,
40 | vertex: vertexShader,
41 | });
42 | }
43 |
44 | const quadVertexShaderSource = /*glsl*/ `#version 300 es
45 |
46 | in vec2 aPosition;
47 | out vec2 vUv;
48 |
49 | void main() {
50 | gl_Position = vec4(aPosition, 0.0, 1.0);
51 | vUv = (aPosition + 1.0) / 2.0;
52 | }
53 | `;
54 |
55 | /**
56 | * 1 big triangle filling the canvas offers better performance than 2 triangles :
57 | * @see https://github.com/pmndrs/postprocessing?tab=readme-ov-file#performance
58 | * @see https://michaldrobot.com/2014/04/01/gcn-execution-patterns-in-full-screen-passes/
59 | */
60 | const quadVertexPositions = [-1, -1, 3, -1, -1, 3];
61 |
--------------------------------------------------------------------------------
/lib/src/hooks/useRenderPass.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | Attribute,
3 | DrawMode,
4 | RenderCallback,
5 | RenderPass,
6 | RenderTarget,
7 | Uniforms,
8 | } from "../types";
9 | import { createProgram } from "../core/program";
10 | import { setRenderTarget } from "../core/renderTarget";
11 | import { findUniformName } from "../internal/findName";
12 | import { useUniforms } from "../internal/useUniforms";
13 | import { useAttributes } from "../internal/useAttributes";
14 | import { useLifeCycleCallback } from "../internal/useLifeCycleCallback";
15 |
16 | export type RenderPassOptions> = {
17 | target?: RenderTarget | null;
18 | fragment: string;
19 | vertex: string;
20 | attributes?: Record;
21 | uniforms?: U;
22 | transparent?: boolean;
23 | drawMode?: DrawMode;
24 | transformFeedbackVaryings?: string[];
25 | };
26 |
27 | export function useRenderPass(
28 | gl: WebGL2RenderingContext | undefined,
29 | {
30 | target = null,
31 | fragment,
32 | vertex,
33 | attributes = {},
34 | uniforms: userUniforms = {} as U,
35 | transparent = false,
36 | drawMode: userDrawMode,
37 | transformFeedbackVaryings,
38 | }: RenderPassOptions,
39 | ): RenderPass {
40 | /**
41 | * INIT
42 | */
43 |
44 | let _target = target;
45 | let _program: WebGLProgram;
46 | let _gl: WebGL2RenderingContext;
47 |
48 | const {
49 | initialize: initializeUniforms,
50 | onUpdated,
51 | setUniforms,
52 | getUniformsSnapshot,
53 | uniformsProxy,
54 | } = useUniforms(userUniforms);
55 | const {
56 | initialize: initializeAttributes,
57 | getVertexCount,
58 | bindVAO,
59 | hasIndices,
60 | indexType,
61 | } = useAttributes(attributes);
62 |
63 | function initialize(gl: WebGL2RenderingContext) {
64 | _gl = gl;
65 | const program = createProgram(_gl, fragment, vertex, transformFeedbackVaryings);
66 | if (program == null) {
67 | throw new Error("could not initialize the render pass");
68 | }
69 | _program = program;
70 | _gl.useProgram(_program);
71 |
72 | initializeUniforms(_gl, _program);
73 | initializeAttributes(_gl, _program);
74 | }
75 |
76 | if (gl) {
77 | initialize(gl);
78 | }
79 |
80 | /**
81 | * UPDATE
82 | */
83 |
84 | const resolutionUniformName = findUniformName(fragment + vertex, "resolution");
85 |
86 | function setSize(size: { width: number; height: number }) {
87 | if (resolutionUniformName && userUniforms[resolutionUniformName] === undefined) {
88 | (uniformsProxy as Record)[resolutionUniformName] = [size.width, size.height];
89 | }
90 | if (_target != null) {
91 | _target.setSize(size.width, size.height);
92 | }
93 | }
94 |
95 | function setTarget(target: RenderTarget | null) {
96 | _target = target;
97 | }
98 |
99 | /**
100 | * RENDER
101 | */
102 |
103 | const drawMode = userDrawMode || (vertex.includes("gl_PointSize") ? "POINTS" : "TRIANGLES");
104 |
105 | const [beforeRenderCallbacks, onBeforeRender] = useLifeCycleCallback>();
106 | const [afterRenderCallbacks, onAfterRender] = useLifeCycleCallback>();
107 |
108 | function render({ target }: { target?: RenderTarget | null } = {}) {
109 | if (_gl == undefined) {
110 | throw new Error("The render pass must be initialized before calling the render function");
111 | }
112 |
113 | setRenderTarget(_gl, target ?? _target);
114 | _gl.useProgram(_program);
115 |
116 | if (transparent) {
117 | _gl.enable(_gl.BLEND);
118 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA);
119 | } else {
120 | _gl.disable(_gl.BLEND);
121 | }
122 |
123 | bindVAO();
124 | setUniforms();
125 |
126 | for (const callback of beforeRenderCallbacks) {
127 | callback({ uniforms: getUniformsSnapshot() });
128 | }
129 |
130 | if (hasIndices) {
131 | _gl.drawElements(_gl[drawMode], getVertexCount(), indexType, 0);
132 | } else {
133 | _gl.drawArrays(_gl[drawMode], 0, getVertexCount());
134 | }
135 |
136 | for (const callback of afterRenderCallbacks) {
137 | callback({ uniforms: getUniformsSnapshot() });
138 | }
139 | }
140 |
141 | return {
142 | render,
143 | initialize,
144 | setTarget,
145 | get target() {
146 | return _target;
147 | },
148 | setSize,
149 | uniforms: uniformsProxy,
150 | vertex,
151 | fragment,
152 | onUpdated,
153 | onBeforeRender,
154 | onAfterRender,
155 | };
156 | }
157 |
--------------------------------------------------------------------------------
/lib/src/hooks/useResizeObserver.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Listen for changes to the size of an element.
3 | */
4 | export function useResizeObserver(
5 | target: HTMLElement,
6 | callback: (args: {
7 | /**
8 | * size of the observed element in CSS pixels
9 | */
10 | size: { width: number; height: number };
11 | /**
12 | * size of the observed element in device pixels
13 | */
14 | devicePixelSize: { width: number; height: number };
15 | /**
16 | * untouched, native observer entries
17 | */
18 | entries: ResizeObserverEntry[];
19 | }) => void,
20 | ) {
21 | let size: ResizeObserverSize;
22 | let devicePixelSize: ResizeObserverSize;
23 |
24 | const observer = new ResizeObserver((entries) => {
25 | const entry = entries.find((entry) => entry.target === target)!;
26 |
27 | size = entry.contentBoxSize[0];
28 | devicePixelSize = entry.devicePixelContentBoxSize?.[0] || {
29 | blockSize: Math.round(size.blockSize * window.devicePixelRatio),
30 | inlineSize: Math.round(size.inlineSize * window.devicePixelRatio),
31 | };
32 |
33 | // call the callback after the next paint, otherwise there are glitches when resizing a canvas
34 | // with an active render loop
35 | setTimeout(() => {
36 | callback({
37 | size: { width: size.inlineSize, height: size.blockSize },
38 | devicePixelSize: { width: devicePixelSize.inlineSize, height: devicePixelSize.blockSize },
39 | entries,
40 | });
41 | }, 0);
42 | });
43 |
44 | observer.observe(target);
45 |
46 | return {
47 | disconnect: observer.disconnect,
48 | observe: () => {
49 | observer.observe(target);
50 | },
51 | unobserve: () => {
52 | observer.unobserve(target);
53 | },
54 | };
55 | }
56 |
--------------------------------------------------------------------------------
/lib/src/hooks/useTransformFeedback.ts:
--------------------------------------------------------------------------------
1 | import { createAndBindBuffer } from "../core/buffer";
2 | import type { Attribute, RenderPass, Uniforms } from "../types";
3 | import { useRenderPass } from "./useRenderPass";
4 |
5 | interface TransformFeedbackOptions> {
6 | vertex: string;
7 | attributes?: Record;
8 | uniforms?: U;
9 | outputs: Record;
10 | }
11 |
12 | interface TransformFeedbackPass>
13 | extends Omit<
14 | RenderPass,
15 | "initialize" | "target" | "setTarget" | "setSize" | "vertex" | "fragment"
16 | > {
17 | getOutputData: (bufferName: O) => Float32Array;
18 | outputBuffers: Record;
19 | }
20 |
21 | export function useTransformFeedback(
22 | gl: WebGL2RenderingContext,
23 | { vertex, attributes = {}, uniforms = {} as U, outputs }: TransformFeedbackOptions,
24 | ) {
25 | const firstAttribute = Object.values(attributes)[0];
26 | const vertexCount = firstAttribute ? firstAttribute.data!.length / firstAttribute.size : 0;
27 |
28 | const outputBuffers = Object.fromEntries(
29 | Object.entries<{ size: number }>(outputs).map(([name, { size }]) => [
30 | name,
31 | createAndBindBuffer(gl, gl.ARRAY_BUFFER, new Float32Array(vertexCount * size)),
32 | ]),
33 | ) as Record;
34 |
35 | const renderPass = useRenderPass(gl, {
36 | fragment: `void main() { gl_FragColor = vec4(0.0); }`,
37 | vertex,
38 | attributes,
39 | uniforms,
40 | transformFeedbackVaryings: Object.keys(outputs),
41 | drawMode: "POINTS",
42 | });
43 |
44 | const tf = gl.createTransformFeedback();
45 | gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);
46 |
47 | for (const [index, buffer] of Object.values(outputBuffers).entries()) {
48 | gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, index, buffer as WebGLBuffer);
49 | }
50 |
51 | renderPass.onBeforeRender(() => {
52 | gl.enable(gl.RASTERIZER_DISCARD);
53 | gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);
54 | gl.beginTransformFeedback(gl.POINTS);
55 | });
56 |
57 | renderPass.onAfterRender(() => {
58 | gl.endTransformFeedback();
59 | gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
60 | gl.disable(gl.RASTERIZER_DISCARD);
61 | });
62 |
63 | const tfRenderPass: TransformFeedbackPass = Object.assign(renderPass, {
64 | getOutputData: function (bufferName: O) {
65 | const output = new Float32Array(vertexCount * outputs[bufferName].size);
66 | const buffer = outputBuffers[bufferName];
67 | gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
68 | gl.getBufferSubData(gl.ARRAY_BUFFER, 0, output);
69 | return output;
70 | },
71 | outputBuffers,
72 | });
73 |
74 | return tfRenderPass;
75 | }
76 |
--------------------------------------------------------------------------------
/lib/src/hooks/useWebGLContext.ts:
--------------------------------------------------------------------------------
1 | export type WebGLContextOptions = WebGLContextAttributes & {
2 | colorSpace?: PredefinedColorSpace;
3 | };
4 |
5 | export function useWebGLContext(
6 | canvas: T,
7 | options?: WebGLContextOptions,
8 | ) {
9 | const canvasElement: HTMLCanvasElement | OffscreenCanvas | null =
10 | typeof canvas === "string" ? document.querySelector(canvas) : canvas;
11 |
12 | if (canvasElement == null) {
13 | throw new Error("Canvas element not found.");
14 | }
15 |
16 | const gl = canvasElement.getContext("webgl2", options) as WebGL2RenderingContext;
17 | if (!gl) {
18 | throw new Error("No WebGL2 context available.");
19 | }
20 |
21 | if ("drawingBufferColorSpace" in gl && options?.colorSpace != undefined) {
22 | gl.drawingBufferColorSpace = options.colorSpace;
23 | }
24 |
25 | function setSize(width: number, height: number) {
26 | canvasElement!.width = width;
27 | canvasElement!.height = height;
28 | gl.viewport(0, 0, width, height);
29 | }
30 |
31 | return {
32 | canvas: canvasElement as T extends OffscreenCanvas ? OffscreenCanvas : HTMLCanvasElement,
33 | gl,
34 | setSize,
35 | };
36 | }
37 |
--------------------------------------------------------------------------------
/lib/src/index.ts:
--------------------------------------------------------------------------------
1 | export { setAttribute } from "./core/attribute";
2 | export { createAndBindBuffer } from "./core/buffer";
3 | export { createProgram } from "./core/program";
4 | export { createRenderTarget, setRenderTarget } from "./core/renderTarget";
5 | export { createShader } from "./core/shader";
6 | export { fillTexture, loadTexture, loadVideoTexture, createFloatDataTexture } from "./core/texture";
7 |
8 | export { useCompositor } from "./hooks/useCompositor";
9 | export { useEffectPass } from "./hooks/useEffectPass";
10 | export { useCompositeEffectPass } from "./hooks/useCompositeEffectPass";
11 | export { useQuadRenderPass } from "./hooks/useQuadRenderPass";
12 | export { useRenderPass } from "./hooks/useRenderPass";
13 | export { useWebGLCanvas } from "./hooks/useWebGLCanvas";
14 | export { useWebGLContext } from "./hooks/useWebGLContext";
15 | export { useLoop, playAllLoops, pauseAllLoops } from "./hooks/useLoop";
16 | export { useResizeObserver } from "./hooks/useResizeObserver";
17 | export { useBoundingRect } from "./hooks/useBoundingRect";
18 | export { usePointerEvents } from "./hooks/usePointerEvents";
19 | export { usePingPongFBO } from "./hooks/usePingPongFBO";
20 | export { useTransformFeedback } from "./hooks/useTransformFeedback";
21 |
--------------------------------------------------------------------------------
/lib/src/internal/findName.ts:
--------------------------------------------------------------------------------
1 | function findName(source: string | undefined, keyword: string, word: string) {
2 | return source
3 | ?.split("\n")
4 | .find((line) => new RegExp(`^${keyword}.*${word};`, "i").test(line.trim()))
5 | ?.match(/(\w+);/)?.[1];
6 | }
7 |
8 | export function findUniformName(source: string | undefined, word: string) {
9 | return findName(source, "uniform", word);
10 | }
11 |
12 | export function findVaryingName(source: string | undefined, word: string) {
13 | return findName(source, "varying", word) || findName(source, "in", word);
14 | }
15 |
16 | export function findAttributeName(source: string | undefined, word: string) {
17 | return findName(source, "attribute", word) || findName(source, "in", word);
18 | }
19 |
--------------------------------------------------------------------------------
/lib/src/internal/useAttributes.ts:
--------------------------------------------------------------------------------
1 | import { setAttribute } from "../core/attribute";
2 | import type { Attribute } from "../types";
3 |
4 | const UNSIGNED_INT = WebGL2RenderingContext.UNSIGNED_INT;
5 | const UNSIGNED_SHORT = WebGL2RenderingContext.UNSIGNED_SHORT;
6 |
7 | export function useAttributes(attributes: Record) {
8 | let _gl: WebGL2RenderingContext;
9 | let _vao: WebGLVertexArrayObject | null;
10 |
11 | let vertexCount = 0;
12 |
13 | function initialize(gl: WebGL2RenderingContext, program: WebGLProgram) {
14 | _gl = gl;
15 | _vao = _gl.createVertexArray();
16 | _gl.bindVertexArray(_vao);
17 |
18 | for (const [attributeName, attributeObj] of Object.entries(attributes)) {
19 | const attr = setAttribute(_gl, program, attributeName, attributeObj);
20 | vertexCount = Math.max(vertexCount, attr.vertexCount);
21 | }
22 | }
23 |
24 | const hasIndices = attributes.index != undefined;
25 | const indexType = attributes.index?.data.length < Math.pow(2, 16) ? UNSIGNED_SHORT : UNSIGNED_INT;
26 |
27 | function getVertexCount() {
28 | return vertexCount;
29 | }
30 |
31 | function bindVAO() {
32 | _gl.bindVertexArray(_vao);
33 | }
34 |
35 | return {
36 | initialize,
37 | getVertexCount,
38 | bindVAO,
39 | hasIndices,
40 | indexType,
41 | };
42 | }
43 |
--------------------------------------------------------------------------------
/lib/src/internal/useLifeCycleCallback.ts:
--------------------------------------------------------------------------------
1 | export function useLifeCycleCallback void>() {
2 | const callbacks: C[] = [];
3 |
4 | function addCallback(callback: C) {
5 | callbacks.push(callback);
6 | }
7 |
8 | return [callbacks, addCallback] as const;
9 | }
10 |
--------------------------------------------------------------------------------
/lib/src/internal/useUniforms.ts:
--------------------------------------------------------------------------------
1 | import type { DataTextureParams, ImageTextureParams } from "../core/texture";
2 | import { fillTexture } from "../core/texture";
3 | import type { Uniforms, UniformValue, UpdatedCallback } from "../types";
4 | import { useLifeCycleCallback } from "./useLifeCycleCallback";
5 |
6 | export function useUniforms(uniforms: U) {
7 | type UniformName = Extract;
8 |
9 | let textureUnitIndex = 0;
10 | const textureUnits = new Map();
11 |
12 | let _gl: WebGL2RenderingContext;
13 | let _program: WebGLProgram;
14 |
15 | const [onUpdatedCallbacks, onUpdated] = useLifeCycleCallback>();
16 |
17 | const uniformsLocations = new Map();
18 |
19 | function initialize(gl: WebGL2RenderingContext, program: WebGLProgram) {
20 | _gl = gl;
21 | _program = program;
22 |
23 | const uniformsCount = _gl.getProgramParameter(_program, _gl.ACTIVE_UNIFORMS);
24 | for (let i = 0; i < uniformsCount; i++) {
25 | const uniformName = _gl.getActiveUniform(_program, i)?.name as UniformName;
26 | uniformsLocations.set(uniformName, _gl.getUniformLocation(_program, uniformName) ?? -1);
27 | }
28 | }
29 |
30 | const uniformsProxy = new Proxy(
31 | { ...uniforms },
32 | {
33 | set(target, uniform: string, value) {
34 | if (value !== target[uniform]) {
35 | const oldTarget = getSnapshot(target);
36 | target[uniform as keyof U] = value;
37 | const newTarget = getSnapshot(target);
38 | for (const callback of onUpdatedCallbacks) callback(newTarget, oldTarget);
39 | }
40 | return true;
41 | },
42 | },
43 | );
44 |
45 | function setUniforms() {
46 | for (const [uniformName, uniformValue] of Object.entries(uniformsProxy)) {
47 | setUniform(
48 | uniformName as UniformName,
49 | (typeof uniformValue === "function" ? uniformValue() : uniformValue) as U[UniformName],
50 | );
51 | }
52 | }
53 |
54 | function setUniform(name: Uname, value: U[Uname] & UniformValue) {
55 | const uniformLocation = uniformsLocations.get(name) || -1;
56 | if (uniformLocation === -1) return -1;
57 |
58 | if (typeof value === "number") return _gl.uniform1f(uniformLocation, value);
59 |
60 | if (value instanceof WebGLTexture) {
61 | if (!textureUnits.has(name)) {
62 | textureUnits.set(name, { index: textureUnitIndex++ });
63 | }
64 | const { index } = textureUnits.get(name)!;
65 | _gl.activeTexture(_gl.TEXTURE0 + index);
66 | _gl.bindTexture(_gl.TEXTURE_2D, value);
67 |
68 | return _gl.uniform1i(uniformLocation, index);
69 | }
70 |
71 | if (Array.isArray(value)) {
72 | switch (value.length) {
73 | case 2: {
74 | return _gl.uniform2fv(uniformLocation, value);
75 | }
76 | case 3: {
77 | return _gl.uniform3fv(uniformLocation, value);
78 | }
79 | case 4: {
80 | return _gl.uniform4fv(uniformLocation, value);
81 | }
82 | }
83 | }
84 |
85 | if ((value as ImageTextureParams).src || (value as DataTextureParams).data) {
86 | if (!textureUnits.has(name)) {
87 | const texture = _gl.createTexture();
88 | textureUnits.set(name, { index: textureUnitIndex++, texture });
89 | }
90 | const { index, texture } = textureUnits.get(name)!;
91 | _gl.activeTexture(_gl.TEXTURE0 + index);
92 | fillTexture(_gl, texture!, value);
93 |
94 | return _gl.uniform1i(uniformLocation, index);
95 | }
96 | }
97 |
98 | function getUniformsSnapshot() {
99 | return getSnapshot({ ...uniformsProxy });
100 | }
101 |
102 | return {
103 | initialize,
104 | uniformsProxy,
105 | onUpdated,
106 | setUniforms,
107 | getUniformsSnapshot,
108 | };
109 | }
110 |
111 | function getSnapshot>(object: Obj): Obj {
112 | return Object.freeze({ ...object });
113 | }
114 |
--------------------------------------------------------------------------------
/lib/src/types.ts:
--------------------------------------------------------------------------------
1 | import type { TextureParams } from "./core/texture";
2 |
3 | export type VectorUniform =
4 | | [number, number]
5 | | [number, number, number]
6 | | [number, number, number, number];
7 | export type TextureUniform = TextureParams | WebGLTexture;
8 | export type UniformValue = number | VectorUniform | TextureUniform;
9 | export type Uniforms = Record;
10 | export type EffectUniforms = Record<
11 | string,
12 | | UniformValue
13 | | ((passes: {
14 | /**
15 | * - in an effect with only one pass, the inputPass is the pass rendered before this effect
16 | * - in an effect with multiple passes, the inputPass is the pass rendered before the first pass of the effect
17 | */
18 | inputPass: RenderPass;
19 | /**
20 | * pass rendered immediately before this effect
21 | */
22 | previousPass: RenderPass;
23 | }) => UniformValue)
24 | >;
25 |
26 | export type TypedArray = ArrayBufferView & { length: number };
27 |
28 | export interface Attribute {
29 | size: number;
30 | data: TypedArray | number[];
31 | type?: GLenum;
32 | normalize?: boolean;
33 | stride?: number;
34 | offset?: number;
35 | }
36 |
37 | export interface RenderTarget {
38 | framebuffer: WebGLFramebuffer;
39 | texture: WebGLTexture;
40 | width: number;
41 | height: number;
42 | setSize: (width: number, height: number) => void;
43 | }
44 |
45 | export interface RenderPass> extends Resizable {
46 | render: (opts?: { target?: RenderTarget | null }) => void;
47 | target: RenderTarget | null;
48 | setTarget: (target: RenderTarget | null) => void;
49 | uniforms: U;
50 | vertex: string;
51 | fragment: string;
52 | onUpdated: (callback: UpdatedCallback) => void;
53 | onBeforeRender: (callback: RenderCallback) => void;
54 | onAfterRender: (callback: RenderCallback) => void;
55 | initialize: (gl: WebGL2RenderingContext) => void;
56 | }
57 |
58 | export type EffectPass> = RenderPass;
59 |
60 | export interface CompositeEffectPass<
61 | P extends Record> = Record>,
62 | > extends Omit {
63 | passes: P;
64 | }
65 |
66 | export type DrawMode =
67 | | "POINTS"
68 | | "LINES"
69 | | "LINE_STRIP"
70 | | "LINE_LOOP"
71 | | "TRIANGLES"
72 | | "TRIANGLE_STRIP"
73 | | "TRIANGLE_FAN";
74 |
75 | export interface Resizable {
76 | setSize: ({ width, height }: { width: number; height: number }) => void;
77 | }
78 |
79 | export type RenderCallback> = (
80 | args: Readonly<{ uniforms: U }>,
81 | ) => void;
82 |
83 | export type UpdatedCallback> = (
84 | uniforms: Readonly,
85 | oldUniforms: Readonly,
86 | ) => void;
87 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/blob/blob-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:1718bd89bb5366318801421e2f2bdf3b1a6d10bdfb5a595ef66586ce5a02e499
3 | size 7876
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/blob/blob-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:4c8200f701f58879fb401febc03c46a8184c86d9007e82aff96813abc3039eb3
3 | size 9921
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/blob/blob-firefox.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:960a1c426819a9e8ab13c912c801e2b045a74a78d57a616ac99c9e2e47e6241b
3 | size 18730
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/blob/blob-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:62a7a78aa613467772b636968c7f398e3ad2059e70d2209f9fd170501ee2c389
3 | size 8738
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/blob/blob-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:144cd5c581adad75de170a0f5a8103faa010c7f6ad85999d6d12f6fd24536cc1
3 | size 10334
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/bloom/bloom-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:679112107847463eaad04c98aa6d74a6f8d74ae5cd51f071f02fdd0380a1424a
3 | size 35702
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/bloom/bloom-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:d8e6cba623bc0fbeda8475554b0f388f379b2227aa2410db22da8881be382120
3 | size 51842
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/bloom/bloom-firefox.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:4f938184ed90d8e6c86e8b59af74c1200955c181a4819fe06f8b18555337560a
3 | size 79547
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/bloom/bloom-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:01de390e08ea95a9586ab5d8b60d5838ab99f6e0422e18607d8a14e212923bdf
3 | size 35909
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/bloom/bloom-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:4a94ee99d0fa423c52d0d5d619f22998337563d8dfedf4e908d985807130c099
3 | size 48205
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/boids-static-/boids-static--android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/boids-static-/boids-static--android.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/boids-static-/boids-static--chromium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/boids-static-/boids-static--chromium.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/boids-static-/boids-static--firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/boids-static-/boids-static--firefox.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/boids-static-/boids-static--iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/boids-static-/boids-static--iphone.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/boids-static-/boids-static--safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/boids-static-/boids-static--safari.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/circle/circle-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:fbd8b13b82b8768bfff6109f19431a8d76b1fd1d859036cf439cf81aed1182d0
3 | size 6833
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/circle/circle-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:a78f975704b7a31cc49ec71e62785edc523e24d7cd73a0d9d642550e18282f0f
3 | size 8141
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/circle/circle-firefox.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:e5e8c4d57b815346bea099a5539d0e84d27db48a7789edfbb3f5fac4c8d47183
3 | size 15591
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/circle/circle-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:ad59d0bb27f4a5464ede02aade393a6e7829b76955b7c7db127b8f5c0437ed73
3 | size 7352
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/circle/circle-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:2afcdd8d9bbf45c114455753f9a7b2efc3261098a832bc7341af3c5f333fb086
3 | size 9193
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/gradient/gradient-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:5250e998b91da5e71da2b5e139b9a8bdb71e4246c2a9f2277aa29e0796125350
3 | size 4492
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/gradient/gradient-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:e2a023da734bdd3596db4c54abf697df26726fd37f27feb6d9cd434daf16b235
3 | size 5743
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/gradient/gradient-firefox.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:a136c6ef974f85e45999e183a1dc6fe039d60fd5689261e6cd2eeae670bec98e
3 | size 17289
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/gradient/gradient-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:809bc11f887a60ed70d15e8f0d6d27abb8995d44d6b5771f82459b4dcba1e699
3 | size 4570
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/gradient/gradient-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:12c01988b02ea432b1e02b211262f26e1e0fec8cf9d3b6ea51ec78629ac9f02b
3 | size 5756
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/indices/indices-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/indices/indices-android.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/indices/indices-chromium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/indices/indices-chromium.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/indices/indices-firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/indices/indices-firefox.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/indices/indices-iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/indices/indices-iphone.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/indices/indices-safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/indices/indices-safari.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/maths/maths-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/maths/maths-android.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/maths/maths-chromium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/maths/maths-chromium.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/maths/maths-firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/maths/maths-firefox.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/maths/maths-iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/maths/maths-iphone.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/maths/maths-safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/maths/maths-safari.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/mipmap/mipmap-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/mipmap/mipmap-android.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/mipmap/mipmap-chromium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/mipmap/mipmap-chromium.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/mipmap/mipmap-firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/mipmap/mipmap-firefox.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/mipmap/mipmap-iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/mipmap/mipmap-iphone.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/mipmap/mipmap-safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/mipmap/mipmap-safari.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--android.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--chromium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--chromium.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--firefox.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--iphone.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/particles---FBO-static-/particles---FBO-static--safari.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles/particles-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:6d69bc8b1354d5b71295fd2162a8c10fc66fce13a33ba497de062b00e95eb116
3 | size 23710
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles/particles-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:a614822e745fd8bac6b9b2c1b73368caf5c78abf97346bc231ef8f3680fe86cb
3 | size 12379
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles/particles-firefox.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:7039dfe3a8316b2c226b9e9feb842926ab0b50b8a7b92044c17f5c8a2809b1e7
3 | size 22250
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles/particles-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:86a52bcbf440fdddad0ebb7e10410f651fb746897ee4c5e6988e041c6c22b458
3 | size 27024
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/particles/particles-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:4744f35f3943b3876175c809292aa5b1e6b1f2236f93f7409b850dccfb156de7
3 | size 25189
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/play-pause-controls---global/play-pause-controls---global-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:0c32b474055878567a9f14a82452d629eb6e5d1a372b66deb1099145700a9730
3 | size 6002
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/play-pause-controls---global/play-pause-controls---global-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:d53d491042f89add1d8e1094bfaafca8e0f0206ad44acc3019c440a674994edb
3 | size 7148
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/play-pause-controls---global/play-pause-controls---global-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:840c571db418c139fa6631bc56f93a23b9f9ac6ba2b0b32fb6d3ebeadcb31df4
3 | size 6252
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/play-pause-controls---global/play-pause-controls---global-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:afe6863339fa94e24e93e629783eaa6a1fcfb415abe123f95923411d9aa54a3a
3 | size 7341
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/play-pause-controls---local/play-pause-controls---local-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:85b9412a9b8384407626cdaadd2cb5505227e8690253051208b14eb15e0acbcd
3 | size 6519
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/play-pause-controls---local/play-pause-controls---local-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:aaa3430659dc8fe14b9e7798b89d3c6f8af4095ccf73dfa0565efac175a78f59
3 | size 7279
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/play-pause-controls---local/play-pause-controls---local-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:c77943effd956bcb5fb5c2f761d98a464c631a77e982fb2b7267342cfca8feae
3 | size 7041
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/play-pause-controls---local/play-pause-controls---local-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:08efb170be1ef92ec3bc28337db6033f82400acebb712997abf4e180a36aa414
3 | size 8420
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer-move/pointer-move-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:c23be07638293c1eb500401c5f50be5c7d22db46a30ada43685da0aeeffdf956
3 | size 4359
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer-move/pointer-move-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:f48975190da32d03955ce467aae6a7ce3dd560cedcd6e850454595f337f8f269
3 | size 4513
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer-move/pointer-move-firefox.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:c32674b0dc38df49cb396067bfb2372949ecf4bc7790f0855d1965a11edd2612
3 | size 11659
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer-move/pointer-move-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:90044781673d171dfdd08355f327d67d8fd15954d437a4d1402b5edbf7e504d5
3 | size 4439
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer-move/pointer-move-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:7ffe81c345d248d297fc4bc32224438c53c89058fb113178748535375c08c507
3 | size 4896
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer/pointer-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:77b44fd8a6f3dc5b0ad631159050b294aaa52b604bfb4e613e7275ae0ac30934
3 | size 4299
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer/pointer-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:bb3f239fe8bc4439cffc710e7b7d4a1a724c6804a60748f46d9a7d49fc1c431b
3 | size 4395
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer/pointer-firefox.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:05af1258fabeb0c7e121bddd631974fc902ac506ebed9f88413a9002c8af8cf7
3 | size 11423
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer/pointer-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:3f45824a34e9c34ba0b23b02e24adb188c002768a0708189156ed2a95cf97a95
3 | size 4519
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/pointer/pointer-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:47b60827234ce6f3c296bbad68c006256515898ba91f95a42541e3d30c4f41be
3 | size 4969
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/scissor/scissor-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/scissor/scissor-android.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/scissor/scissor-chromium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/scissor/scissor-chromium.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/scissor/scissor-firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/scissor/scissor-firefox.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/scissor/scissor-iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/scissor/scissor-iphone.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/scissor/scissor-safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/scissor/scissor-safari.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/sepia/sepia-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/sepia/sepia-android.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/sepia/sepia-chromium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/sepia/sepia-chromium.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/sepia/sepia-firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/sepia/sepia-firefox.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/sepia/sepia-iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/sepia/sepia-iphone.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/sepia/sepia-safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/sepia/sepia-safari.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/texture/texture-android.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:8aff5daac3f90a3fba40b70c472f524c971b5f0196c6567ed36d1bc0b0496eea
3 | size 59379
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/texture/texture-chromium.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:bf873175091336c30484a6f8f5f4ffb5dadd5a78462a8ddb761d03e8ff0440c7
3 | size 85503
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/texture/texture-firefox.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:d1290d089ee80a4249e75989a68eef1c6ec20e186f343d58aaed0a8e6e869982
3 | size 119211
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/texture/texture-iphone.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:d72ac3d324d8644f4a265b6ecda19e67034feaea3c8e3b076ae19376f16c8120
3 | size 59806
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/texture/texture-safari.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:b3737ba1b3b9b0d2840249a90af71e1ed10b6772e62f29b8137c853029e37682
3 | size 85065
4 |
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/video/video-android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/video/video-android.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/video/video-chromium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/video/video-chromium.png
--------------------------------------------------------------------------------
/lib/tests/__screenshots__/video/video-firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsulpis/usegl/5fbd838d22fde03e82af59653c8d242b7d2f3082/lib/tests/__screenshots__/video/video-firefox.png
--------------------------------------------------------------------------------
/lib/tests/screenshots.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from "@playwright/test";
2 |
3 | import { routes } from "../playground/src/components/routes";
4 |
5 | const ignoreRoutes = new Set(["pause", "dataTexture", "particles - FBO", "boids"]);
6 |
7 | const routesToTest = routes.filter(({ route }) => !ignoreRoutes.has(route));
8 |
9 | const expectedRendersByDemo = {
10 | scissor: "2",
11 | video: "2",
12 | "particles - FBO (static)": "3",
13 | "boids (static)": "4",
14 | mipmap: /[1-3]/,
15 | texture: /1|2/,
16 | sepia: /1|2/,
17 | };
18 |
19 | for (const { section, route } of routesToTest) {
20 | test(route, async ({ page, baseURL }) => {
21 | await page.goto(`${baseURL}/${section}/${route}`);
22 |
23 | await expect(page.locator("#renders strong")).toHaveText(expectedRendersByDemo[route] || "1");
24 | await expect(page.locator("main")).toHaveScreenshot();
25 | });
26 | }
27 |
28 | test("pointer move", async ({ page, viewport, baseURL }) => {
29 | await page.goto(`${baseURL}/pointer/pointer`);
30 |
31 | await expect(page.getByText("Renders: 1")).toBeVisible();
32 |
33 | await page.mouse.move((viewport?.width || 0) * 0.5, (viewport?.height || 0) * 0.45);
34 |
35 | await expect(page.getByText("Renders: 2")).toBeVisible();
36 |
37 | await page.mouse.down();
38 |
39 | await page.waitForTimeout(100);
40 |
41 | await expect(page.locator("main")).toHaveScreenshot();
42 | });
43 |
44 | test("play / pause controls - local", async ({ page, baseURL }) => {
45 | await page.goto(`${baseURL}/core/pause`);
46 |
47 | await expect(page.getByText("Renders: 1")).toBeVisible();
48 |
49 | await page.evaluate(() => {
50 | return new Promise((resolve) => {
51 | const playPauseBtn = document.querySelector(
52 | ".controls.local button:nth-of-type(1)",
53 | )!;
54 |
55 | playPauseBtn.click();
56 |
57 | requestAnimationFrame(() => {
58 | requestAnimationFrame(() => {
59 | requestAnimationFrame(() => {
60 | requestAnimationFrame(() => {
61 | playPauseBtn.click();
62 | resolve();
63 | });
64 | });
65 | });
66 | });
67 | });
68 | });
69 |
70 | await expect(page.getByText("Renders: 5")).toBeVisible();
71 |
72 | await expect(page.locator("main")).toHaveScreenshot();
73 | });
74 |
75 | test("play / pause controls - global", async ({ page, baseURL }) => {
76 | await page.goto(`${baseURL}/core/pause`);
77 |
78 | await expect(page.getByText("Renders: 1")).toBeVisible();
79 |
80 | await page.evaluate(() => {
81 | return new Promise((resolve) => {
82 | const playPauseBtn = document.querySelector(".controls.global button")!;
83 |
84 | playPauseBtn.click();
85 |
86 | requestAnimationFrame(() => {
87 | requestAnimationFrame(() => {
88 | requestAnimationFrame(() => {
89 | requestAnimationFrame(() => {
90 | playPauseBtn.click();
91 | resolve();
92 | });
93 | });
94 | });
95 | });
96 | });
97 | });
98 |
99 | await expect(page.getByText("Renders: 5")).toBeVisible();
100 |
101 | await expect(page.locator("main")).toHaveScreenshot();
102 | });
103 |
--------------------------------------------------------------------------------
/lib/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "module": "ESNext",
5 | "moduleResolution": "Bundler",
6 | "esModuleInterop": true,
7 | "isolatedModules": true,
8 | "strict": true,
9 | "skipLibCheck": true
10 | },
11 | "include": ["src", "playwright.config.ts"]
12 | }
13 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - docs
3 | - lib
4 |
--------------------------------------------------------------------------------