A shader to render DOM Element for A-Frame VR.
Latest commit 403af08 Jan 14, 2017 @mayognaise committed on GitHub Merge pull request #7 from harshil93/patch-1
Fixed the spelling of available
Failed to load latest commit information.
dist first commit Apr 18, 2016
examples readme Apr 18, 2016
lib/html2canvas first commit Apr 18, 2016
.babelrc first commit Apr 18, 2016
.gitignore first commit Apr 18, 2016
LICENSE first commit Apr 18, 2016
README.md Fixed the spelling of available Dec 3, 2016
example.gif first commit Apr 18, 2016
index.js first commit Apr 18, 2016
package.json no timeout Apr 18, 2016
webpack.config.js first commit Apr 18, 2016


AFrame HTML Shader

A shader to render DOM Element for A-Frame VR. Inspired by @scenevr's htmltexture-component with @niklasvh's html2canvas



The screenshot of DOM Element is by html2canvas. To lean more about the library, please check the documentation


You will often see the render looks different from how the target looks. You kinda have to learn what can be generated. Also it depends on devices. To check what actually rendered by html2canvas, use debug property to select to append the generated canvas. More for limitations, please check here


  • Basic material's properties are supported.
  • The property is pretty much same as flat shader besides repeat. Will update it soon.
  • target is a CSS selector to render to a-entity.
  • width and height is a size to capture. if the target element's size is 640x480 and width|height sets as 200|100 , it will only be cropped with 200px width and 100px height from left top position.
  • fps is framerate to render per a second. if you only render once, set as 0.
  • ratio is for using target's ratio. if you keep null, the generated canvas will scaled for fit to a-entity. if you set as width, the geometry's width stays and height will be changed by the ratio, and conversely.
Property Description Default Value
target CSS selectors (#foo). target DOM to render null
width width to capture null (target's width)
height height to capture null (target's height)
fps fps to render 0
ratio use target's ratio (width height
debug CSS selectors (#foo). debug DOM to append generated canvas from html2canvas null

For refference, please check the following links:

Available options by html2canvas will be ready for properties soon.


The following method is coming soon...

  • render() (This is useful when you set fps as 0)


The following events are coming soon...

  • html-ready when html2canvas set and ready to render
  • html-draw each time it renders


Browser Installation

Install and use by directly including the browser files:

  <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-html-shader/master/dist/aframe-html-shader.min.js"></script>

    <a-entity geometry="primitive:box;" material="shader:gif;src:url(nyancat.gif);color:green;opacity:.8"></a-entity>

NPM Installation

Install via NPM:

npm i -D aframe-html-shader

Then register and use.

import 'aframe'
import 'aframe-html-shader'