Canvas 为什么webgl画布上下文比2d画布使用更多内存？_Canvas_Webgl

Canvas 为什么webgl画布上下文比2d画布使用更多内存？

canvas webgl

Canvas 为什么webgl画布上下文比2d画布使用更多内存？,canvas,webgl,Canvas,Webgl,1024x1024 2d画布可能使用大约1024*1024*4=4M内存，但webGL上下文使用的内存至少要多5-10倍 <!DOCTYPE html> <html> <body> <div style="display:inline-block ;overflow: hidden;width: 512px;height: 512px;"> <canvas id=&

1024x1024 2d画布可能使用大约1024*1024*4=4M内存，但webGL上下文使用的内存至少要多5-10倍

<!DOCTYPE html>
<html>
    <body>
    
        <div style="display:inline-block ;overflow: hidden;width: 512px;height: 512px;">
            <canvas id="canvas" width="1024" height="1024" style="border: red 1px solid;transform: scale(0.5); transform-origin: 0 0;">old version need update</canvas>
        </div>
    </body>

    <script>
        var ctx = window.document.getElementById("canvas").getContext("webgl")
        var gl = canvas.getContext("experimental-webgl");

    </script>

</html>


旧版本需要更新
var ctx=window.document.getElementById（“画布”）.getContext（“webgl”）
var gl=canvas.getContext（“实验性webgl”）；

可能有多种原因

默认情况下，webgl画布是抗锯齿的。浏览器选择金额，但不检查

const gl=document.createElement（'canvas'）.getContext（'webgl'）；
const samples=gl.getParameter（gl.samples）| 1；
log（`samples是${samples}，所以这个画布实际上是${gl.canvas.width*samples}x${gl.canvas.height*samples}像素，内部大`）可能有多种原因
默认情况下，webgl画布是抗锯齿的。
浏览器选择金额，但不检查

const gl=document.createElement（'canvas'）.getContext（'webgl'）；
const samples=gl.getParameter（gl.samples）| 1；
log（`samples是${samples}，所以这个画布实际上是${gl.canvas.width*samples}x${gl.canvas.height*samples}像素，内部大`）非常感谢，我不知道webgl使用ssaa来消除锯齿。在我的机器上，参数是8。开发者可以控制内置的webgl抗锯齿参数吗？关闭ssaa samples 8很糟糕，我可以设置small samples param吗，或者我必须自己使用msaa或其他抗锯齿技术进行抗锯齿。您不能将画布的抗锯齿设置为false（关闭）或true（由浏览器决定）。可以通过帧缓冲区渲染纹理，并在将纹理渲染到画布时对其执行任何处理。您还可以使画布比显示的更大，并在合成时进行双线性过滤。在WebGL2中，您可以创建自己的多示例渲染缓冲区，但在WebGL1中不是很常见，我不知道webgl使用ssaa来消除锯齿。在我的机器上，参数是8。开发者可以控制内置的webgl抗锯齿参数吗？关闭ssaa samples 8很糟糕，我可以设置small samples param吗，或者我必须自己使用msaa或其他抗锯齿技术进行抗锯齿。您不能将画布的抗锯齿设置为false（关闭）或true（由浏览器决定）。可以通过帧缓冲区渲染纹理，并在将纹理渲染到画布时对其执行任何处理。您还可以使画布比显示的更大，并在合成时进行双线性过滤。在WebGL2中，您可以创建自己的多示例渲染缓冲区，但在WebGL1中不能