Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added ability to create textures from HTML5 canvases #1567

Merged
merged 3 commits into from Jun 29, 2016

Conversation

MatthewShotton
Copy link
Contributor

Description:
Currently it seems only images and videos can be used as texture sources for entities.

This PR adds the ability to use a canvas as the texture source for an entity. It includes a less-than-graceful hack so that THREE.js treats the canvas as a video and handles the continuous update of it.

Changes proposed:

  • adds loadCanvas to systems/material.js
  • adds isCanvas to validateSrc in /utils/src-loader.js
  • adds an example.

Kind regards,
Matt


// src is a valid selector but doesn't match with a <img> or <video> element.
warn('"%s" does not point to a valid <img> or <video> element', src);
// src is a valid selector but doesn't match with a <img>, <video>, or <cavnas> element.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo cavnas

@ngokevin
Copy link
Member

Pretty awesome! People have been registering custom materials, but this seems like a much simpler API.

* @param {function} cb - Callback to pass texture to.
*/
loadCanvas: function (src, data, cb) {
// duck-punch a readyState and a HAVE_CURRENT_DATA attiribute onto the canvas element so THREE.videoTexture will work
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hack readyState and HAVE_CURRENT_DATA on canvas to work with THREE.VideoTexture

</head>
<body>
<script type="text/javascript">
window.onload = function(){
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra credit to use the component system to hook into A-Frame's requestAnimationFrame and for reusability.

AFRAME.registerComponent('update-canvas', {
  schema: {default: ''},

  init: function () {
    this.canvas = document.getElementById(this.data);
    this.ctx = canvas.getContext('2d');
  },

  tick: function (t) {
    var hue = t / 10;
    // ...
  }
});
<a-scene update-canvas="helloworld-canvas">
</a-scene>

@ngokevin
Copy link
Member

Should be good after changes, thanks!

aframevr#1567

* Added sensible comment to loadCanvas in src/systems/material.js
* Removed unnecessary return in src/systems/material.js
* Corrected naming of example in examples/test/canvas/index.html
* Fixed up link to example in examples/index.html
* Uses the component system to hook into A-Frame's requestAnimationFrame in example
@MatthewShotton
Copy link
Contributor Author

Hey up, I've made those changes. Would you prefer I collapse all changes to a single commit and force-push or is multiple commits OK? (BTW, cheers for the ace library!)

@ngokevin ngokevin merged commit d469a94 into aframevr:master Jun 29, 2016
@ngokevin
Copy link
Member

Thanks! I can squash-merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants