We Keep Coding

Does THREE have a utility for loading canvases in an async manner?

I have a canvas with some pictures and I would like to load it onto a texture much like an image with ImageUtils. As you know canvas has no 'onfinished' rendering callback so I am at the mercy of THREE here. I have come across this but this seems to be tightly coupled with AJAX.

You can read the image from the canvas as a data url:
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
After you execute drawImage on the canvas, the image data is already going to be inside there.
These data urls then can be used as textures in Three.js.
var texture = THREE.ImageUtils.loadTexture(dataURL);
Update
You could also try this for debugging:
var texture = THREE.ImageUtils.loadTexture(dataURL, undefined, function(texture){
// Handler for onLoad, this returns the img
console.log(texture);
},
function(event){
// Handler for onError, it returns the error event
console.log(event);
});

How to toggle preserveDrawingBuffer in three.js?

Basically, I want the setup where I could go to preserveDrawingBuffer=true, render the scene once, grab the screenshot, and go back. However, this poses two problems:
there is no method in renderer to dispose all the buffers,
canvas goes black if I do
renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});
How do I do this properly?
EDIT: I did not find the way to toggle this, so I had to clone scene and create second renderer instead to make the screenshot. See https://github.com/mrdoob/three.js/issues/189

You don't need preserveDrawingBuffer: true to take a screenshot. What you need is to take the screenshot immediately after rendering. A screenshot is guaranteed to work as long as you take it after rendering but before exiting the current event.
So for example this will always work
renderer.render( scene, camera );
var screenshot = renderer.domElement.toDataURL();
Whereas this will only work randomly if you're luck
someElement.addEventListener('click', function() {
// this is not immediately after rendering. you have no
// idea when it is relative to rendering.
var screenshot = renderer.domElement.toDataURL();
});
Most of the THREE.js examples have a render function if you need to take a screenshot when the user requests one you could do this
someElement.addEventListener('click', function() {
render();
var screenshot = renderer.domElement.toDataURL();
});
Or you could do this
var takeScreenshot;
function render() {
...
if (takeScreenshot) {
takeScreenshot = false;
var screenshot = renderer.domElement.toDataURL();
}
}
someElement.addEventListener('click', function() {
takeScreenshot = true;
});
Or any number of other ways to just make sure you take the screenshot immediately after rendering.

I have also encountered this problem.my screenshot is blank in threejs webgl canvas, because not set renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});,
Here is my way to toggle preserveDrawingBuffer.
let canvas = this.renderer.domElement;
canvas.getContext('webgl' , {preserveDrawingBuffer: true});
this.render();
var data = {
image: canvas.toDataURL(),
};
canvas.getContext('webgl' , {preserveDrawingBuffer: false});

Canvas toDataURL() returns blank image

I'm using glfx.js to edit my image but when I'm trying to get that image's data using the toDataURL() function I get a blank image (width the same size as the original image).
The strange thing is that in Chrome the script works perfect.
What I want to mention is that the image is loaded in canvas using the onload event:
img.onload = function(){
try {
canvas = fx.canvas();
} catch (e) {
alert(e);
return;
}
// convert the image to a texture
texture = canvas.texture(img);
// draw and update canvas
canvas.draw(texture).update();
// replace the image with the canvas
img.parentNode.insertBefore(canvas, img);
img.parentNode.removeChild(img);
}
Also my image's path is on the same domain;
The problem (in Firefox) is when i hit the save button. Chrome returns the expected result but Firefox return this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7YAAAIWCAYAAABjkRHCAAAHxklEQVR4nO3BMQEAAADCoPVPbQZ/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
... [ lots of A s ] ...
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAzwD6aAABkwvPRgAAAABJRU5ErkJggg==
What could cause this result and how can I fix it?

