A shader to draw canvas A-Frame VR.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
examples
.babelrc
.gitignore
LICENSE
README.md
example.gif
index.js
package.json
webpack.config.js

README.md

AFrame Draw Shader

A shader to draw canvas A-Frame VR. Inspired by @maxkrieger's draw component.

DEMO

example

Properties

  • Basic material's properties are supported.
  • The property is pretty much same as flat shader besides repeat.
Property Description Default Value
width canvas width 256
height canvas height 256
fps fps to render 60

For refference, please check the following links:

Events

  • draw-render is 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

})

Usage

Browser Installation

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>

NPM Installation

Install via NPM:

npm i -D aframe-draw-shader

Then register and use.

import 'aframe'
import 'aframe-draw-shader'