elm-explorations / elm-explorations/webgl
Inconsistent default behavior for WebGL.entity between Firefox and Chrome
- Dominant language
- Elm
- Stars
- 123
- Forks
- 17
- PR merge metrics
- No merged PRs in 30d
Description
The following code ([Ellie link](https://ellie-app.com/jZQMRM82yhva1)) 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.
```elm
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;
}
|]
Contributor guide
Assessment
This issue has not been assessed yet.