Package Exports

@epok.tech/gl-screen-triangle
@epok.tech/gl-screen-triangle/dist/cjs/index.js
@epok.tech/gl-screen-triangle/dist/esm/index.js
@epok.tech/gl-screen-triangle/index.vert.glsl
@epok.tech/gl-screen-triangle/uv-texture.vert.glsl

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@epok.tech/gl-screen-triangle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`gl-screen-triangle`

Convenient definitions for a triangle covering the full screen in WebGL, along with default GLSL shaders - BYORenderer.

No drawing dependencies - for easier compatibility with any renderer which may rely on tracking the WebGL state (e.g: regl).

Check out the demo - click to switch between the Normalised Device Coordinates (NDC) and texture coordinates setup examples.

Installation

Install from npm using:

npm install @epok.tech/gl-screen-triangle

or:

yarn add @epok.tech/gl-screen-triangle

Usage

// Any rendering library, but made with `regl` in mind.
import getRegl from 'regl';

// The position attributes.
import { positions, count } from '@pok.tech/gl-screen-triangle';

// The various shader examples.
import vert from '@pok.tech/gl-screen-triangle/index.vert.glsl';
import vertNDC from '@pok.tech/gl-screen-triangle/uv-ndc.vert.glsl';
import vertST from '@pok.tech/gl-screen-triangle/uv-texture.vert.glsl';

import frag from '@pok.tech/gl-screen-triangle/index.frag.glsl';
import fragUV from '@pok.tech/gl-screen-triangle/uv.frag.glsl';

const regl = getRegl();

const drawScreenTriangle = regl({
    vert: regl.prop('vert'),
    frag: regl.prop('frag'),
    attributes: { position: positions },
    uniforms: {
        // These are only used for the `index.frag.glsl` shader.
        width: regl.context('viewportWidth'),
        height: regl.context('viewportHeight')
    },
    count
});

const clear = { color: [0, 0, 0, 1], depth: 1, stencil: 0 };

const shaders = [
    { name: 'uv-ndc', vert: vertNDC, frag: fragUV },
    { name: 'uv-texture', vert: vertST, frag: fragUV },
    { name: 'index', vert, frag }
];

let shader;

function frame({ tick: t }) {
    regl.poll();
    regl.clear(clear);

    // Switch shader every frame.
    const s = t%shaders.length;

    shader = shaders[s];
    console.log(`Shader ${s}: '${shader.name}'`, shader);
    drawScreenTriangle(shader);
}

const draw = () => regl.draw(frame);

document.addEventListener('click', draw);
draw();

@epok.tech/gl-screen-triangle

Package Exports

Readme

gl-screen-triangle

Installation

Usage

See Also

`gl-screen-triangle`