Inconsistent default behavior for WebGL.entity between Firefox and Chrome

[MartinSStewart]

The following code (Ellie link) will show a green rectangle on Firefox and a black rectangle on Chrome and Safari. This behavior is consistent both on Windows and Mac OS.

If you change WebGL.entity to WebGL.entityWith [] then all browsers will be consistent in showing a green rectangle.

module Main exposing (main)

import Browser.Events
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Math.Matrix4 exposing (Mat4)
import Math.Vector2 as Vec2 exposing (Vec2)
import Math.Vector4 as Vec4 exposing (Vec4)
import WebGL exposing (Mesh, Shader)

main : Platform.Program () () ()
main =
    Browser.element
        { init = \_ -> ((), Cmd.none)
        , update = \_ _ -> ((), Cmd.none)
        , view = view
        , subscriptions =
            \_ -> Browser.Events.onAnimationFrame (\_ -> ())
        }

view model =
    WebGL.toHtmlWith
        [ WebGL.stencil 0
        ]
        []
        [ WebGL.entity
            vertexShader
            fragmentShader
            viewportSquare
            { color = Vec4.vec4 0 1 0 1
            , matrix = Math.Matrix4.identity
            }
        ]

viewportSquare : Mesh { position : Vec2 }
viewportSquare =
    WebGL.triangleFan
        [ { position = Vec2.vec2 -1 -1 }
        , { position = Vec2.vec2 1 -1 }
        , { position = Vec2.vec2 1 1 }
        , { position = Vec2.vec2 -1 1 }
        ]

vertexShader : Shader { position : Vec2 } { a | matrix : Mat4 } {}
vertexShader =
    [glsl|

attribute vec2 position;
uniform mat4 matrix;

void main () {
  gl_Position = matrix * vec4(position, 0.0, 1.0);
}

|]

fragmentShader : Shader {} { a | color : Vec4 } {}
fragmentShader =
    [glsl|
precision mediump float;
uniform vec4 color;

void main () {
    gl_FragColor = color;
}
    |]

[w0rm]

@MartinSStewart i investigated this, seems that inconsistent behavior is because the depth buffer is disabled in toHtmlWith, but the depth test is performed by the entity.

I wonder what should be the result of a depth test if there is no depth buffer ? Perhaps different browsers interpret this differently

[MartinSStewart]

Yeah, it seems like it's browser specific (hence why I get difference results on Chrome and Firefox). I think the solution to this would be to make sure whatever happens, it's consistent between browsers?

[w0rm]

I am not sure how important is to fix browser inconsistencies in the case of misconfiguration. Perhaps the documentation could be better to prevent this? The somethingWith functions are meant for advanced usage where it may be ok to assume folks know what they are doing.

Alternatively maybe the WebGL API could be changed to prevent this. Maybe different versions of toHtml that pass down something similar to the Key from elm/browser, that is necessary to create the depth test or stencil test settings for entities. This would complicate the API quite a bit.

Or the implementation — if there is an entity with the depth test in the list of entities — the depth buffer is getting automatically turned on. This can only happen on the first render though. Doing this implicitly may be a bit weird.

[MartinSStewart]

Maybe a phantom type could be used to prevent the misconfiguration? Adding a stencil/depth check to an entity forces it to have a specific extension record as a phantom type (i.e. { a | needsStencil : (), needsDepth : () }) and then the option to add that must be included in WebGL.withHtml.