Most likely there's some async event between the time you draw to the canvas and the time you call toDataURL. By default the canvas is cleared after every composite. Either prevent the canvas from being cleared by creating the WebGL context with preserveDrawingBuffer: true as in
var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});
or make sure toDataURL is called before exiting whatever event you're using to render. For example if you do this
function render() {
drawScene();
requestAnimationFrame(render);
}
render();
And somewhere else do this
someElement.addEventListener('click', function() {
var data = someCanvas.toDataURL();
}, false);
Those 2 events, the animation frame, and the click are not in sync and the canvas may be cleared between calling them. Note: The canvas won't appear cleared as it's double buffered but the buffer toDataURL and other commands that effect that buffer are looking at is cleared.
The solution is either use preserveDrawingBuffer or make your call to toDataURL inside the same event as rendering. For example
var captureFrame = false;
function render() {
drawScene();
if (captureFrame) {
captureFrame = false;
var data = someCanvas.toDataURL();
...
}
requestAnimationFrame(render);
}
render();
someElement.addEventListener('click', function() {
captureFrame = true;
}, false);
What's the point of preserveDrawingBuffer: false which is the default? It can be significantly faster, especially on mobile to not have to preserve the drawing buffer. Another way to look at it is the browser needs 2 copies of your canvas. The one you're drawing to and the one it's displaying. It has 2 ways to deal with these 2 buffers. (A) double buffer. Let you draw to one, display the other, swap the buffers when you're done rendering which is inferred from exiting any event that issued draw commands (B) Copy the contents of the buffer you're drawing to do the buffer that's being displayed. Swapping is much faster than copying. So, swapping is the default. It's up to the browser what actually happens. The only requirement is that if preserveDrawingBuffer is false that the drawing buffer get cleared after a composite (which is yet another async event and therefore unpredictable) if preserveDrawingBuffer is true then it must copy so that the drawingbuffer's contents is preserved.
Note that once a canvas has a context it will always have the same context. So in other words let's say you change the code that initializes the WebGL context but you still want to set preserveDrawingBuffer: true
There are at least 2 ways.
find the canvas first, get a context on it
since the code later will end up with the same context.
<script>
document.querySelector('#somecanvasid').getContext(
'webgl', {preserveDrawingBuffer: true});
</script>
<script src="script/that/will/use/somecanvasid.js"></script>
Because you've already created a context for that canvas whatever script comes after will get the same context.
augment getContext
<script>
HTMLCanvasElement.prototype.getContext = function(origFn) {
return function(type, attributes) {
if (type === 'webgl') {
attributes = Object.assign({}, attributes, {
preserveDrawingBuffer: true,
});
}
return origFn.call(this, type, attributes);
};
}(HTMLCanvasElement.prototype.getContext);
</script>
<script src="script/that/will/use/webgl.js"></script>
In this case any webgl context created after augmenting the getContext will have preserveDrawingBuffer set to true.

Three.js detect webgl support and fallback to regular canvas

Can anyone who has used three.js tell me if its possible to detect webgl support, and, if not present, fallback to a standard Canvas render?

Yes, it's possible. You can use CanvasRenderer instead of WebGLRenderer.
About WebGL detection:
1) Read this WebGL wiki article: http://www.khronos.org/webgl/wiki/FAQ
if (!window.WebGLRenderingContext) {
// the browser doesn't even know what WebGL is
window.location = "http://get.webgl.org";
} else {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("webgl");
if (!context) {
// browser supports WebGL but initialization failed.
window.location = "http://get.webgl.org/troubleshooting";
}
}
2) Three.js already has a WebGL detector:
https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js
renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();
3) Check also the Modernizr detector:
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

Juan Mellado's pointer to the Three.js detector was super useful, but I prefer not to bring the whole file into my project. So here is the extracted Detector.webgl() function.
function webglAvailable() {
try {
var canvas = document.createElement("canvas");
return !!
window.WebGLRenderingContext &&
(canvas.getContext("webgl") ||
canvas.getContext("experimental-webgl"));
} catch(e) {
return false;
}
}
And it is used similar to his example:
renderer = webglAvailable() ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();

Unfortunatelly, just detecting WebGL support does not automatically mean it will be any good. WebGL can be backed by software renderer like "google swiftshader" or partial emulation like "mesa 3D". Especially with a good 2D renderer like Mesa 2D it makes sense to manually choose canvas even when WebGL seems available.

Canvas drawImage using data URL

I'll start with the script:
function saveInstance() {
_savedInstance = document.getElementById('canvasID').toDataURL();
}
function restoreInstance() {
ctx.drawImage(_savedInstance,0,0);
}
The purpose is to save an instance of the canvas and re-apply it later [Similar to how ctx.save() saves the style and transformations].
However, I got the error that says incompatible types (Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17). Is there any canvas method that will allow me to use the data URL string to re-draw the instance?
**If there's a better way to implement this save/restore idea I have, that'd also be much appreciated.
-Firstmate

Yes, you can create an image element with its source as _savedInstance and then draw it to the canvas.
var img = new Image();
img.src = _savedInstance;
ctx.drawImage(img,0,0);