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

@MatthewShotton 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
Member

typo cavnas

Matthew Shotton
@ngokevin
Copy link
Member

@ngokevin 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

</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
Copy link
Member

@ngokevin ngokevin commented Jun 28, 2016

Should be good after changes, thanks!

#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

@MatthewShotton 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 merged commit d469a94 into aframevr:master Jun 29, 2016
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@ngokevin
Copy link
Member

@ngokevin 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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants