git.iko.soy/elk
on master help sign in
finished makeMesh (creating buffers). TODO draw function!
aacd30aJohn P Mayer Jr
libraries/Graphics/WebGL.elm+14−4
compare with master
unifiedsplit
@@ -5,17 +5,27 @@ module Graphics.WebGL where
5-}
5-}
6
6
7import Basics (Float)
7import Basics (Float)
8+import Signal (Signal)
8import MJS (V3,M4x4)
9import MJS (V3,M4x4)
9import Color (Color)
10import Color (Color)
10import Graphics.Element (Element)
11import Graphics.Element (Element)
11import Native.Graphics.WebGL
12import Native.Graphics.WebGL
12
13
14+data GLContext = Fake_GLContext
15+
16+glContext : Int -> Int -> Signal GLContext
17+glContext = Native.Graphics.WebGL.glContext
18+
13type GLPoint = { pos: V3, color: Color }
19type GLPoint = { pos: V3, color: Color }
14type GLTriangle = { a: GLPoint, b: GLPoint, c: GLPoint }
20type GLTriangle = { a: GLPoint, b: GLPoint, c: GLPoint }
15−type Model = [GLTriangle]
16
21
17−data Scene = Node M4x4 [Scene] | Leaf Model
22+data Mesh = Fake_Mesh
18
23
24+makeMesh : [GLTriangle] -> GLContext -> Mesh
25+makeMesh = Native.Graphics.WebGL.makeMesh
26+
27+data Scene = Node M4x4 [Scene] | Leaf Mesh
28+
19−glContext : Int -> Int -> Scene -> Element
29+renderGL : GLContext -> Scene -> Element
20−glContext = Native.Graphics.WebGL.glContext
30+renderGL = Native.Graphics.WebGL.renderGL
21
31
libraries/Native/Graphics/WebGL.js+90−19
@@ -9,11 +9,12 @@ Elm.Native.Graphics.WebGL.make = function(elm) {
9 //var Render = ElmRuntime.use(ElmRuntime.Render.Element);
9 //var Render = ElmRuntime.use(ElmRuntime.Render.Element);
10 var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
10 var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
11
11
12− //var Signal = Elm.Signal.make(elm);
12+ var Signal = Elm.Signal.make(elm);
13 var newElement = Elm.Graphics.Element.make(elm).newElement;
13 var newElement = Elm.Graphics.Element.make(elm).newElement;
14 //var JS = Elm.Native.JavaScript.make(elm);
14 //var JS = Elm.Native.JavaScript.make(elm);
15− //var Utils = Elm.Native.Utils.make(elm);
15+ var Utils = Elm.Native.Utils.make(elm);
16− //var Tuple2 = Utils.Tuple2;
16+ var Tuple2 = Utils.Tuple2;
17+ var MJS = Elm.Native.MJS.make(elm);
17
18
18 function createShader(gl, str, type) {
19 function createShader(gl, str, type) {
19 var shader = gl.createShader(type);
20 var shader = gl.createShader(type);
@@ -76,47 +77,117 @@ Elm.Native.Graphics.WebGL.make = function(elm) {
76 }"
77 }"
77
78
78 function drawGL(model) {
79 function drawGL(model) {
80+ var aspect = model.aspect;
81+
82+ var projectionMatrix = MJS.M4x4.makePerspective(45, aspect, 0.01, 100);
83+
84+ var eye = MJS.V3.$(0,0,1);
85+ var center = MJS.V3.$(0,0,0);
86+ var up = MJS.V3.$(0,1,0);
87+
88+ var viewMatrix = MJS.M4x4.makeLookAt(eye,center,up);
89+
90+ var modelMatrixStack = [MJS.M4x4.identity];
91+
92+ var gl = model.gl;
93+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
94+
79 var scene = model.scene;
95 var scene = model.scene;
80 console.log(scene);
96 console.log(scene);
97+
81 }
98 }
82
99
83 /*
100 /*
84 * Called for new node, caches lots of stuff
101 * Called for new node, caches lots of stuff
85 */
102 */
86 function render(model) {
103 function render(model) {
87− var canvas = newNode('canvas');
88− var gl = canvas.getContext("webgl");
89− var program = createProgram(gl, geoVert, geoFrag);
90− model.cache = {
91− gl: gl,
92− program: program,
93− };
94 drawGL(model);
104 drawGL(model);
95− return canvas;
105+ return model.node;
96 }
106 }
97
107
98 /*
108 /*
99 * Called at existing node
109 * Called at existing node
100 */
110 */
101 function update(canvasNode, oldModel, newModel) {
111 function update(canvasNode, oldModel, newModel) {
102− newModel.cache = oldModel.cache;
103 drawGL(newModel)
112 drawGL(newModel)
104 }
113 }
105
114
106− function glContext(w,h,scene) {
115+ function glContext(w,h) {
116+ var node = newNode('canvas');
117+ var gl = node.getContext('webgl');
118+ var program = createProgram(gl, geoVert, geoFrag);
119+ return Signal.constant({w:w,h:h,gl:gl,node:node,program:program});
120+ }
121+
122+ function makeMesh(triangles, context) {
123+ var indices = [];
124+ var positions = [];
125+ var colors = [];
126+
127+ function pushTriangle(n, node) {
128+ if (node.ctor === "[]") return;
129+ var tri = node._0;
130+ var names = ['a','b','c'];
131+ for (var i = 0; i < 3; i+= 1) {
132+ indices.push(3 * n + i);
133+ var vertex = tri[names[i]];
134+ for (var j = 0; j < 3; j += 1) {
135+ positions.push(vertex.pos[j]);
136+ }
137+ colors.push(vertex.color._0);
138+ colors.push(vertex.color._1);
139+ colors.push(vertex.color._2);
140+ colors.push(vertex.color._3);
141+ }
142+ pushTriangle(n+1,node._1);
143+ }
144+
145+ pushTriangle(0,triangles);
146+
147+ var gl = context.gl;
148+
149+ var indexBuffer = gl.createBuffer();
150+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
151+ gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
152+
153+ var vertexPosBuffer = gl.createBuffer();
154+ gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
155+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
156+
157+ var vertexColors = gl.createBuffer();
158+ gl.bindBuffer(gl.ARRAY_BUFFER, vertexColors);
159+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
160+
161+ return {
162+ indexBuffer:indexBuffer,
163+ vertexPosBuffer: vertexPosBuffer,
164+ vertexColors: vertexColors
165+ };
166+
167+ }
107
168
169+ function renderGL(context, scene) {
170+
108− return A3(newElement, w, h, {
171+ return A3(newElement, context.w, context.h, {
109 ctor: 'Custom',
172 ctor: 'Custom',
110− type: 'WebGL',
173+ type: 'WebGL',
111− render: render,
174+ render: render,
112− update: update,
175+ update: update,
176+ model: {
177+ aspect: context.w/context.h,
178+ node: context.node,
179+ gl: context.gl,
180+ program: context.program,
113− model: {scene:scene},
181+ scene: scene,
182+ },
114 });
183 });
115
184
116 }
185 }
117
186
118 return elm.Native.Graphics.WebGL.values = {
187 return elm.Native.Graphics.WebGL.values = {
119− glContext:F3(glContext),
188+ glContext:F2(glContext),
189+ makeMesh:F2(makeMesh),
190+ renderGL:F2(renderGL),
120 };
191 };
121
192
122};
193};
libraries/Native/MJS.js+3−1
@@ -1845,6 +1845,7 @@ Elm.Native.MJS.make = function(elm) {
1845 };
1845 };
1846
1846
1847 return {
1847 return {
1848+ V3: V3,
1848 v3: F3(V3.$),
1849 v3: F3(V3.$),
1849 v3clone: V3.clone,
1850 v3clone: V3.clone,
1850 v3add: F2(V3.add),
1851 v3add: F2(V3.add),
@@ -1861,6 +1862,7 @@ Elm.Native.MJS.make = function(elm) {
1861 /*
1862 /*
1862 m4x4: F16(M4x4.$),
1863 m4x4: F16(M4x4.$),
1863 */
1864 */
1865+ M4x4:M4x4,
1864 m4x4identity: M4x4.identity,
1866 m4x4identity: M4x4.identity,
1865 m4x4clone: M4x4.clone,
1867 m4x4clone: M4x4.clone,
1866 m4x4topLeft3x3: M4x4.topLeft3x3,
1868 m4x4topLeft3x3: M4x4.topLeft3x3,
@@ -1886,7 +1888,7 @@ Elm.Native.MJS.make = function(elm) {
1886 m4x4translate3: F4(M4x4.translate3),
1888 m4x4translate3: F4(M4x4.translate3),
1887 m4x4translate1: F2(M4x4.translate1),
1889 m4x4translate1: F2(M4x4.translate1),
1888 m4x4translate: F2(M4x4.translate),
1890 m4x4translate: F2(M4x4.translate),
1889− m4x4makeLookFt: F3(M4x4.makeLookFt),
1891+ m4x4makeLookFt: F3(M4x4.makeLookAt),
1890 m4x4transpose: M4x4.transpose,
1892 m4x4transpose: M4x4.transpose,
1891 m4x4transformPoint: F2(M4x4.transformPoint),
1893 m4x4transformPoint: F2(M4x4.transformPoint),
1892 /*
1894 /*