WebGL - Print Canvas?

Hello QuantumRevenger.

The reason why you are getting a blank page is because the canvas drawing buffer is empty at the moment of the image capture. Your code would only work reliably if the canvas webgl context was created with preserveDrawingBuffer flag. For example, you could add the following line to your game js

Code (JavaScript):

1. ... ,createContext:(function(canvas,webGLContextAttributes){
2.  
3. webGLContextAttributes.preserveDrawingBuffer=true;
4.  
5. if(typeof webGLContextAttributes.majorVersion==="undefined"&& ...

and this would guarantee reliable webgl canvas capture with .toDataURL() at any given moment. However, this would also affect the game performance and therefore is not recommended.

Luckily, Unity provides you with a mechanism to determine an appropriate moment for the frame capture. The following adjustment would make your code work:

Code (CSharp):

1.     [DllImport("__Internal")]
2.     private static extern void PrintFrameJs();
3.  
4.     IEnumerator PrintRoutine() {
5.         yield return new WaitForEndOfFrame ();
6.         PrintFrameJs ();
7.     }
8.  
9.     void PrintFrame () {
10.         StartCoroutine (PrintRoutine ());
11.     }

Moreover, you can go even further and make your code even more reliable, avoiding js toDataURL call, and providing the plugin function with already prepared image data:

Code (CSharp):

1.     [DllImport("__Internal")]
2.     private static extern void PrintFrameJs(byte[] img, int size);
3.  
4.     IEnumerator PrintRoutine() {
5.         yield return new WaitForEndOfFrame ();
6.         Texture2D tex = new Texture2D (Screen.width, Screen.height);
7.         tex.ReadPixels (new Rect(0, 0, Screen.width, Screen.height), 0, 0);
8.         tex.Apply ();
9.         byte[] img = tex.EncodeToPNG();
10.         PrintFrameJs (img, img.Length);
11.     }
12.  
13.     void PrintFrame () {
14.         StartCoroutine (PrintRoutine ());
15.     }

which can be handled with the following plugin:

Code (JavaScript):

1. var PrintPlugin = {
2.   PrintFrameJs: function(img, size) {
3.     var binary = '';
4.     for (var i = 0; i < size; i++)
5.       binary += String.fromCharCode(HEAPU8[img + i]);
6.     var dataUrl = 'data:image/png;base64,' + btoa(binary);
7.     // use dataUrl for printing etc.
8.   },
9. };
10. mergeInto(LibraryManager.library, PrintPlugin);

And Happy New Year by the way!

 

Hello nsmith1024.

In Unity 5.6 you can access the game canvas in the following ways:
a) From a .jslib plugin it should be accessible as Module.canvas
b) From the embedding page it should be accessible as gameInstance.Module.canvas, where "gameInstance" is the game instance the canvas belongs to.

P.S. You might also want to check the alternative solution using ReadPixels (described above), which is more reliable.

 

The default value of webglContextAttributes.preserveDrawingBuffer is now defined in the generated json file and you can override it at instantiation time:

Code (csharp):

1. var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress,
2.   Module: {
3.     webglContextAttributes: {"preserveDrawingBuffer": true},
4.   }
5. });

 

Here is that the WebGL specs say: "While it is sometimes desirable to preserve the drawing buffer, it can cause significant performance loss on some platforms. Whenever possible this flag should remain false and other techniques used."

You may want to try with your project on different browsers to see if performance becomes an issue.