elm-community / webgl

Moved to elm-explorations/webgl

Moved to elm-explorations/webgl

webgl's Issues

support elm 0.18.0?

am i doing it wrong? :-)

$ elm-package install elm-community/webgl
To install elm-community/webgl I would like to add the following
dependency to elm-package.json:

    "elm-community/webgl": "2.0.3 <= v < 3.0.0"

May I add that to elm-package.json for you? [Y/n] y

Error: I cannot find a set of packages that works with your constraints.

--> There are no versions of elm-community/elm-webgl that work with Elm 0.18.0.
    Maybe the maintainer has not updated it yet.

Bump linear-algebra in examples to 3.x?

I was looking for Mat4 toRecord today to display the transformation input and found it in the 3.x version of linear-algebra. That's when I noticed examples are still using 2.x. Upgrading to 3.x worked so is there any reason not to upgrade the elm-packages in the example?

I can create a merge request if you want.

Remove unnecessary tuples from the function calls

type FunctionCall
    = Enable Capability
    | Disable Capability
    | BlendColor ( Float, Float, Float, Float )
    | BlendEquation BlendMode
    | BlendEquationSeparate ( BlendMode, BlendMode )
    | BlendFunc ( BlendOperation, BlendOperation )
    | DepthFunc CompareMode
    | SampleCoverageFunc ( Float, Bool )
    | StencilFunc ( CompareMode, Int, Int )
    | StencilFuncSeparate ( FaceMode, CompareMode, Int, Int )
    | StencilOperation ( ZMode, ZMode, ZMode )
    | StencilOperationSeparate ( FaceMode, ZMode, ZMode, ZMode )

can become

type FunctionCall
    = Enable Capability
    | Disable Capability
    | BlendColor Float Float Float Float
    | BlendEquation BlendMode
    | BlendEquationSeparate BlendMode BlendMode
    | BlendFunc BlendOperation BlendOperation
    | DepthFunc CompareMode
    | SampleCoverageFunc Float Bool
    | StencilFunc CompareMode Int Int
    | StencilFuncSeparate FaceMode CompareMode Int Int
    | StencilOperation ZMode ZMode ZMode
    | StencilOperationSeparate FaceMode ZMode ZMode ZMode

Address the attributes in the docs

display: block style may be needed to remove an extra whitespace because the canvas is an inline element by default
width and height attributes change the canvas resolution, while style [("width", "100px")] scales the canvas.

Rename Triangle to Triangles

Hi,
I suggest to rename Drawable(Triangle) to Triangles for the following reasons:

• JS primitive name is gl.TRIANGLES (reference)
• it's a way to draw a list of triangles, not just one

Obviously that would need to be in a major release :)

Export only certain things from the library

The current state is module WebGL exposing (..) that exposes everything from WebGL.elm, we should only export certain functions and types.

For example, these things are only used internally:

• computeAPICall
• computeAPICalls
• computeBlendModeString
• computeBlendOperationString
• computeCapabilityString
• computeCompareModeString
• computeFaceModeString
• computeZModeString
• Renderable constructor
• Error constructor

Memory leak when creating a mesh in update/view

This was discovered in the https://github.com/francisdb/glmorph demo by @francisdb. The current implementation caches the attributes for each mesh. This means that every newly created mesh will be added to the cache, and if this is done in AnimationFrame subscription, the cache may grow pretty fast.

This is the smallest example to reproduce this issue:

module Main exposing (main)

import AnimationFrame
import Html exposing (Html)
import Math.Vector3 as Vec3 exposing (vec3, Vec3)
import WebGL exposing (Mesh, Shader)


main : Program Never () ()
main =
    Html.program
        { init = ( (), Cmd.none )
        , view = view
        , subscriptions = always (AnimationFrame.diffs (always ()))
        , update = \_ _ -> ( (), Cmd.none )
        }


view : () -> Html msg
view _ =
    WebGL.toHtml
        []
        [ WebGL.entity
            vertexShader
            fragmentShader
            (mesh ())
            {}
        ]


type alias Vertex =
    { position : Vec3
    }


triangles : List ( Vertex, Vertex, Vertex )
triangles =
    List.range 0 10
        |> List.map
            (\_ ->
                ( { position = vec3 0 0 0 }
                , { position = vec3 1 1 0 }
                , { position = vec3 1 -1 0 }
                )
            )


