git.iko.soy/elk
on master help sign in
Merge pull request #610 from johnpmayer/webgl

Webgl

commit82b7c0f17f2597d03d0592b179329a983f39c30d authorEvan Czaplicki <info@elm-lang.org> dateThu 1 May 2014, 22:52 (13 years ago) parentb080f8d99c1139
2 files changed+212−18
compare with master
unifiedsplit
libraries/Graphics/WebGL.elm+38−9 libraries/MJS.elm+174−9
libraries/Graphics/WebGL.elm+38−9
@@ -1,4 +1,4 @@
1−module Graphics.WebGL (mapTriangle, zipTriangle, loadTex, model, webgl) where
1+module Graphics.WebGL (Triangle, Shader, mapTriangle, zipTriangle, unsafeCoerceGLSL, loadTex, model, webgl) where
22
33{-| The WebGL API is for high performance drawing.
44
@@ -6,18 +6,37 @@ module Graphics.WebGL (mapTriangle, zipTriangle, loadTex, model, webgl) where
66@docs Triangle, mapTriangle, zipTriangle
77
88# Shaders
9−Shaders are created using glsl blocks.
9+@docs Shader
1010
11−vertex : Shader { a | pos : V3 } {} {}
11+Shaders are created using inline GLSL blocks. The type of the Shader is determined by the top-level attribute, uniform, and varying declarations of the parsed GLSL source code. The type parameters to Shader are records with field names matching the names of the declarations.
12+
13+```haskell
14+vertex : Shader { a | pos : V3 } { b | model : M4x4 } {}
1215vertex = [glsl|
1316
1417attribute vec3 pos;
18+uniform mat4 model;
1519
1620void main () {
17− gl_Position = vec4(pos,1.0);
21+ gl_Position = model * vec4(pos,1.0);
1822}
1923
20−|]
24+\]
25+```
26+
27+GLSL attribute variables are per-vertex values. For example, it could hold the position or color of a specific vertex of a specific triangle in your model.
28+
29+GLSL uniform variables are global values which will be applied for all vertices of all triangles of the model.
30+
31+GLSL varying variables are shared between stages; they are output variables for vertex shaders, and input variables for fragment shaders.
32+
33+@docs unsafeCoerceGLSL
34+
35+# Loading Textures
36+@docs loadTex
37+
38+# Packaging Models
39+@docs model
2140
2241# WebGL Element
2342@docs webgl
@@ -29,28 +48,38 @@ import Http (Response)
2948import Native.Graphics.WebGL
3049import Signal (Signal)
3150
32−unsafeCoerceGLSL : String -> Shader attr unif vary
33−unsafeCoerceGLSL = Native.Graphics.WebGL.unsafeCoerceGLSL
34−
51+{-| Triangles are only homogenous 3-tuples. Each element describes something about each vertex, and must be a record to be used with GLSL shaders.
52+-}
3553type Triangle a = (a,a,a)
3654
55+{-| Apply a function to each vertex -}
3756mapTriangle : (a -> b) -> Triangle a -> Triangle b
3857mapTriangle f (x,y,z) = (f x, f y, f z)
3958
59+{-| Apply an arity-2 function element-wise on 2 triangles -}
4060zipTriangle : (a -> b -> c) -> Triangle a -> Triangle b -> Triangle c
4161zipTriangle f (x,y,z) (x',y',z') = (f x x', f y y', f z z')
4262
4363data Shader attr unif vary = Shader
4464
65+{-| Libary writers can use this function to create shader combinators. -}
66+unsafeCoerceGLSL : String -> Shader attribute uniform varying
67+unsafeCoerceGLSL = Native.Graphics.WebGL.unsafeCoerceGLSL
68+
4569data Texture = Texture
4670
71+{-| Loads a texture from the given url. PNG and JPEG are the preferred and tested-compatible source image format. -}
4772loadTex : String -> Signal (Response Texture)
4873loadTex = Native.Graphics.WebGL.loadTex
4974
5075data Model = Model
5176
52−model : Shader attr unif vary -> Shader {} unif vary -> [Triangle attr] -> unif -> Model
77+{-| Packages a vertex shader, a fragment shader, triangle data, and uniform variables as a opaque Model.
78+This is a simple container; however, externally there is no type information.
79+-}
80+model : Shader attribute uniform varying -> Shader {} uniform varying -> [Triangle attribute] -> uniform -> Model
5381model = Native.Graphics.WebGL.model
5482
83+{-| Render a WebGL scene with the given dimensions and models -}
5584webgl : (Int,Int) -> [Model] -> Element
5685webgl = Native.Graphics.WebGL.webgl
libraries/MJS.elm+174−9
@@ -8,6 +8,30 @@ and use with Graphics.WebGL.
88
99Both vectors and matrices are immutable.
1010
11+# Constructing and Destructing Vectors
12+
13+@docs v3, toTuple3
14+
15+# Vector Math
16+
17+@docs add, sub, neg, direction, length, lengthSquared, normalize, scale
18+
19+# Vector Operations
20+
21+@docs dot, cross, mul4x4
22+
23+Matrix operations
24+
25+@docs identity, inverseOrthonormal, mul, mulAffine, transpose, makeBasis
26+
27+Matrix projections
28+
29+@docs makeFrustrum, makePerspective, makeOrtho, makeOrtho2D, makeLookAt
30+
31+Matrix transforms
32+
33+@docs makeRotate, rotate, makeScale3, makeScale, scaleM3, scaleM, makeTranslate3, makeTranslate, translate3, translate
34+
1135-}
1236
1337import Native.MJS
@@ -15,115 +39,256 @@ import Native.MJS
1539data V2 = V2
1640data V3 = V3
1741data V4 = V4
18−data M4x4 = M4x4
1942
43+{-|
44+Creates a new 3-element vector with the given values
45+-}
2046v3 : Float -> Float -> Float -> V3
2147v3 = Native.MJS.v3
2248
49+{-|
50+Convert to a native tuple
51+-}
2352toTuple3 : V3 -> (Float,Float,Float)
2453toTuple3 = Native.MJS.toTuple3
2554
55+{-|
56+Vector addition: a + b
57+-}
2658add : V3 -> V3 -> V3
2759add = Native.MJS.v3add
2860
61+{-|
62+Vector subtraction: a - b
63+-}
2964sub : V3 -> V3 -> V3
3065sub = Native.MJS.v3sub
3166
67+{-|
68+Vector negation: -a
69+-}
3270neg : V3 -> V3
3371neg = Native.MJS.v3neg
3472
35−{- The normalized direction from v1 to v2 -}
73+{-|
74+The normalized direction from a to b: (a - b) / |a - b|
75+-}
3676direction : V3 -> V3 -> V3
3777direction = Native.MJS.v3direction
3878
79+{-|
80+The length of the given vector: |a|
81+-}
3982length : V3 -> Float
4083length = Native.MJS.v3length
4184
85+{-|
86+The square of the length of the given vector: |a|*|a|
87+-}
4288lengthSquared : V3 -> Float
4389lengthSquared = Native.MJS.v3lengthSquared
4490
91+{-|
92+A unit vector with the same direction as the given vector: a / |a|
93+-}
4594normalize : V3 -> V3
4695normalize = Native.MJS.v3normalize
4796
97+{-|
98+Multiply the vector by a scalar: a * k
99+-}
48100scale : V3 -> Float -> V3
49101scale = Native.MJS.v3scale
50102
103+{-|
104+The dot product of a and b
105+-}
51106dot : V3 -> V3 -> Float
52107dot = Native.MJS.v3dot
53108
109+{-|
110+The cross product of a and b
111+-}
54112cross : V3 -> V3 -> V3
55113cross = Native.MJS.v3cross
56114
115+{-|
116+Methods for working with 4x4 matrices.
117+-}
118+data M4x4 = M4x4
119+
120+{-|
121+Multiple the vector by the 4x4 matrix: m * v
122+-}
57123mul4x4 : M4x4 -> V3 -> V3
58124mul4x4 = Native.MJS.v3mul4x4
59125
60−--m4x4 : V3[16] -> M4x4 ?
61−
126+{-|
127+A matrix with all 0s, except 1s on the diagonal
128+-}
62129identity : M4x4
63130identity = Native.MJS.m4x4identity
64131
65−--topLeft3x3 : M4x4 -> M3x3 ?
66−
67−{- Assumes that m is orthonormal -}
132+{-|
133+Computes the inverse of the given matrix m, assuming that
134+the matrix is orthonormal
135+-}
68136inverseOrthonormal : M4x4 -> M4x4
69137inverseOrthonormal = Native.MJS.m4x4inverseOrthonormal
70138
71−--inverseTo3x3 : M4x4 -> M3x3 ?
139+{-|
140+Creates a matrix for a projection frustum with the given parameters.
141+
142+Parameters:
72143
144+ left - the left coordinate of the frustum
145+ right- the right coordinate of the frustum
146+ bottom - the bottom coordinate of the frustum
147+ top - the top coordinate of the frustum
148+ znear - the near z distance of the frustum
149+ zfar - the far z distance of the frustum
150+-}
73151makeFrustrum : Float -> Float -> Float -> Float -> Float -> Float -> Float -> M4x4
74152makeFrustrum = Native.MJS.m4x4makeFrustrum
75153
154+{-|
155+Creates a matrix for a perspective projection with the given parameters.
156+
157+Parameters:
158+
159+ fovy - field of view in the y axis, in degrees
160+ aspect - aspect ratio
161+ znear - the near z distance of the projection
162+ zfar - the far z distance of the projection
163+-}
76164makePerspective : Float -> Float -> Float -> Float -> M4x4
77165makePerspective = Native.MJS.m4x4makePerspective
78166
167+{-|
168+Creates a matrix for an orthogonal frustum projection with the given parameters.
169+
170+Parameters:
171+
172+ left - the left coordinate of the frustum
173+ right- the right coordinate of the frustum
174+ bottom - the bottom coordinate of the frustum
175+ top - the top coordinate of the frustum
176+ znear - the near z distance of the frustum
177+ zfar - the far z distance of the frustum
178+-}
79179makeOrtho : Float -> Float -> Float -> Float -> Float -> Float -> Float -> M4x4
80180makeOrtho = Native.MJS.m4x4makeOrtho
81181
182+{-|
183+Creates a matrix for a 2D orthogonal frustum projection with the given parameters.
184+znear and zfar are assumed to be -1 and 1, respectively.
185+
186+Parameters:
187+
188+ left - the left coordinate of the frustum
189+ right- the right coordinate of the frustum
190+ bottom - the bottom coordinate of the frustum
191+ top - the top coordinate of the frustum
192+-}
82193makeOrtho2D : Float -> Float -> Float -> Float -> M4x4
83194makeOrtho2D = Native.MJS.m4x4makeOrtho2D
84195
196+{-|
197+Matrix multiplcation: a * b
198+-}
85199mul : M4x4 -> M4x4 -> M4x4
86200mul = Native.MJS.m4x4mul
87201
202+{-|
203+Matrix multiplication, assuming a and b are affine: a * b
204+-}
88205mulAffine : M4x4 -> M4x4 -> M4x4
89206mulAffine = Native.MJS.m4x4mulAffine
90207
208+{-|
209+Creates a transformation matrix for rotation by angle radians about the 3-element vector axis.
210+-}
91211makeRotate : Float -> V3 -> M4x4
92212makeRotate = Native.MJS.m4x4makeRotate
93213
214+{-|
215+Concatenates a rotation of angle radians about the axis to the given matrix.
216+-}
94217rotate : Float -> V3 -> M4x4 -> M4x4
95218rotate = Native.MJS.m4x4rotate
96219
220+{-|
221+Creates a transformation matrix for scaling by 3 scalar values, one for
222+each of the x, y, and z directions.
223+-}
97224makeScale3 : Float -> Float -> Float -> M4x4
98225makeScale3 = Native.MJS.m4x4makeScale3
99226
227+{-|
228+Creates a transformation matrix for scaling each of the x, y, and z axes by the amount
229+given in the corresponding element of the 3-element vector.
230+-}
100231makeScale : V3 -> M4x4
101232makeScale = Native.MJS.m4x4makeScale
102233
234+{-|
235+Concatenates a scaling to the given matrix.
236+-}
103237scaleM3 : Float -> Float -> Float -> M4x4 -> M4x4
104238scaleM3 = Native.MJS.m4x4scale3
105239
240+{-|
241+Concatenates a scaling to the given matrix.
242+-}
106243scaleM : V3 -> M4x4 -> M4x4
107244scaleM = Native.MJS.m4x4scale
108245
246+{-|
247+Creates a transformation matrix for translating by 3 scalar values, one for
248+each of the x, y, and z directions.
249+-}
109250makeTranslate3 : Float -> Float -> Float -> M4x4
110251makeTranslate3 = Native.MJS.m4x4makeTranslate3
111252
253+{-|
254+Creates a transformation matrix for translating each of the x, y, and z axes by the amount
255+given in the corresponding element of the 3-element vector.
256+-}
112257makeTranslate : V3 -> M4x4
113258makeTranslate = Native.MJS.m4x4makeTranslate
114259
260+{-|
261+Concatenates a translation to the given matrix.
262+-}
115263translate3 : Float -> Float -> Float -> M4x4 -> M4x4
116264translate3 = Native.MJS.m4x4translate3
117265
266+{-|
267+Concatenates a translation to the given matrix.
268+-}
118269translate : V3 -> M4x4 -> M4x4
119270translate = Native.MJS.m4x4translate
120271
272+{-|
273+Creates a transformation matrix for a camera.
274+
275+Parameters:
276+
277+ eye - The location of the camera
278+ center - The location of the focused object
279+ up - The "up" direction according to the camera
280+-}
121281makeLookAt : V3 -> V3 -> V3 -> M4x4
122282makeLookAt = Native.MJS.m4x4makeLookAt
123283
284+{-|
285+"Flip" the matrix across the diagonal by swapping row index and column index.
286+-}
124287transpose : M4x4 -> M4x4
125288transpose = Native.MJS.m4x4transpose
126289
127−{- Custom constructor for supplying arbitrary x,y,z axis -}
290+{-|
291+Creates a transform from a basis consisting of 3 linearly independent vectors.
292+-}
128293makeBasis : V3 -> V3 -> V3 -> M4x4
129294makeBasis = Native.MJS.m4x4makeBasis