Looks like it is. Unfortunately, I haven’t had a deep understanding of WebGL, I only know that it is a rendering API. So can I understand this as: The 10000+(or larger) Canvas can be correctly output and obtained in WebGL?
Meanwhile, I tested the following function. I created a Canvas, which has the same size as the rendering size set by the “resolutionScale”. Next, I used html2canvas.js to obtain the Canvas in “cesiumContainer” (Draw it on the Canvas I created), and the result is consistent with the Canvas obtained from “viewer.scene.canvas”, which is pure black when the resolution is higher than 8000+ . This is interesting because as far as I know, html2canvas.js obtains Dom and then draws it onto Canvas, so it is very likely that the problem occurred when setting “viewer. resolutionScale=5 or lager”, although running this code separately will not cause any errors, but there was an unexpected situation behind its run…
html2canvasObtainCes(){
viewer.resolutionScale = 4;
tileset.maximumScreenSpaceError = 0
setTimeout(() => {
var dom = $('#cesiumContainer')[0];
var width = dom.offsetWidth;
var height = dom.offsetHeight;
var canvasCes = document.createElement('canvas');
var scaleBy = 4
canvasCes.width = width*scaleBy;
canvasCes.height = height*scaleBy;
html2canvas(dom, {
scale:scaleBy,
useCORS:true,
width:width,
height:height,
backgroundColor:null,
canvas:canvasCes,
}).then((canvasCes) => {
viewer.resolutionScale = 1;
tileset.maximumScreenSpaceError = 2
var tempSrc = canvasCes.toDataURL("image/png",1);
var a = document.createElement("a");
a.href = tempSrc;
a.download = "Image"
document.body.appendChild(a);
a.click();
});
}, 9000)
},
(I’ll always start my comments here with a disclaimer: I’ll have to look much deeper into certain details to give more “better” answers, but hope that the comments contain at least some valuable hints…)
So can I understand this as: The 10000+(or larger) Canvas can be correctly output and obtained in WebGL?
It appears to be possble, at least. Very roughly speaking: When you have canvas, then your can…
- use
canvas.getContext('2d'), and use the resulting context to draw “2D stuff” - or use
canvas.getContext('webgl')to get aglcontext to use OpenGL/WebGL functions to draw “3D stuff”. This is what CesiumJS is using.
It’s nearly impossible to concisely summarize “what the differences are” between these cases. But I considered the possibility that the webgl context might have certain limitations (e.g. for the size of the canvas) that the 2d context does not have.
So I created this test in the standalone HTML file to explicitly test storing a ‘large’ canvas that was filled with webgl. And this is possible - at least in that small example.
Maybe ~“something in CesiumJS can be changed” to avoid the current limitation, but I’m not 100% sure about that. First of all: Figuring out exactly why it currently does not work will be the hardest part. (Maybe someone who is more familiar with this specific part of the technology can make more educated guesses than I can do now…)
Your answer is very humble and cautious, and from what I have seen so far, your opinion is already very helpful and valuable.
Just as you said:" Figuring out exactly why it currently does not work will be the hardest part"，especially for someone like me who is not familiar with WebGL, So this is also a very rare learning opportunity, at least for me.
So I will patiently wait for your reply on why this phenomenon occurred and how to solve it. Perhaps someone else have different opinions, and I also hope to receive their response.
Hello, it has been two months since your last reply. I still haven’t solved this problem. Can you provide some help?