Skip to content

mayognaise/aframe-draw-shader

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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'

About

A shader to draw canvas A-Frame VR.

Resources

License

Stars

Watchers

Forks

Packages

No packages published