mesh : () -> Mesh Vertex
mesh _ =
    WebGL.triangles triangles


vertexShader : Shader Vertex {} {}
vertexShader =
    [glsl|
        attribute vec3 position;
        void main () {
            gl_Position = vec4(position, 1.0);
        }
    |]


fragmentShader : Shader {} {} {}
fragmentShader =
    [glsl|
        void main () {
            gl_FragColor = vec4(0, 0, 0, 1.0);
        }
    |]

The heap snapshot shows the growing amount of WebGLBuffer objects:

Only publish the necessary sources

Currently running elm package install elm-community/webgl will download all files from the repo, including examples and images, the total size is 428K.

If we remove unneeded things, the total size will be reduced down to 80K.

As @eeue56 suggested, we can do this:

elm-package bump
git commit -a- m 'bump'
git push
git checkout <name of last commit>
rm -rf tests examples
git add .
git commit -a -m 'bump and cleanup'
git tag -a <version> -m 'init'
git push --tags

Batching updates

This issue serves as a meta issue to help make the update process as smooth as possible, as changes have to be approved

---

We are currently on 1.0.1.

Update plan

First we could merge #4, bringing us to 1.1.0

Next would be those two (#5, #3), bringing us to 2.0.0.
Together with these, #11 can be implemented.

Use cases

#4

• Is needed to toggle different webgl features. Some games need the stencil buffer, some games don't need the depth buffer. Games that don't need a certain buffer shouldn't pay the price.
• Ability to disable antialising (e.g. on mobile)
• Most games probably want to disable alpha or premultiplied alpha.
  This would allow us to get rid of these ugly hacks.

#3

• It's nice to get a quick and dirty background sky

#5

• Is needed for everything that needs the stencil buffer. An example would be a mirror, a camera or object outlining.

---

If there is something to add I'll edit this first post.

Introduce automated tests

It is difficult to bring new changes, because we may not be aware of all use cases. With more changes this becomes even more complicated.

The current way is to manually check the examples to see if they still work, but this is a bit tedious and may not cover all possible cases.

So yeah, it would be good to investigate possible ways to test the WebGL library. My idea is to store the screenshots of examples and then with every change compare them with the new screenshots. We can also split apart the native part and write some unit tests for the JavaScript files.

Loading images using data urls in Safari results in a CORS error

For more information and the fix, see this issue from elm-community/canvas and this commit.

This is likely more of a problem for 2d canvas than webgl, but someone is bound to run into it.

Elm 0.19 - Are we able to upgrade?

Elm 0.19 came out and know I'm wondering if I would be able to upgrade a project that relies on this library. Because I see you have native code.

Hopefully there is a way and if so I would like to offer my help.

New features that would need a compiler change

In this issue I want to collect new features that would require a compiler change, as the compiler only infers certain types from a [glsl| |] block.

The types that are currently supported are:

GLSL	Elm
float	Float
int	Int
vec2	Math.Vector2.Vec2
vec3	Math.Vector3.Vec3
vec4	Math.Vector3.Vec4
mat4	Math.Matrix4.Mat4
sampler2D	WebGL.Texture

Things that would be nice to have:

GLSL	Elm	Reason
bool	Bool	To toggle stuff on and off
mat3	Math.Matrix.Mat3	For 2d games, normal matrix for 3d shading, etc.
mat2	Math.Matrix.Mat2
samplerCube	WebGL.CubeTexture	For reflections, etc.
type name[]	Array.Array a	Arrays are needed for multiple light sources, GPU skinning, etc.
struct Name {..}	type alias Name {..}	Structs are nice for grouping. Click here for more info.

The relevant lines for the compiler are here.

Interestingly, we can actually pass in types that the compiler doesn't support and it still works. However, the compiler won't be able to infer types and catch errors this way.
(To confirm this statement, try passing in a Bool. It works as expected, but you don't get a compiler error if you leave it out or pass a String instead.)

Once it's clear what types we actually need, I could open an issue or a pull request to the compiler.

Create textures procedurally

Provided I understand the current API correctly, there is currently no way to create a texture programatically by providing the color values as data to some constructor. Is this intentional?

I kind of have a use case for procedural textures, namely converting colormaps into textures on the fly. If this is a desired feature, I might be interested in implementing it.

WebGL iterates with List.map that reverses the order

I've discovered that WebGL uses List.map in order to iterate over lists. Unfortunately this reverses the order of the elements, so we have to additionally call List.reverse. This seems to be a waste of cpu cycles.

Is there a better way to iterate over lists in the Native land?

[Feature request] Frame buffers

It's currently impossible to perform certain rendering operation common in many 3d games.
Many techniques require rendering to a texture (or other types of a frameBuffer).

Examples include:

• Post-processing / FXAA / mirrors / realtime reflections / cameras
  • general info here and here
• Shadow mapping / SSAO
• Deferred shading
• Physically based rendering

For the API, I propose a counterpart to toHtml and toHtmlWith, but instead of rendering to Html, it should render to a Texture.
E.g.

renderToTextureWithSettings : RenderToTextureOptions -> List Renderable -> Texture

Where RenderToTextureOptions would be something like:

type alias RenderToTextureOptions =
  { width : Float
  , height : Float
  , settings : List Setting
  }

I didn't fully think that api through, it's just a suggestion.

API Outlines

I wasn't sure how to share all the files we worked on today, but I know issues allow zip files!

So webgl.zip contains all the files we worked on.

Arrays in shaders

The type of an array in a shader is incorrectly inferred as just the primitive type.
Example:

uniform int  palette[64];

yields

But the definition (shown above) is a:

    Shader
        {}
        { palette : Int }
        {}

Where palette should probably have been inferred as Array Int.

Combined with the inability to generate textures at runtime, this is a real obstruction when for example creating a graphics editing application.

nonPowerOfTwoOptions does not work on mobile

I am trying to load an image from a camera that is not a power of two using WebGL.Texture.loadWith nonPowerOfTwoOptions. It works fine on desktop in both firefox and chromium, but on android the texture does not render. The console output says the following

The khronos wiki says that it should be possible using the parameter that I think nonPowerOfTwoOptions set

I tried this on my own one plus one running android 6.0.1 and my brothers oneplus 3 running a later android version. It fails in both chromium and firefox.

List projects that use WebGL

I think we need a showcase of the projects that use WebGL. This will help us to raise awareness of the library, overview all the possible use cases, provide more information for the new people.

We can either add a section to the README, or build a small elm app that we publish to http://webgl.elm-community.org.

I can imagine the following sections:

Examples

Something that may fit in webgl examples, but better be kept outside so we don't have to upgrade them each time.

• w0rm/elm-webgl-playground
• avh4/codevember-2016 check day 10 and day 11
• lepoetemaudit/elm-terrain a proof-of-concept terrain renderer
• francisdb/glmorph Elm WebGL morphing particle system
• hendriklammers/month-of-shaders One GLSL shader for every day of the month August
• peterszerzo/overeasy.sh some generative art, check the demo here

Libraries

• elm-2d-game
• elmo-8
• elm-obj-loader
• opensolid/scene WIP scene graph package, check the demo here

Projects

• count-down
• into-the-heavens
• elm-street-404
• elm-mogee
• elm-snake
• mage-city
• kfish/elm-shadertoy incorporate shaders from Shadertoy in Elm projects
• elm-cubik

Please mention your project in the comments and I will update this post.

Support mipmap texture filters

Currently only linear and nearest filters are supported for textures. WebGL also allows mipmap filters for MIN filter (GL_NEAREST_MIPMAP_NEAREST, GL_LINEAR_MIPMAP_NEAREST, GL_NEAREST_MIPMAP_LINEAR and GL_LINEAR_MIPMAP_LINEAR).

Using mipmaps can lead to better visual quality as the downscaled versions of a texture can be pre-filtered or even hand-manipulated, but can also lead to vastly better performance. For example, rendering a large texture many times (like a tiled pattern) ends up being slow because of the bandwidth overhead of each tile draw operation utilising the entire texture.

More details on the mipmap filters available to WebGL can be found here: https://www.khronos.org/opengles/sdk/docs/man/xhtml/glTexParameter.xml

I'm happy to submit a PR if this issue is accepted.