elm-explorations / elm-explorations/webgl

Inconsistent default behavior for WebGL.entity between Firefox and Chrome

Open
#38 4 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.