❤
npm
Sign UpSign In

aframe-draw-shader

0.1.3 • Public • Published

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'

Readme

Keywords

Package Sidebar

Install

npm i aframe-draw-shader

Repository

github.com/mayognaise/aframe-draw-shader

Homepage

github.com/mayognaise/aframe-draw-shader#readme

Weekly Downloads

0

Version

0.1.3

License

MIT

Last publish

Collaborators

  • mayognaise
Try on RunKit
Report malware