element wrapper to manage multiple regl contexts
This module uses nanocomponent to provide a vanilla DOM wrapper on top of a modified version of multi-regl, which shares a single webgl element among all components.
var app = require('choo')()
var html = require('choo/html')
var rcom = require('regl-component')(require('regl'))
var anormals = require('angle-normals')
var chart = require('conway-hart')
var demos = [
fromMesh(rcom.create(), chart('mI')),
fromMesh(rcom.create(), chart('jT')),
fromMesh(rcom.create(), chart('djmeD')),
fromMesh(rcom.create(), chart('pO'))
]
app.route('/', function (state, emit) {
return html`<body>
${rcom.render()}
${demos.map(function (demo) {
return html`<div>
${demo.render({ width: 400, height: 150 })}
<hr>
</div>`
})}
</body>`
})
app.mount('body')
function fromMesh (rc, mesh) {
var draw = rc.regl({
frag: `
precision highp float;
varying vec3 vnorm;
void main () {
gl_FragColor = vec4(vnorm*0.5+0.5,1);
}
`,
vert: `
precision highp float;
attribute vec3 position, normal;
varying vec3 vnorm;
uniform float aspect;
void main () {
vnorm = normal;
gl_Position = vec4(position.xy*vec2(1,aspect)*0.3,position.z*0.1+0.1,1);
}
`,
uniforms: {
aspect: function (context) {
return context.viewportWidth / context.viewportHeight
}
},
attributes: {
position: mesh.positions,
normal: anormals(mesh.cells, mesh.positions)
},
elements: mesh.cells
})
rc.regl.clear({ color: [0,0,0,1], depth: true })
draw()
return rc
}
var reglComponent = require('regl-component')
Create an rcom
component given a createRegl
constructor function.
Any opts
are passed to the regl constructor.
Generate the root element rootElem
that takes care of the full-screen canvas
overlay.
Create a component wrapper rc
.
Return a cached element elem
given:
props.width
- element widthprops.height
- element height
Use this regl instance to control all the draw calls associated with this sub-context.
npm install regl-component
BSD