[ { "name": "WebGL.Texture", "comment": "\n# Texture\n@docs Texture, load, Error, size\n\n# Custom Loading\n@docs loadWith, Options, defaultOptions\n\n## Resizing\n@docs Resize, linear, nearest,\n nearestMipmapLinear, nearestMipmapNearest,\n linearMipmapNearest, linearMipmapLinear,\n Bigger, Smaller\n\n## Wrapping\n@docs Wrap, repeat, clampToEdge, mirroredRepeat\n\n# Things You Shouldn’t Do\n@docs nonPowerOfTwoOptions\n", "unions": [ { "name": "Bigger", "comment": " Helps restrict `options.magnify` to only allow\n[`linear`](#linear) and [`nearest`](#nearest).\n", "args": [], "cases": [] }, { "name": "Error", "comment": " Loading a texture can result in two kinds of errors:\n\n* `LoadError` means the image did not load for some reason. Maybe\n it was a network problem, or maybe it was a bad file format.\n\n* `SizeError` means you are trying to load a weird shaped image.\n For most operations you want a rectangle where the width is a power\n of two and the height is a power of two. This is more efficient on\n the GPU and it makes mipmapping possible. You can use\n [`nonPowerOfTwoOptions`](#nonPowerOfTwoOptions) to get things working\n now, but it is way better to create power-of-two assets!\n", "args": [], "cases": [ [ "LoadError", [] ], [ "SizeError", [ "Int", "Int" ] ] ] }, { "name": "Resize", "comment": " How to resize a texture.\n", "args": [ "a" ], "cases": [] }, { "name": "Smaller", "comment": " Helps restrict `options.magnify`, while also allowing\n`options.minify` to use mipmapping resizes, like\n[`nearestMipmapNearest`](#nearestMipmapNearest).\n", "args": [], "cases": [] }, { "name": "Wrap", "comment": " Sets the wrap parameter for texture coordinate.\n", "args": [], "cases": [] } ], "aliases": [ { "name": "Options", "comment": " `Options` describe how to:\n\n* `magnify` - how to [`Resize`](#Resize) into a bigger texture\n* `minify` - how to [`Resize`](#Resize) into a smaller texture\n* `horizontalWrap` - how to [`Wrap`](#Wrap) the texture horizontally if the width is not a power of two\n* `verticalWrap` - how to [`Wrap`](#Wrap) the texture vertically if the height is not a power of two\n* `flipY` - flip the Y axis of the texture so it has the same direction\n as the clip-space, i.e. pointing up.\n\nYou can read more about these parameters in the\n[specification](https://www.khronos.org/opengles/sdk/docs/man/xhtml/glTexParameter.xml).\n", "args": [], "type": "{ magnify : Resize Bigger, minify : Resize Smaller, horizontalWrap : Wrap, verticalWrap : Wrap, flipY : Bool }" }, { "name": "Texture", "comment": " Textures can be passed in `uniforms`, and used in the fragment shader.\nYou can create a texture with [`load`](#load) or [`loadWith`](#loadWith)\nand measure its dimensions with [`size`](#size).\n", "args": [], "type": "Texture" } ], "values": [ { "name": "clampToEdge", "comment": " Causes coordinates to be clamped to the range 1 2N 1 - 1 2N, where N is\nthe size of the texture in the direction of clamping.\n", "type": "Wrap" }, { "name": "defaultOptions", "comment": " Default options for the loaded texture.\n\n { magnify = linear\n , minify = nearestMipmapLinear\n , horizontalWrap = repeat\n , verticalWrap = repeat\n , flipY = True\n }\n", "type": "Options" }, { "name": "linear", "comment": " Returns the weighted average of the four texture elements that are closest\nto the center of the pixel being textured.\n", "type": "Resize a" }, { "name": "linearMipmapLinear", "comment": " Chooses the two mipmaps that most closely match the size of the pixel being\ntextured and uses the `linear` criterion (a weighted average of the four\ntexture elements that are closest to the center of the pixel) to produce a\ntexture value from each mipmap. The final texture value is a weighted average\nof those two values.\n", "type": "Resize Smaller" }, { "name": "linearMipmapNearest", "comment": " Chooses the mipmap that most closely matches the size of the pixel being\ntextured and uses the `linear` criterion (a weighted average of the four\ntexture elements that are closest to the center of the pixel) to produce a\ntexture value.\n", "type": "Resize Smaller" }, { "name": "load", "comment": " Loads a texture from the given url with default options.\nPNG and JPEG are known to work, but other formats have not been as\nwell-tested yet.\n\nThe Y axis of the texture is flipped automatically for you, so it has\nthe same direction as in the clip-space, i.e. pointing up.\n\nIf you need to change flipping, filtering or wrapping, you can use\n[`loadWith`](#loadWith).\n\n load url =\n loadWith defaultOptions url\n\n", "type": "String -> Task Error Texture" }, { "name": "loadWith", "comment": " Same as load, but allows to set options.\n", "type": "Options -> String -> Task Error Texture" }, { "name": "mirroredRepeat", "comment": " Causes the coordinate c to be set to the fractional part of the texture\ncoordinate if the integer part is even; if the integer part is odd, then\nthe coordinate is set to 1 - frac, where frac represents the fractional part\nof the coordinate.\n", "type": "Wrap" }, { "name": "nearest", "comment": " Returns the value of the texture element that is nearest\n(in Manhattan distance) to the center of the pixel being textured.\n", "type": "Resize a" }, { "name": "nearestMipmapLinear", "comment": " Chooses the two mipmaps that most closely match the size of the pixel being\ntextured and uses the `nearest` criterion (the texture element nearest to the\ncenter of the pixel) to produce a texture value from each mipmap. The final\ntexture value is a weighted average of those two values.\n", "type": "Resize Smaller" }, { "name": "nearestMipmapNearest", "comment": " Chooses the mipmap that most closely matches the size of the pixel being\ntextured and uses the `nearest` criterion (the texture element nearest to\nthe center of the pixel) to produce a texture value.\n\nA mipmap is an ordered set of arrays representing the same image at\nprogressively lower resolutions.\n\nThis is the default value of the minify filter.\n", "type": "Resize Smaller" }, { "name": "nonPowerOfTwoOptions", "comment": " The exact options needed to load textures with weird shapes.\nIf your image width or height is not a power of two, you need these\noptions:\n\n { magnify = linear\n , minify = nearest\n , horizontalWrap = clampToEdge\n , verticalWrap = clampToEdge\n , flipY = True\n }\n", "type": "Options" }, { "name": "repeat", "comment": " Causes the integer part of the coordinate to be ignored. This is the\ndefault value for both texture axis.\n", "type": "Wrap" }, { "name": "size", "comment": " Return the (width, height) size of a texture. Useful for sprite sheets\nor other times you may want to use only a potion of a texture image.\n", "type": "Texture -> ( Int, Int )" } ], "binops": [] }, { "name": "WebGL", "comment": " The WebGL API is for high performance rendering. Definitely read about\n[how WebGL works](http://package.elm-lang.org/packages/elm-community/webgl/latest)\nand look at [some examples](https://github.com/elm-community/webgl/tree/master/examples)\nbefore trying to do too much with just the documentation provided here.\n\n# Mesh\n@docs Mesh, triangles\n\n# Shaders\n@docs Shader, Texture\n\n# Entities\n@docs Entity, entity\n\n# WebGL Html\n@docs toHtml\n\n# Advanced Usage\n@docs entityWith, toHtmlWith, Option, alpha, depth, stencil, antialias,\n clearColor\n\n# Meshes\n@docs indexedTriangles, lines, lineStrip, lineLoop, points, triangleFan,\n triangleStrip\n\n# Unsafe Shader Creation (for library writers)\n@docs unsafeShader\n", "unions": [ { "name": "Entity", "comment": " Conceptually, an encapsulation of the instructions to render something.\n", "args": [], "cases": [] }, { "name": "Mesh", "comment": " Mesh forms geometry from the specified vertices. Each vertex contains a\nbunch of attributes, defined as a custom record type, e.g.:\n\n type alias Attributes =\n { position : Vec3\n , color : Vec3\n }\n\nThe supported types in attributes are: `Int`, `Float`, `WebGL.Texture`\nand `Vec2`, `Vec3`, `Vec4`, `Mat4` from the\n[linear-algebra](http://package.elm-lang.org/packages/elm-community/linear-algebra/latest)\npackage.\n\nDo not generate meshes in `view`, [read more about this here](http://package.elm-lang.org/packages/elm-community/webgl/latest#making-the-most-of-the-gpu).\n", "args": [ "attributes" ], "cases": [] }, { "name": "Option", "comment": " Provides a way to enable features and change the scene behavior\nin [`toHtmlWith`](#toHtmlWith).\n", "args": [], "cases": [] }, { "name": "Shader", "comment": " Shaders are programs for running many computations on the GPU in parallel.\nThey are written in a language called\n[GLSL](http://en.wikipedia.org/wiki/OpenGL_Shading_Language). Read more about\nshaders [here](https://github.com/elm-community/webgl/blob/master/README.md).\n\nNormally you specify a shader with a `glsl[| |]` block. Elm compiler will parse\nthe shader code block and derive the type signature for your shader.\n\n* `attributes` define vertices in the [mesh](#Mesh);\n* `uniforms` allow you to pass scene parameters like\n transformation matrix, texture, screen size, etc.;\n* `varyings` define the output from the vertex shader.\n\n`attributes`, `uniforms` and `varyings` are records with the fields of the\nfollowing types: `Int`, `Float`, [`Texture`](#Texture) and `Vec2`, `Vec3`, `Vec4`,\n`Mat4` from the\n[linear-algebra](http://package.elm-lang.org/packages/elm-community/linear-algebra/latest)\npackage.\n", "args": [ "attributes", "uniforms", "varyings" ], "cases": [] }, { "name": "Texture", "comment": " Use `Texture` to pass the `sampler2D` uniform value to the shader. Find\nmore about textures in [`WebGL.Texture`](WebGL-Texture).\n", "args": [], "cases": [] } ], "aliases": [], "values": [ { "name": "alpha", "comment": " Enable alpha channel in the drawing buffer. If the argument is `True`, then\nthe page compositor will assume the drawing buffer contains colors with\npremultiplied alpha `(r * a, g * a, b * a, a)`.\n", "type": "Bool -> Option" }, { "name": "antialias", "comment": " Enable multisample antialiasing of the drawing buffer, if supported by\nthe platform. Useful when you need to have smooth lines and smooth edges of\ntriangles at a lower cost than supersampling (rendering to larger dimensions and\nthen scaling down with CSS transform).\n", "type": "Option" }, { "name": "clearColor", "comment": " Set the red, green, blue and alpha channels, that will be used to\nfill the drawing buffer every time before drawing the scene. The values are\nclamped between 0 and 1. The default is all 0's.\n", "type": "Float -> Float -> Float -> Float -> Option" }, { "name": "depth", "comment": " Enable the depth buffer, and prefill it with given value each time before\nthe scene is rendered. The value is clamped between 0 and 1.\n", "type": "Float -> Option" }, { "name": "entity", "comment": " Packages a vertex shader, a fragment shader, a mesh, and uniforms\nas an `Entity`. This specifies a full rendering pipeline to be run\non the GPU. You can read more about the pipeline\n[here](https://github.com/elm-community/webgl/blob/master/README.md).\n\nThe vertex shader receives `attributes` and `uniforms` and returns `varyings`\nand `gl_Position`—the position of the vertex on the screen, defined as\n`vec4(x, y, z, w)`, that means `(x/w, y/w, z/w)` in the clip space coordinates:\n\n -- (-1,1,1) +================+ (1,1,1)\n -- /| /|\n -- / | | / |\n --(-1,1,-1)+================+ (1,1,-1)\n -- | | | / | |\n -- | | |/ | |\n -- | | +-------|->|\n -- (-1,-1,1|) +--(0,0,0)----|--+ (1,-1,1)\n -- | / | /\n -- |/ |/\n -- +================+\n -- (-1,-1,-1) (1,-1,-1)\n\nThe fragment shader is called for each pixel inside the clip space with\n`varyings` and `uniforms` and returns `gl_FragColor`—the color of\nthe pixel, defined as `vec4(r, g, b, a)` where each color component is a float\nfrom 0 to 1.\n\nShaders and a mesh are cached so that they do not get resent to the GPU.\nIt should be relatively cheap to create new entities out of existing\nvalues.\n\nBy default, [depth test](WebGL-Settings-DepthTest#default) is enabled for you.\nIf you need more [settings](WebGL-Settings), like\n[blending](WebGL-Settings-Blend) or [stencil test](WebG-Settings-StencilTest),\nthen use [`entityWith`](#entityWith).\n\n entity =\n entityWith [ DepthTest.default ]\n", "type": "Shader attributes uniforms varyings -> Shader {} uniforms varyings -> Mesh attributes -> uniforms -> Entity" }, { "name": "entityWith", "comment": " The same as [`entity`](#entity), but allows to configure an entity with\n[settings](WebGL-Settings).\n", "type": "List Setting -> Shader attributes uniforms varyings -> Shader {} uniforms varyings -> Mesh attributes -> uniforms -> Entity" }, { "name": "indexedTriangles", "comment": " Create triangles from vertices and indices, grouped in sets of three to\ndefine each triangle by refering the vertices.\n\nThis helps to avoid duplicated vertices whenever two triangles share an\nedge. For example, if you want to define a rectangle using\n[`triangles`](#triangles), `v0` and `v2` will have to be duplicated:\n\n -- v2 +---+ v1\n -- |\\ |\n -- | \\ |\n -- | \\|\n -- v3 +---+ v0\n\n rectangle =\n triangles [(v0, v1, v2), (v2, v3, v0)]\n\nThis will use two vertices less:\n\n rectangle =\n indexedTriangles [v0, v1, v2, v3] [(0, 1, 2), (2, 3, 0)]\n", "type": "List attributes -> List ( Int, Int, Int ) -> Mesh attributes" }, { "name": "lineLoop", "comment": " Similar to [`lineStrip`](#lineStrip), but connects the last vertex back to\nthe first.\n", "type": "List attributes -> Mesh attributes" }, { "name": "lineStrip", "comment": " Connects each two subsequent vertices with a line.\n", "type": "List attributes -> Mesh attributes" }, { "name": "lines", "comment": " Connects each pair of vertices with a line.\n", "type": "List ( attributes, attributes ) -> Mesh attributes" }, { "name": "points", "comment": " Draws a single dot per vertex.\n", "type": "List attributes -> Mesh attributes" }, { "name": "stencil", "comment": " Enable the stencil buffer, specifying the index used to fill the\nstencil buffer before we render the scene. The index is masked with 2^m - 1,\nwhere m >= 8 is the number of bits in the stencil buffer. The default is 0.\n", "type": "Int -> Option" }, { "name": "toHtml", "comment": " Render a WebGL scene with the given html attributes, and entities.\n\n`width` and `height` html attributes resize the drawing buffer, while\nthe corresponding css properties scale the canvas element.\n\nTo prevent blurriness on retina screens, you may want the drawing buffer \nto be twice the size of the canvas element.\n\nTo remove an extra whitespace around the canvas, set `display: block`.\n\nBy default, alpha channel with premultiplied alpha, antialias and depth buffer\nare enabled. Use [`toHtmlWith`](#toHtmlWith) for custom options.\n\n toHtml =\n toHtmlWith [ alpha True, antialias, depth 1 ]\n", "type": "List (Attribute msg) -> List Entity -> Html msg" }, { "name": "toHtmlWith", "comment": " Render a WebGL scene with the given options, html attributes, and entities.\n\nDue to browser limitations, options will be applied only once,\nwhen the canvas is created for the first time.\n", "type": "List Option -> List (Attribute msg) -> List Entity -> Html msg" }, { "name": "triangleFan", "comment": " Similar to [`triangleStrip`](#triangleStrip), but creates a fan shaped\noutput.\n", "type": "List attributes -> Mesh attributes" }, { "name": "triangleStrip", "comment": " Creates a strip of triangles where each additional vertex creates an\nadditional triangle once the first three vertices have been drawn.\n", "type": "List attributes -> Mesh attributes" }, { "name": "triangles", "comment": " Triangles are the basic building blocks of a mesh. You can put them together\nto form any shape.\n\nSo when you create `triangles` you are really providing three sets of attributes\nthat describe the corners of each triangle.\n", "type": "List ( attributes, attributes, attributes ) -> Mesh attributes" }, { "name": "unsafeShader", "comment": " Creates a shader with a raw string of GLSL. It is intended specifically\nfor library writers, who want to create shader combinators.\n", "type": "String -> Shader attributes uniforms varyings" } ], "binops": [] }, { "name": "WebGL.Settings.DepthTest", "comment": " You can read more about depth-testing in the\n[OpenGL wiki](https://www.khronos.org/opengl/wiki/Depth_Test)\nor [OpenGL docs](https://www.opengl.org/sdk/docs/man2/xhtml/glDepthFunc.xml).\n\n# Depth Test\n@docs default\n\n# Custom Tests\n@docs Options, less, never, always, equal, greater, notEqual,\n lessOrEqual, greaterOrEqual\n", "unions": [], "aliases": [ { "name": "Options", "comment": " When rendering, you have a buffer of pixels. Depth-testing works by\ncreating a second buffer with exactly the same number of entries, but\ninstead of holding colors, each entry holds the distance from the camera.\nYou go through all your entities, writing into the depth buffer, and then\nyou draw the color of the “winner”.\n\nWhich color wins? This is based on a bunch of comparison functions:\n\n less options -- value < depth\n never options -- Never pass\n always options -- Always pass\n equal options -- value == depth\n greater options -- value > depth\n notEqual options -- value != depth\n lessOrEqual options -- value <= depth\n greaterOrEqual options -- value >= depth\n\nIf the test passes, the current value will be written into the depth buffer, so\nthe next pixels will be tested against it. Sometimes you may want to disable\nwriting. For example, when using depth test together with stencil test to create\n[reflection effect](https://open.gl/depthstencils) you want to draw the\nreflection *underneath* the floor, in this case you set `write = False`\nwhen drawing the floor. The\n[crate example](https://github.com/elm-community/webgl/blob/master/examples/crate.elm)\nshows how to do it in Elm.\n\n`near` and `far` allow to allocate a portion of the depth range from 0 to 1.\nFor example, if you want to render GUI on top of the scene, you can\nset `near = 0.1, far = 1` for the scene and then render the GUI with\n`near = 0, far = 0.1`.\n", "args": [], "type": "{ write : Bool, near : Float, far : Float }" } ], "values": [ { "name": "always", "comment": " ", "type": "Options -> Setting" }, { "name": "default", "comment": " With every pixel, we have to figure out which color to show.\n\nImagine you have many entities in the same line of sight. The floor,\nthen a table, then a plate. When depth-testing is off, you go through\nthe entities in the order they appear in your *code*! That means if\nyou describe the floor last, it will be “on top” of the table and plate.\n\nDepth-testing means the color is chosen based on the distance from the\ncamera. So `default` uses the color closest to the camera. This means\nthe plate will be on top of the table, and both are on top of the floor.\nSeems more reasonable!\n\nThere are a bunch of ways you can customize the depth test, shown later,\nand you can use them to define `default` like this:\n\n default =\n less { write = True, near = 0, far = 1 }\n\nRequires [`WebGL.depth`](WebGL#depth) option in\n[`toHtmlWith`](WebGL#toHtmlWith).\n\n", "type": "Setting" }, { "name": "equal", "comment": " ", "type": "Options -> Setting" }, { "name": "greater", "comment": " ", "type": "Options -> Setting" }, { "name": "greaterOrEqual", "comment": " ", "type": "Options -> Setting" }, { "name": "less", "comment": " ", "type": "Options -> Setting" }, { "name": "lessOrEqual", "comment": " ", "type": "Options -> Setting" }, { "name": "never", "comment": " ", "type": "Options -> Setting" }, { "name": "notEqual", "comment": " ", "type": "Options -> Setting" } ], "binops": [] }, { "name": "WebGL.Settings.StencilTest", "comment": " You can read more about stencil-testing in the\n[OpenGL wiki](https://www.khronos.org/opengl/wiki/Stencil_Test)\nor [OpenGL docs](https://www.opengl.org/sdk/docs/man2/xhtml/glStencilFunc.xml).\n\n# Stencil Test\n@docs test\n\n## Tests\n@docs Test, always, equal, never, less, greater, notEqual,\n lessOrEqual, greaterOrEqual\n\n## Operations\n@docs Operation, replace, keep, zero, increment, decrement, invert,\n incrementWrap, decrementWrap\n\n# Separate Test\n@docs testSeparate\n", "unions": [ { "name": "Operation", "comment": " Defines how to update the value in the stencil buffer.\n", "args": [], "cases": [] }, { "name": "Test", "comment": " The `Test` allows you to define how to compare the reference value\nwith the stencil buffer value, in order to set the conditions under which\nthe pixel will be drawn.\n\n always -- Always pass\n equal -- ref & mask == stencil & mask\n never -- Never pass\n less -- ref & mask < stencil & mask\n greater -- ref & mask > stencil & mask\n notEqual -- ref & mask != stencil & mask\n lessOrEqual -- ref & mask <= stencil & mask\n greaterOrEqual -- ref & mask >= stencil & mask\n", "args": [], "cases": [] } ], "aliases": [], "values": [ { "name": "always", "comment": " ", "type": "Test" }, { "name": "decrement", "comment": " Decrements the current stencil buffer value. Clamps to 0.\n", "type": "Operation" }, { "name": "decrementWrap", "comment": " Decrements the current stencil buffer value.\nWraps stencil buffer value to the maximum representable unsigned\nvalue when decrementing a stencil buffer value of zero.\n", "type": "Operation" }, { "name": "equal", "comment": " ", "type": "Test" }, { "name": "greater", "comment": " ", "type": "Test" }, { "name": "greaterOrEqual", "comment": " ", "type": "Test" }, { "name": "increment", "comment": " Increments the current stencil buffer value. Clamps to the maximum\nrepresentable unsigned value.\n", "type": "Operation" }, { "name": "incrementWrap", "comment": " Increments the current stencil buffer value. Wraps stencil buffer value to\nzero when incrementing the maximum representable unsigned value.\n", "type": "Operation" }, { "name": "invert", "comment": " Bitwise inverts the current stencil buffer value.\n", "type": "Operation" }, { "name": "keep", "comment": " Keeps the current stencil buffer value. Use this as a noop.\n", "type": "Operation" }, { "name": "less", "comment": " ", "type": "Test" }, { "name": "lessOrEqual", "comment": " ", "type": "Test" }, { "name": "never", "comment": " ", "type": "Test" }, { "name": "notEqual", "comment": " ", "type": "Test" }, { "name": "replace", "comment": " Sets the stencil buffer value to `ref` from the stencil test.\n", "type": "Operation" }, { "name": "test", "comment": " When you need to draw an intercection of two entities, e.g. a reflection in\nthe mirror, you can test against the stencil buffer, that has to be enabled\nwith [`stencil`](WebGL#stencil) option in [`toHtmlWith`](WebGL#toHtmlWith).\n\nStencil test decides if the pixel should be drawn on the screen.\nDepending on the results, it performs one of the following\n[operations](#Operation) on the stencil buffer:\n\n* `fail`—the operation to use when the stencil test fails;\n* `zfail`—the operation to use when the stencil test passes, but the depth\n test fails;\n* `zpass`—the operation to use when both the stencil test and the depth test\n pass, or when the stencil test passes and there is no depth buffer or depth\n testing is disabled.\n\nFor example, draw the mirror `Entity` on the screen and fill the stencil buffer\nwith all 1's:\n\n test\n { ref = 1\n , mask = 0xFF\n , test = always -- pass for each pixel\n , fail = keep -- noop\n , zfail = keep -- noop\n , zpass = replace -- write ref to the stencil buffer\n , writeMask = 0xFF -- enable all stencil bits for writing\n }\n\nCrop the reflection `Entity` using the values from the stencil buffer:\n\n test\n { ref = 1\n , mask = 0xFF\n , test = equal -- pass when the stencil value is equal to ref = 1\n , fail = keep -- noop\n , zfail = keep -- noop\n , zpass = keep -- noop\n , writeMask = 0 -- disable writing to the stencil buffer\n }\n\nYou can see the complete example\n[here](https://github.com/elm-community/webgl/blob/master/examples/crate.elm).\n", "type": "{ ref : Int, mask : Int, test : Test, fail : Operation, zfail : Operation, zpass : Operation, writeMask : Int } -> Setting" }, { "name": "testSeparate", "comment": " Different options for front and back facing polygons.\n", "type": "{ ref : Int, mask : Int, writeMask : Int } -> { test : Test, fail : Operation, zfail : Operation, zpass : Operation } -> { test : Test, fail : Operation, zfail : Operation, zpass : Operation } -> Setting" }, { "name": "zero", "comment": " Sets the stencil buffer value to 0.\n", "type": "Operation" } ], "binops": [] }, { "name": "WebGL.Settings.Blend", "comment": "\n# Blenders\n@docs add, subtract, reverseSubtract\n\n# Blend Factors\n@docs Factor, zero, one, srcColor, oneMinusSrcColor, dstColor,\n oneMinusDstColor, srcAlpha, oneMinusSrcAlpha, dstAlpha,\n oneMinusDstAlpha, srcAlphaSaturate\n\n# Custom Blenders\n@docs custom, Blender, customAdd, customSubtract, customReverseSubtract,\n constantColor, oneMinusConstantColor, constantAlpha,\n oneMinusConstantAlpha\n", "unions": [ { "name": "Blender", "comment": " A `Blender` mixes the color of the current `Entity` (the source color)\nwith whatever is behind it (the destination color).\nYou can get a feel for all the options [here](https://threejs.org/examples/webgl_materials_blending_custom.html).\n", "args": [], "cases": [] }, { "name": "Factor", "comment": " ", "args": [], "cases": [] } ], "aliases": [], "values": [ { "name": "add", "comment": " Add the color of the current `Renderable` (the source color)\nwith whatever is behind it (the destination color). For example,\nhere is the “default” blender:\n\n add one zero\n\nThe resulting color will be `(src * 1) + (dest * 0)`, which means\nwe do not use the destination color at all!\nYou can get a feel for all the different blending factors\n[here](https://threejs.org/examples/webgl_materials_blending_custom.html).\n", "type": "Factor -> Factor -> Setting" }, { "name": "constantAlpha", "comment": " ", "type": "Factor" }, { "name": "constantColor", "comment": " This uses the constant `r`, `g`, `b`, and `a` values\ngiven to [`custom`](#custom). If you use this `Factor` with\n[`add`](#add), the constant color will default to black.\n\nBecause of\n[restriction in WebGL](https://www.khronos.org/registry/webgl/specs/latest/1.0/#6.13),\nyou cannot create a `Blender`, that has one factor set to\n`constantColor` or `oneMinusConstantColor` and another set to\n`constantAlpha` or `oneMinusConstantAlpha`.\n", "type": "Factor" }, { "name": "custom", "comment": " It is possible to do some very fancy blending with\n`custom`. For example, you can blend the color value and\nthe alpha values separately:\n\n myBlender : Float -> Setting\n myBlender alpha =\n custom\n { r = 0\n , g = 0\n , b = 0\n , a = alpha\n , color = customAdd one zero\n , alpha = customAdd one constantAlpha\n }\n", "type": "{ r : Float, g : Float, b : Float, a : Float, color : Blender, alpha : Blender } -> Setting" }, { "name": "customAdd", "comment": " ", "type": "Factor -> Factor -> Blender" }, { "name": "customReverseSubtract", "comment": " ", "type": "Factor -> Factor -> Blender" }, { "name": "customSubtract", "comment": " ", "type": "Factor -> Factor -> Blender" }, { "name": "dstAlpha", "comment": " ", "type": "Factor" }, { "name": "dstColor", "comment": " ", "type": "Factor" }, { "name": "one", "comment": " ", "type": "Factor" }, { "name": "oneMinusConstantAlpha", "comment": " ", "type": "Factor" }, { "name": "oneMinusConstantColor", "comment": " ", "type": "Factor" }, { "name": "oneMinusDstAlpha", "comment": " ", "type": "Factor" }, { "name": "oneMinusDstColor", "comment": " ", "type": "Factor" }, { "name": "oneMinusSrcAlpha", "comment": " ", "type": "Factor" }, { "name": "oneMinusSrcColor", "comment": " ", "type": "Factor" }, { "name": "reverseSubtract", "comment": " Similar to [`add`](#add), but it does `(dest * factor2) - (src * factor1)`.\nThis one is weird.\n", "type": "Factor -> Factor -> Setting" }, { "name": "srcAlpha", "comment": " ", "type": "Factor" }, { "name": "srcAlphaSaturate", "comment": " ", "type": "Factor" }, { "name": "srcColor", "comment": " ", "type": "Factor" }, { "name": "subtract", "comment": " Similar to [`add`](#add), but it does `(src * factor1) - (dest * factor2)`.\nFor example:\n\n subtract one one\n\nThis would do `(src * 1) - (dest * 1)` so you would take away colors\nbased on the background.\n", "type": "Factor -> Factor -> Setting" }, { "name": "zero", "comment": " ", "type": "Factor" } ], "binops": [] }, { "name": "WebGL.Settings", "comment": " # Settings\n@docs Setting, scissor, colorMask, polygonOffset, sampleAlphaToCoverage,\n sampleCoverage, cullFace\n\n## Face Modes\n@docs FaceMode, front, back, frontAndBack\n", "unions": [ { "name": "FaceMode", "comment": " Targets the polygons based on their facing.\n", "args": [], "cases": [] } ], "aliases": [ { "name": "Setting", "comment": " Lets you customize how an [`Entity`](WebGL#Entity) is rendered. So if you\nonly want to see the red part of your entity, you would use\n[`entityWith`](WebGL#entityWith) and [`colorMask`](#colorMask) to say:\n\n entityWith [colorMask True False False False]\n vertShader fragShader mesh uniforms\n\n -- vertShader : Shader attributes uniforms varyings\n -- fragShader : Shader {} uniforms varyings\n -- mesh : Mesh attributes\n -- uniforms : uniforms\n\n", "args": [], "type": "Setting" } ], "values": [ { "name": "back", "comment": " ", "type": "FaceMode" }, { "name": "colorMask", "comment": " Specify whether or not each channel (red, green, blue, alpha) should be\noutput on the screen.\n", "type": "Bool -> Bool -> Bool -> Bool -> Setting" }, { "name": "cullFace", "comment": " Excludes polygons based on winding (the order of the vertices) in window\ncoordinates. Polygons with counter-clock-wise winding are front-facing.\n", "type": "FaceMode -> Setting" }, { "name": "front", "comment": " ", "type": "FaceMode" }, { "name": "frontAndBack", "comment": " ", "type": "FaceMode" }, { "name": "polygonOffset", "comment": " When you want to draw the highlighting wireframe on top of the solid\nobject, the lines may fade in and out of the coincident polygons,\nwhich is sometimes called \"stitching\" and is visually unpleasant.\n\n[Polygon Offset](http://www.glprogramming.com/red/chapter06.html#name4)\nhelps to avoid \"stitching\" by adding an offset to pixel’s depth\nvalues before the depth test is performed and before the value is written\ninto the depth buffer.\n\n polygonOffset factor units\n\nThis adds an `offset = m * factor + r * units`, where\n\n* `m = max (dz / dx) (dz / dy)` is the maximum depth slope of the polygon.\n The depth slope is the change in `z` (depth) values divided by the change in\n either `x` or `y` coordinates, as you traverse a polygon;\n* `r` is the smallest value guaranteed to produce a resolvable difference in\n window coordinate depth values. The value `r` is an implementation-specific\n constant.\n\nThe question is: \"How much offset is enough?\". It really depends on the slope.\nFor polygons that are parallel to the near and far clipping planes,\nthe depth slope is zero, so the minimum offset is needed:\n\n polygonOffset 0 1\n\nFor polygons that are at a great angle to the clipping planes, the depth slope\ncan be significantly greater than zero. Use small non-zero values for factor,\nsuch as `0.75` or `1.0` should be enough to generate distinct depth values:\n\n polygonOffset 0.75 1\n", "type": "Float -> Float -> Setting" }, { "name": "sampleAlphaToCoverage", "comment": " When you render overlapping transparent entities, like grass or hair, you\nmay notice that alpha blending doesn’t really work with depth testing, because\ndepth test ignores transparency.\n[Alpha To Coverage](http://wiki.polycount.com/wiki/Transparency_map#Alpha_To_Coverage)\nis a way to address this issue without sorting transparent entities.\n\nIt works by computing a temporary coverage value, where each bit is determined\nby the alpha value at the corresponding sample location. The temporary coverage\nvalue is then ANDed with the fragment coverage value.\n\nRequires [`WebGL.antialias`](WebGL#antialias) option.\n", "type": "Setting" }, { "name": "sampleCoverage", "comment": " Specifies multisample coverage parameters. The fragment's coverage is ANDed\nwith the temporary coverage value.\n\n* the first argument specifies sample coverage value, that is clamped to the\n range from 0 to 1;\n* the second argument represents if the coverage masks should be inverted.\n\nRequires [`WebGL.antialias`](WebGL#antialias) option.\n", "type": "Float -> Bool -> Setting" }, { "name": "scissor", "comment": " Set the scissor box, which limits the drawing of fragments to the\nscreen to a specified rectangle.\n\nThe arguments are the coordinates of the lower left corner, width and height.\n", "type": "Int -> Int -> Int -> Int -> Setting" } ], "binops": [] } ]