Skip to content
A shader to draw canvas A-Frame VR.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
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'
You can’t perform that action at this time.