Added ability to create textures from HTML5 canvases #1567
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
src/utils/src-loader.js
Outdated
|
|
||
| // 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. |
Member
|
Pretty awesome! People have been registering custom materials, but this seems like a much simpler API. |
src/systems/material.js
Outdated
| * @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 |
Member
There was a problem hiding this comment.
Hack readyState and HAVE_CURRENT_DATA on canvas to work with THREE.VideoTexture
examples/test/canvas/index.html
Outdated
| </head> | ||
| <body> | ||
| <script type="text/javascript"> | ||
| window.onload = function(){ |
Member
There was a problem hiding this comment.
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>
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
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!) |
Member
|
Thanks! I can squash-merge. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
Kind regards,
Matt