regl-project/multi-regl

Name: multi-regl

Owner: regl-project

Description: Multiplex a regl instance across different DOM elements

Created: 2016-08-26 23:26:05.0

Updated: 2018-04-21 20:31:26.0

Pushed: 2016-10-10 22:30:06.0

Homepage: https://regl-project.github.io/multi-regl/index.html

Size: 85

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

multi-regl

Lets you use a single regl context to render to multiple windows within a single page.

Demo.

Example

t multiREGL = require('multi-regl')

t div1 = document.createElement('div')
.style.width = '500px'
.style.height = '500px'
ment.body.appendChild(div1)

t regl1 = multiREGL(div1)

1.frame(() => {
gl1.clear({
color: [1, 0, 0, 1],
depth: 1



t div2 = document.createElement('div')
.style.width = '500px'
.style.height = '500px'
ment.body.appendChild(div2)

t regl2 = multiREGL(div2)

2.frame(() => {
gl2.clear({
color: [0, 0, 1, 1],
depth: 1

API

Constructor

var multiREGL = require('multi-regl')([options])

Creates a multiplexed regl context across several div elements. options takes the same inputs as regl's constructor. It returns a procedure

Properties

multiREGL.regl

A reference to the underlying regl object.

Methods

var regl = multiREGL(containerElement)

Calling multiREGL with a DOM element returns a wrapped regl instance where regl.frame is overloaded to draw within the element.

Calling .destroy() on this context removes the multiregl instance.

How this works

multi-regl creates a full screen canvas over the window which is fixed to the screen resolution. Each frame all the visible

License

(c) 2016 Mikola Lysenko. MIT License