justgook / webgl-shape / WebGL.Shape2d.Render

Basic Shapes

circle : Math.Vector3.Vec3 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Render circle or ellipse

circle : Vec3 -> Float -> SolidShape
circle color r =
    Render.circle color
        |> SolidShape.shape (r * 2) (r * 2)

shape =
    circle (rgb 255 0 0) 50

image : WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Render an image

image : Float -> Float -> key -> TexturedShape key
image width height =
    AutoTextures.textured
        (\t ->
            t
                |> Texture.size
                |> (\( w, h ) -> Math.Vector2.vec2 (toFloat w) (toFloat h))
                |> Render.image t
                |> AutoTextures.shape width height
        )

shape =
    image 200 200 "image.png"

ngon : Basics.Float -> Math.Vector3.Vec3 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Render regular polygon

hexagon : Vec3 -> Float -> SolidShape
hexagon color r =
    Render.ngon 6 color
        |> SolidShape.shape (r * 2) (r * 2)

shape =
    hexagon (rgb 255 0 0) 50

rect : Math.Vector3.Vec3 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Rectangle render

rectangle : Vec3 -> Float -> Float -> SolidShape
rectangle color w h =
    Render.rect color
        |> SolidShape.shape w h

shape =
    rectangle (rgb 255 0 0) 20 40

triangle : Math.Vector3.Vec3 -> ( Math.Vector2.Vec2, Math.Vector2.Vec2, Math.Vector2.Vec2 ) -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Render triangle with free defined vertexes

triangle : Vec3 -> ( Vec2, Vec2, Vec2 ) -> SolidShape
triangle color data =
    Render.triangle color data
        |> SolidShape.shape 1 1

shape =
    triangle (rgb 41 239 41)
        ( vec2 -100 0, vec2 0 100, vec2 100 0 )

With Textures

tile : WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Math.Vector2.Vec2 -> Basics.Int -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Show tile from a tileset.

All tiles are fixed size and placed into a grid, where the first tile has a 0 index increasing left to right and top to bottom.

Example: having a 3x3 tileset with each tile of 16x24 pixels

| 0 1 2 |
| 3 4 5 |
| 6 7 8 |

this draws the first tile of the second row

tile : Float -> Float -> key -> Int -> TexturedShape key
tile tileW tileH tileset index =
    tileset
        |> AutoTextures.textured
            (\t ->
                Render.tile t (vec2 tileW tileH) (Util.size t) index
                    |> AutoTextures.shape tileW tileH
            )

shape =
    tile 16 24 "sprites.png" 3

glyph : WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Math.Vector2.Vec2 -> Math.Vector3.Vec3 -> Basics.Int -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Render tile from symmetrical tileset.

Same as tile, but with color blending.

Used to draw text (font glyph)

msdf : Basics.Float -> WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Math.Vector3.Vec3 -> Math.Vector4.Vec4 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

This is a utility for generating signed distance fields from vector shapes and font glyphs, which serve as a texture representation that can be used in real-time graphics to efficiently reproduce said shapes. Although it can also be used to generate conventional signed distance fields best known from this Valve paper and pseudo-distance fields, its primary purpose is to generate multi-channel distance fields, using a method I have developed. Unlike monochrome distance fields, they have the ability to reproduce sharp corners almost perfectly by utilizing all three color channels.

sprite : WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Math.Vector4.Vec4 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Show sprite from a sprite sheet.

Sprites can be placed anywhere in the sprite sheet and each can have different sizes.

Example: this draws a sprite of 16x24 pixels taking it from a sprite sheet, starting at position 16,0 up to including pixels at 31,23

sprite "sprites.png" { xmin = 16, xmax = 31, ymin = 0, ymax = 23 }

tilemap : Basics.Float -> Basics.Float -> WebGL.Texture.Texture -> WebGL.Texture.Texture -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Show tilemap from a tileset and a corresponding lookup table stored as a texture.

tilemap : Float -> Float -> key -> key -> TexturedShape key
tilemap tileW tileH tileset lut =
    AutoTextures.textured2
        (\t1 t2 ->
            let
                ( w2, h2 ) =
                    Texture.size t2
                        |> Tuple.mapBoth (toFloat >> (*) tileW) (toFloat >> (*) tileH)
            in
            Render.tilemap tileW tileH t1 t2
                |> AutoTextures.shape w2 h2
        )
        tileset
        lut

Types


type alias Opacity =
Basics.Float

Alias to Opacity property


type alias Render =
Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity

Render is part of Shape that converts Shape into Entity

rect : Vec3 -> Render
rect color uP uT z opacity =
    WebGL.entityWith
        entitySettings
        Shader.vertNone
        Shader.fragFill
        Shader.mesh
        { color = setAlpha color opacity
        , uP = uP
        , uT = uT
        , z = z
        }


type alias ScaleRotateSkew =
Math.Vector4.Vec4

Vec4 representing part of transform matrix

| x y 0 |
| z w 0 |
| 0 0 1 |


type alias Translate =
Math.Vector2.Vec2

Vec2 representing part of transform matrix

| 1 0 x |
| 0 1 y |
| 0 0 1 |


type alias Z =
Basics.Float

Css line z-index that is passed to the Render


type alias Height =
Basics.Float

Alias to Height property


type alias Width =
Basics.Float

Alias to Width property

Settings

defaultEntitySettings : List WebGL.Settings.Setting

Make me optional and pass it to the each Render function