1

I performed a system upgrade some time ago after which I started noticing some issues with Chromium. One of the issues involved Chromium hanging for a couple of seconds before my Three.js r85 project started to load. I have upgraded to Three.js r90 and this issue disappeared.

However, toDataUrl() appears to not work anymore even with the latest version of Three.js. Here's a CodePen by Shiva Saxena that's similar to my own code and works perfectly well in Firefox, but not in Chromium: 

renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });

I have also tried an approach without setting preserveDrawingBuffer to true and calling toDataUrl() immediately after a call to render the scene. It also doesn't work anymore.

renderer.render( scene, camera );
var screenshot = renderer.domElement.toDataURL();

Is anyone else experiencing this behavior? Is there an alternative to using toDataUrl() for rendering a texture onto an image?

Chromium Version 65.0.3325.146 (Developer Build) (64-bit)

dkobozev
  • 2,265
  • 2
  • 21
  • 21
  • FWIW, works in Chrome on osx (unto canary). As a blind shot and without Chromium to test, are you sure you don't have a security / fingerprint protection addon/setting? Do you have a result with a 2d context? – Kaiido Mar 13 '18 at 01:15
  • Tried on chromium on osx and it works there too. – Kaiido Mar 13 '18 at 01:45
  • @Kaiido It does work for me in Chrome on Windows as well. I tried disabling all extensions. 2D context works. – dkobozev Mar 13 '18 at 01:46
  • So best to do would be to report it. Now if you need a quick fix, you could try to go through a 2D context as a proxy (`twoDCtx.drawImage(webgl_canvas, 0,0); twoDCanvas.toDataURL();`), but this is assuming `drawImage` works... If it doesn't, you could try readPixels in an ImageData's buffer, then putImageData on the 2DContext. – Kaiido Mar 13 '18 at 01:54
  • lol, it seems my basic three.js spinning box is spreading. Scrrenshot still working for me, Chrome (Version 65.0.3325.146 (Official Build) (64-bit)) on windows 10 – 2pha Mar 13 '18 at 04:32
  • Can confirm this issue. Tested this in multiple versions of Chrome 68.0.3440.106 on different PCs. Some versions work, some don't. So maybe it's an encoder issue. By the way: you will get an image but it is 100% transparent. – Thomas Huijzer Aug 23 '18 at 06:58
  • I'm running into what must be the same issue. I have JS tests that use `toDataURL()` to verify that we are drawing the right things with WebGL. The tests started failing with Chrome 68, but only on CircleCI. They still pass on our local machines. (Linux vs Mac issue?) Not sure yet how I'm going to handle it ... – Eric Simonton Sep 18 '18 at 14:08

1 Answers1

1

Chrome is fine, but you should use a proxy canvas to save the image as mentioned in comments.

let canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
let canvasCtxt = canvas.getContext('2d');
canvasCtxt.drawImage(editor.renderer.domElement, 0, 0, canvas.width, canvas.height);

canvas.toBlob(function(blob){
    blob.name = 'test.png';
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'test.png';
    link.click();
});
Amritesh Anand
  • 893
  • 11
  • 22