pex-next's Introduction

pex-gl

Create a RenderingContext (2d, webgl, webgl2, bitmaprenderer, webgpu) for use in PEX.

Installation

npm install pex-gl

Usage

import createRenderingContext, { FALLBACKS } from "pex-gl";

// Creates a webgl context filling the window
const context = createRenderingContext();

// Creates a webgl context from an existing canvas and keeps its size
const context = createRenderingContext({ canvas });

// Creates a webgl context on a new canvas with given width and height
const context = createRenderingContext({ width, height });

// Creates a new canvas of type "webgpu"
const context = createRenderingContext({ type: "webgpu" });

// Creates a new canvas of type "webgl" or fallback to experimental-webgl in case it fails
const context = createRenderingContext({ type: "webgl" });

// Disable fallbacks for "webgl2"
FALLBACKS.webgl2 = [];
// Creates a new canvas of type "webgl2" and return null in case it fails
const context = createRenderingContext({ type: "webgl2" });

API

Constants

FALLBACKS: Context fallbacks map

Functions

createRenderingContext([opts]) ⇒ RenderingContext: Creates a rendering context.

Typedefs

Options : object: Options for context creation. All optional.

FALLBACKS

Context fallbacks map

Kind: global constant

createRenderingContext([opts]) ⇒ `RenderingContext`

Creates a rendering context.

Kind: global function

Param	Type	Default
[opts]	`Options`	`{}`

Options : `object`

Options for context creation. All optional.

Kind: global typedef Properties

Name	Type	Default	Description
[width]	`number`	`window.innerWidth`	Request an initial canvas width.
[height]	`number`	`window.innerHeight`	Request an initial canvas height.
[pixelRatio]	`boolean`	`1`	Multiply canvas dimensions with a given ratio.
[fullscreen]	`boolean`	`!opts.width && !opts.height`	Make the canvas fullscreen.
[type]	`"2d"` \| `"bitmaprenderer"` \| `"webgl"` \| `"webgl2"` \| `"webgpu"`	`"webgl"`	A "contextType" for getContext.
[element]	`HTMLElement`	`document.body`	Element to append the canvas to.
[...contextAttributes]	`CanvasRenderingContext2DSettings` \| `WebGLContextAttributes`	`{}`	Attributes to be passed to getContext.

License

MIT. See license file.

pex-next's People

Contributors

Stargazers

Watchers

pex-next's Issues

Installing non common.js module crashes server

E.g. sattelite.js or glsl-fxaa as they can't be browserified.

GLSL 300 Shaders

Nice info here about porting http://www.shaderific.com/blog/2014/3/13/tutorial-how-to-update-a-shader-for-opengl-es-30

General Architecture

Currently considering multiple approaches:

1 - Low level intermediate mode (kind of stack-gl-ish, but also more like Foam)
https://github.com/vorg/pex-next/blob/master/00-core/basic.js

more control but also more boilerplate
less hidden state
no automagic

2 - Game-engine / Vulkan / Metal like command oriented renderer
https://github.com/vorg/pex-next/blob/master/01-draw-command/basic.js

more functional / data driven
potentially easier to optimize (state switching, batching)

3 - Even more OOP? SceneGraph?

Use JavaScript Standard Style

Standard https://github.com/feross/standard

two spaces
no semicolons
automatic formatting and checking (via modules)

Example file: https://github.com/feross/bittorrent-dht/blob/master/client.js#L1

I'm working on ShaderProgram abstractions that right now are not very tied to any particular framework. They are like gl-shader but with a bit more focus on modularity, simplicity, performance and developer UX.

core: https://github.com/mattdesl/glo/blob/dev/src/shader/index.js
extract uniforms/attribs: https://github.com/mattdesl/gl-shader-extract
reflection: https://github.com/mattdesl/glsl-extract-reflect to avoid strings for arrays/structs

var shader = createShader(gl, { vertex: '...', fragment: '...' })

//use program
shader.bind()

//gl.uniform1f
shader.uniforms.lights[0].radius(2)

//gl.getUniform
var radius = shader.uniforms.lights[0].radius()

//set explicit locations, to be used with VAO extension
shader.reload({ vertex: ..., fragment: ..., attributes: [ { name: 'uv', location: 2 } ])