Tizen Web 应用程序：WebGL canvas 未正确呈现

Question

我正在为基于三星智能电视的信息亭开发 Tizen Web 应用程序，我需要在 html canvas.

中添加由 WebGL 绘制的形状

问题：当我运行电视模拟器中的 Web 应用程序时，canvas 和尺寸为 1900x900 的内部形状（矩形）被渲染得更小，例如 300x300。如果我在 Chrome 中打开 html 页面，形状会正确呈现。

在下方您可以看到如何在电视模拟器中呈现以及在后台打开的网络检查器显示 canvas 的计算尺寸应该是 1900x900。 canvas 区域的背景为灰色。

这里是预期结果：

我的HTML代码（灵感来自Tizen WebGL examples）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <title>Lesson3</title>
    <style>
        canvas{
        background: white;
        }
    </style>
    <script id="vshader" type="x-shader/x-vertex">
        attribute vec2 attVertexPos;

        void main(){
            gl_Position = vec4(attVertexPos, 0, 2);
        }
    </script>
    <script id="fshader" type="x-shader/x-fragment">
        void main(){
            gl_FragColor = vec4(1,0.5,0.5,1);
        }
    </script>
    <script>
        var gl = null;

        window.onload = startWegGL;

        function startWegGL() {
            var vshader = null;
            var fshader = null;
            var program = null;

            gl = getWebGLContext();
        
                  gl.clearColor(0.8, 0.8, 0.8, 1);
                  gl.clear(gl.COLOR_BUFFER_BIT);
            vshader = gl.createShader(gl.VERTEX_SHADER);
            fshader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(vshader, document.getElementById('vshader').text);
            gl.shaderSource(fshader, document.getElementById('fshader').text);

            gl.compileShader(vshader);
            gl.compileShader(fshader);

            program = gl.createProgram();
            gl.attachShader(program, vshader);
            gl.attachShader(program, fshader);
            gl.linkProgram(program);
            gl.useProgram(program);

            var vertices = [
             2.0, 1.0,
            -2.0, 1.0,
             2.0, -1.0,
            -2.0, -1.0
            ];

    
            var triangleVerticesBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);


            var vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
            gl.enableVertexAttribArray(vertexPositionAttribute);
            gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }


        function getWebGLContext() {
            var webGLContext;
            var canvas = document.getElementById('canvas');
            var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];

            for (var i = 0; i < names.length; ++i) {
                try {
                    webGLContext = canvas.getContext(names[i]);
                } catch (e) { }

                if (webGLContext) {
                console.log(i);
                break;}
            }

            return webGLContext
        }
    </script>
</head>
<body style="margin:0px;padding:0px; width: 1920px; height: 1080px;">
    <canvas width="1900" height="900" style="position:fixed; width: 1900px; height: 900px;" id="canvas" >This browser is not supported</canvas>
</body>
</html>

我尝试调试问题但是：

根据网络检查员的说法，canvas 尺寸正确
我打印了当前的 gl 视口并正确设置为 1900x900
根据 Tizen and Samsung 文档支持 WebGL
我尝试使用 gl.viewport(0,0,1900,900); 设置 gl 视口但没有成功

我是 WebGL 的新手，所以我不知道这是 WebGL 的问题还是 canvas 或其他问题。

问题出在哪里？我缺少什么？

Tizen SDK：电视扩展 v6.5

电视模拟器：tv-samsung v6.5.13 1920x1080

Answer 1

@fabik111
我是三星的 Tizen Emulator 团队。
很抱歉让您遇到 Tizen 模拟器问题。我们在您报告后立即开始分析问题。请参考以下原因及解决方法。
原因：它是由 Tizen 模拟器中的驱动程序问题引起的，我们现在已修复它。解决方案：作为我们的安全策略，您只能从 public Tizen Emulator 映像中获取解决方案，并且此补丁将包含在 Tizen7.0 Emulator 版本的 public 映像中（大约在 2022 年底/ 12).
再次抱歉给您带来的不便，我们会考虑更多的方式及时为public开发者分享bug解决方案。

Tizen Web 应用程序：WebGL canvas 未正确呈现

Tizen Web Application: WebGL canvas not properly rendered

canvas

webgl

tizen

tizen-web-app

tizen-emulator