WebGL standalone example: Cartesian plane (elm) https://ellie-app.com/7CqD92dY2cza1

cartesian-plane.elm

-- https://ellie-app.com/7CqD92dY2cza1

-- https://webglfundamentals.org/
-- elm install elm-explorations/linear-algebra
-- elm install elm-explorations/webgl

module Main exposing (..)

import Browser
import Html
import Html.Attributes
import Math.Vector3
import WebGL



-- MAIN


main =
  Browser.element
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }



-- MODEL


type alias Model =
  Float


init : () -> ( Model, Cmd Msg )
init () =
  ( 0, Cmd.none )



-- UPDATE


type Msg
  = NoOp


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    NoOp ->
     ( model, Cmd.none )



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none



-- VIEW


view : Model -> Html.Html Msg
view model =
  WebGL.toHtml
    [ Html.Attributes.width 300
    , Html.Attributes.height 300
    , Html.Attributes.style "display" "block"
    ]
    [ WebGL.entity vertexShader fragmentShader mesh Uniforms
    ]



-- MESH


type alias Vertex =
  { position : Math.Vector3.Vec3
  , color : Math.Vector3.Vec3
  }


mesh : WebGL.Mesh Vertex
mesh =
  -- In WebGL clipspace goes from -1 to 1
  -- https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html
  List.range -10 10 |>
  List.map (\i -> ( toFloat i ) / 10.0) |>
  List.concatMap
    (\i ->
      let
        position_horizontal_line_coord_1 =
          Math.Vector3.vec3 -1 i 0

        position_horizontal_line_coord_2 =
          Math.Vector3.vec3  1 i 0

        position_vertical_line_coord_1 =
          Math.Vector3.vec3 i 1 0

        position_vertical_line_coord_2 =
          Math.Vector3.vec3 i -1 0

        vcolor =
          if i == 0 then -- Axis
            Math.Vector3.vec3 0.3 0.3 0.3
          else
            Math.Vector3.vec3 0.6 0.6 0.6

      in
        [ ( Vertex position_horizontal_line_coord_1 vcolor
          , Vertex position_horizontal_line_coord_2 vcolor
          )
        , ( Vertex position_vertical_line_coord_1 vcolor
          , Vertex position_vertical_line_coord_2 vcolor
          )
        ]
    )
  |>
  WebGL.lines



-- SHADERS


type alias Uniforms =
  {}


vertexShader : WebGL.Shader Vertex Uniforms { vcolor : Math.Vector3.Vec3 }
vertexShader =
    [glsl|
        attribute vec3 position;
        attribute vec3 color;
        varying vec3 vcolor;

        void main () {
            gl_Position = vec4(position, 1.0);
            vcolor = color;
        }
    |]


fragmentShader : WebGL.Shader {} Uniforms { vcolor : Math.Vector3.Vec3 }
fragmentShader =
    [glsl|
        precision mediump float;
        varying vec3 vcolor;

        void main () {
            gl_FragColor = vec4(vcolor, 1.0);
        }
    |]