A shader to draw canvas A-Frame VR. Inspired by @maxkrieger's draw component.
- Basic
material's properties are supported. - The property is pretty much same as
flatshader besidesrepeat.
| Property | Description | Default Value |
|---|---|---|
| width | canvas width | 256 |
| height | canvas height | 256 |
| fps | fps to render | 60 |
For refference, please check the following links:
draw-renderis called every framerate (fps).
event.detail includes canvas's ctx (context) and texture.
texture.needsUpdate = true won't be called in the shader.
Please do texture.needsUpdate = true by yourself.
this.el.addEventListener('draw-render', function(event) {
// draw!
var ctx = event.detail.ctx
var texture = event.detail.texture
// drawing...
ctx.rect(20,20,150,100)
ctx.stroke()
// texture upate
texture.needsUpdate = true
})Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-draw-shader/master/dist/aframe-draw-shader.min.js"></script>
<script>
/**
* noise component example
*/
AFRAME.registerComponent('noise', {
dependencies: [ ],
schema: { },
init () {
this.el.addEventListener('draw-render', this.render.bind(this))
},
update () { },
remove () { },
pause () { },
play () { },
render (e) {
var ctx = e.detail.ctx,
texture = e.detail.texture,
w = ctx.canvas.width,
h = ctx.canvas.height,
idata = ctx.createImageData(w, h),
buffer32 = new Uint32Array(idata.data.buffer),
len = buffer32.length,
i = 0
for(; i < len;)
buffer32[i++] = ((255 * Math.random())|0) << 24
ctx.putImageData(idata, 0, 0)
// texture upate
texture.needsUpdate = true
}
})
</script>
</head>
<body>
<a-scene>
<a-entity geometry="primitive:box;" material="shader:draw;" noise=""></a-entity>
</a-scene>
</body>Install via NPM:
npm i -D aframe-draw-shaderThen register and use.
import 'aframe'
import 'aframe-draw-shader'