canvaswebgltizentizen-web-apptizen-emulator

Tizen Web Application: WebGL canvas not properly rendered

I'm developing a Tizen web application for kiosks based on Samsung's Smart TVs and I need to add a shape drawn by WebGL inside an html canvas.

The problem: when I run the web application in the TV Emulator the canvas and the internal shape (a rectangle) of dimension 1900x900 are rendered smaller like 300x300. If I open the html page in Chrome, the shape is properly rendered.

Here below you can see how is rendered in the TV Emulator and in the background the web inspector opened showing the computed dimension of the canvas that should be 1900x900. The canvas area has a gray background.

View with TV Emulator

Here the expected result:

Expected result

My HTML code (inspired by the 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>

I tried to debug the problem but:

  1. according to the web inspector the canvas size is correct
  2. I printed the current gl viewport and is correctly set 1900x900
  3. according to Tizen and Samsung documentation WebGL is supported
  4. I've tried to set the gl viewport with gl.viewport(0,0,1900,900); and didn't work

I'm a newbie with WebGL, so I can't figure out if it's a problem with WebGL or canvas or something else.

Where is the problem? What I'm missing?

Tizen SDK: TV Extension v6.5

TV Emulator: tv-samsung v6.5.13 1920x1080

Solution

  • @ fabik111
    This is Tizen Emulator team from Samsung.
    Sorry for making you in trouble of Tizen Emulator issue. We have started to analyze the issue immediately after your report. Please refer to below cause and solution.
    Cause: it is caused by driver issue in Tizen Emulator and we fixed it now. Solution: As our security policy, you only can get the solution from public Tizen Emulator image, and this patch will be include in the public image in Tizen7.0 Emulator release(at about end of 2022/12).
    Sorry again for your inconvenience, we will consider more ways to share bug solution for public developer in time.