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

Projects
None yet
3 participants
@MatthewShotton
Copy link
Contributor

MatthewShotton commented Jun 20, 2016

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.

This comment has been minimized.

@dmarcos

dmarcos Jun 20, 2016

Collaborator

typo cavnas

@ngokevin

This comment has been minimized.

Copy link
Member

ngokevin commented Jun 28, 2016

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

This comment has been minimized.

@ngokevin

ngokevin Jun 28, 2016

Member

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

src.readyState = 2;
src.HAVE_CURRENT_DATA = 2;
this.loadVideo(src, data, cb);
return;

This comment has been minimized.

@ngokevin

ngokevin Jun 28, 2016

Member

unnecessary return

<head>
<meta charset="utf-8">
<title>Video</title>
<meta name="description" content="Video - A-Frame">

This comment has been minimized.

@ngokevin

ngokevin Jun 28, 2016

Member

Title Canvas Texture and folder canvas-texture

@ngokevin ngokevin added needs changes and removed needs review labels Jun 28, 2016

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

This comment has been minimized.

@ngokevin

ngokevin Jun 28, 2016

Member

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

This comment has been minimized.

Copy link
Member

ngokevin commented Jun 28, 2016

Should be good after changes, thanks!

fixed up ability to create textures from canvases as per comments in PR
#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

This comment has been minimized.

Copy link
Contributor Author

MatthewShotton commented Jun 29, 2016

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 added needs review and removed needs changes labels Jun 29, 2016

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

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@ngokevin

This comment has been minimized.

Copy link
Member

ngokevin commented Jun 29, 2016

Thanks! I can squash-merge.

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