Create your own shape

redRect w h =
    (\uP uT opacity ->
        WebGL.entity
            rectVertexShader
            fillFragment
            clipPlate
            { color = Math.Vector4.vec4 1 0 0 opacity
            , uP = uP
            , uT = uT
            }
    )
        |> custom w h

Get texture for your custom Shape

useTexture "image.png" <|
    \t ->
        custom 32 32 <|
            myCustomRender t

Create Your own Render and use it in Advanced.custom to create Shape

redRect : Render
redRect uP uT opacity =
    WebGL.entityWith
        defaultEntitySettings
        vertNone
        fragFill
        mesh
        { color = setAlpha color opacity
        , uP = uP
        , uT = uT
        }

Vec4 representing part of transform matrix for Advanced.custom

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

Vec2 representing part of transform matrix for Advanced.custom

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

When you need advanced application or just need to playground be part of your app

Expose internals to the outside wold

Modify game memory from the outside world

Playground have different subscriptions:

• picture uses only subscriptions.resize
• animation uses only subscriptions.resize and subscriptions.time
• game uses all (shortcut subscriptions.all)

When embedding playground you can choose what to use:

• keys - listen to keyboard events (keyUp and keyDown) and updates
• time - updates Computer.time each frame
• click - listen on mouse movement Computer.mouse.down/click
• mouse - listen on mouse movement Computer.mouse.x/y
• resize - listen on window resize and updates Computer.screen

Embedded target is be part of your application, most of time it will not take whole screen, so it is up to you decide on dimensions, and pass it to update function as Msg

All textures start loading only after first time request in view, with slow network that can take some time, but for more advanced games and more smooth transition you can cache textures for later use, so when you need show new image - texture already there.

updateTexture gives you control over textures stored in Game

newModel =
    model
        --add new texture
        |> updateTexture "img1.png" (\_ -> Just myTexture)
        --remove texture
        |> updateTexture "img2.png" (\_ -> Nothing)