Skip to content

Commit 4964e99

Browse files
evanwevanw
committed
added test cases
1 parent f246f83 commit 4964e99

File tree

7 files changed

+328
-270
lines changed

7 files changed

+328
-270
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ Example usage:
1717
# Demos
1818

1919
* [All CSG operations](http://evanw.github.com/csg.js/)
20-
* [Coplanar polygon test cases](http://evanw.github.com/csg.js/coplanar.html)
20+
* [Coplanar test cases](http://evanw.github.com/csg.js/coplanar.html)
21+
* [More test cases](http://evanw.github.com/csg.js/more.html)
2122

2223
# Implementation Details
2324

‎tests/coplanar.html‎

Lines changed: 5 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html><head>
33
<script src="lightgl.js"></script>
44
<script src="../csg.js"></script>
5+
<script src="viewer.js"></script>
56
<style>
67

78
body {
@@ -24,7 +25,7 @@
2425
h1, h2 { font: bold 50px/50px 'Helvetica Neue', Helvetica, Arial; }
2526
h2 { font-size: 30px; margin: 100px 0 0 0; }
2627
a { color: inherit; }
27-
.viewer { width: 200px; height: 200px; background: #EEE; }
28+
.viewer { width: 250px; height: 250px; background: #EEE; }
2829
table { border-collapse: collapse; margin: 0 auto; }
2930
td { padding: 5px; text-align: center; }
3031
td code { background: none; border: none; color: inherit; }
@@ -37,7 +38,7 @@ <h1>csg.js</h1>
3738
<b>Documentation:</b> <a href="http://evanw.github.com/csg.js/docs/">http://evanw.github.com/csg.js/docs/</a></p>
3839

3940
<h2>Coplanar Test Cases</h2>
40-
<p>These tests cover all the cases of overlapping coplanar polygons in both solids. To avoid duplicate polygons, the overlapping polygons are kept in the first solid and removed from the second solid.</p>
41+
<p>These tests cover all the cases of a pair of overlapping coplanar polygons in both solids. To avoid duplicate polygons, the overlapping polygons are kept in the first solid and removed from the second solid.</p>
4142
<table>
4243
<tr>
4344
<td><div id="0" class="viewer"></div><code>a</code></td>
@@ -85,137 +86,6 @@ <h2>Coplanar Test Cases</h2>
8586

8687
<script>
8788

88-
// Set the color of all polygons in this solid
89-
CSG.prototype.setColor = function(r, g, b) {
90-
this.toPolygons().map(function(polygon) {
91-
polygon.shared = [r, g, b];
92-
});
93-
};
94-
95-
// Convert from CSG solid to GL.Mesh object
96-
CSG.prototype.toMesh = function() {
97-
var mesh = new GL.Mesh({ normals: true, colors: true });
98-
var indexer = new GL.Indexer();
99-
this.toPolygons().map(function(polygon) {
100-
var indices = polygon.vertices.map(function(vertex) {
101-
vertex.color = polygon.shared;
102-
return indexer.add(vertex);
103-
});
104-
for (var i = 2; i < indices.length; i++) {
105-
mesh.triangles.push([indices[0], indices[i - 1], indices[i]]);
106-
}
107-
});
108-
mesh.vertices = indexer.unique.map(function(v) { return [v.pos.x, v.pos.y, v.pos.z]; });
109-
mesh.normals = indexer.unique.map(function(v) { return [v.normal.x, v.normal.y, v.normal.z]; });
110-
mesh.colors = indexer.unique.map(function(v) { return v.color; });
111-
mesh.computeWireframe();
112-
return mesh;
113-
};
114-
115-
var angleX = 20;
116-
var angleY = 20;
117-
var viewers = [];
118-
119-
// A viewer is a WebGL canvas that lets the user view a mesh. The user can
120-
// tumble it around by dragging the mouse.
121-
function Viewer(csg, width, height, depth) {
122-
viewers.push(this);
123-
124-
// Get a new WebGL canvas
125-
var gl = GL.create();
126-
this.gl = gl;
127-
this.mesh = csg.toMesh();
128-
129-
// Set up the viewport
130-
gl.canvas.width = width;
131-
gl.canvas.height = height;
132-
gl.viewport(0, 0, width, height);
133-
gl.matrixMode(gl.PROJECTION);
134-
gl.loadIdentity();
135-
gl.perspective(45, width / height, 0.1, 100);
136-
gl.matrixMode(gl.MODELVIEW);
137-
138-
// Set up WebGL state
139-
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
140-
gl.clearColor(0.93, 0.93, 0.93, 1);
141-
gl.enable(gl.DEPTH_TEST);
142-
gl.enable(gl.CULL_FACE);
143-
gl.polygonOffset(1, 1);
144-
145-
// Black shader for wireframe
146-
this.blackShader = new GL.Shader('\
147-
void main() {\
148-
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
149-
}\
150-
', '\
151-
void main() {\
152-
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.3);\
153-
}\
154-
');
155-
156-
// Shader with diffuse and specular lighting
157-
this.lightingShader = new GL.Shader('\
158-
varying vec3 color;\
159-
varying vec3 normal;\
160-
varying vec3 light;\
161-
void main() {\
162-
const vec3 lightDir = vec3(1.0, 2.0, 3.0) / 3.741657386773941;\
163-
light = (gl_ModelViewMatrix * vec4(lightDir, 0.0)).xyz;\
164-
color = gl_Color.rgb;\
165-
normal = gl_NormalMatrix * gl_Normal;\
166-
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
167-
}\
168-
', '\
169-
varying vec3 color;\
170-
varying vec3 normal;\
171-
varying vec3 light;\
172-
void main() {\
173-
vec3 n = normalize(normal);\
174-
float diffuse = max(0.0, dot(light, n));\
175-
float specular = pow(max(0.0, -reflect(light, n).z), 32.0) * sqrt(diffuse);\
176-
gl_FragColor = vec4(mix(color * (0.3 + 0.7 * diffuse), vec3(1.0), specular), 1.0);\
177-
}\
178-
');
179-
180-
gl.onmousemove = function(e) {
181-
if (e.dragging) {
182-
angleY += e.deltaX * 2;
183-
angleX += e.deltaY * 2;
184-
angleX = Math.max(-90, Math.min(90, angleX));
185-
186-
viewers.map(function(viewer) {
187-
viewer.gl.ondraw();
188-
});
189-
}
190-
};
191-
192-
var that = this;
193-
gl.ondraw = function() {
194-
gl.makeCurrent();
195-
196-
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
197-
gl.loadIdentity();
198-
gl.translate(0, 0, -depth);
199-
gl.rotate(angleX, 1, 0, 0);
200-
gl.rotate(angleY, 0, 1, 0);
201-
202-
gl.enable(gl.POLYGON_OFFSET_FILL);
203-
that.lightingShader.draw(that.mesh, gl.TRIANGLES);
204-
gl.disable(gl.POLYGON_OFFSET_FILL);
205-
206-
gl.enable(gl.BLEND);
207-
that.blackShader.draw(that.mesh, gl.LINES);
208-
gl.disable(gl.BLEND);
209-
};
210-
211-
gl.ondraw();
212-
}
213-
214-
var nextID = 0;
215-
function addViewer(viewer) {
216-
document.getElementById(nextID++).appendChild(viewer.gl.canvas);
217-
}
218-
21989
// Test all coplanar cases
22090
var a = CSG.cube();
22191
var b = CSG.cylinder({ slices: 8, start: new CSG.Vector(-1, 0, 0), end: new CSG.Vector(1, 0, 0) });
@@ -254,8 +124,9 @@ <h2>Coplanar Test Cases</h2>
254124
c.intersect(d),
255125
d.intersect(c)
256126
];
127+
Viewer.lineOverlay = true;
257128
for (var i = 0; i < operations.length; i++) {
258-
addViewer(new Viewer(operations[i], 200, 200, 6));
129+
addViewer(new Viewer(operations[i], 250, 250, 5));
259130
}
260131

261132
</script>

‎tests/gourd.js‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/index.html‎

Lines changed: 4 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html><head>
33
<script src="lightgl.js"></script>
44
<script src="../csg.js"></script>
5+
<script src="viewer.js"></script>
56
<style>
67

78
body {
@@ -104,146 +105,14 @@ <h2>Try it!</h2>
104105
<p>Edit the code below to construct your own solids. A browser with WebGL is required to view the results. The <code>setColor(r, g, b)</code> function sets the color of the solid using values between 0 and 1 (just for display, not part of csg.js):</p>
105106
<textarea id="tryit">var a = CSG.cube();
106107
var b = CSG.sphere({ radius: 1.35 });
107-
a.setColor(1, 0, 0);
108-
b.setColor(0, 0, 1);
108+
a.setColor(1, 1, 0);
109+
b.setColor(0, 0.5, 1);
109110
return a.subtract(b);
110111
</textarea>
111112
<p id="error"></p>
112113

113114
<script>
114115

115-
// Set the color of all polygons in this solid
116-
CSG.prototype.setColor = function(r, g, b) {
117-
this.toPolygons().map(function(polygon) {
118-
polygon.shared = [r, g, b];
119-
});
120-
return this;
121-
};
122-
123-
// Convert from CSG solid to GL.Mesh object
124-
CSG.prototype.toMesh = function() {
125-
var mesh = new GL.Mesh({ normals: true, colors: true });
126-
var indexer = new GL.Indexer();
127-
this.toPolygons().map(function(polygon) {
128-
var indices = polygon.vertices.map(function(vertex) {
129-
vertex.color = polygon.shared || [1, 1, 1];
130-
return indexer.add(vertex);
131-
});
132-
for (var i = 2; i < indices.length; i++) {
133-
mesh.triangles.push([indices[0], indices[i - 1], indices[i]]);
134-
}
135-
});
136-
mesh.vertices = indexer.unique.map(function(v) { return [v.pos.x, v.pos.y, v.pos.z]; });
137-
mesh.normals = indexer.unique.map(function(v) { return [v.normal.x, v.normal.y, v.normal.z]; });
138-
mesh.colors = indexer.unique.map(function(v) { return v.color; });
139-
mesh.computeWireframe();
140-
return mesh;
141-
};
142-
143-
var angleX = 20;
144-
var angleY = 20;
145-
var viewers = [];
146-
147-
// A viewer is a WebGL canvas that lets the user view a mesh. The user can
148-
// tumble it around by dragging the mouse.
149-
function Viewer(csg, width, height, depth) {
150-
viewers.push(this);
151-
152-
// Get a new WebGL canvas
153-
var gl = GL.create();
154-
this.gl = gl;
155-
this.mesh = csg.toMesh();
156-
157-
// Set up the viewport
158-
gl.canvas.width = width;
159-
gl.canvas.height = height;
160-
gl.viewport(0, 0, width, height);
161-
gl.matrixMode(gl.PROJECTION);
162-
gl.loadIdentity();
163-
gl.perspective(45, width / height, 0.1, 100);
164-
gl.matrixMode(gl.MODELVIEW);
165-
166-
// Set up WebGL state
167-
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
168-
gl.clearColor(0.93, 0.93, 0.93, 1);
169-
gl.enable(gl.DEPTH_TEST);
170-
gl.enable(gl.CULL_FACE);
171-
gl.polygonOffset(1, 1);
172-
173-
// Black shader for wireframe
174-
this.blackShader = new GL.Shader('\
175-
void main() {\
176-
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
177-
}\
178-
', '\
179-
void main() {\
180-
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.3);\
181-
}\
182-
');
183-
184-
// Shader with diffuse and specular lighting
185-
this.lightingShader = new GL.Shader('\
186-
varying vec3 color;\
187-
varying vec3 normal;\
188-
varying vec3 light;\
189-
void main() {\
190-
const vec3 lightDir = vec3(1.0, 2.0, 3.0) / 3.741657386773941;\
191-
light = (gl_ModelViewMatrix * vec4(lightDir, 0.0)).xyz;\
192-
color = gl_Color.rgb;\
193-
normal = gl_NormalMatrix * gl_Normal;\
194-
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
195-
}\
196-
', '\
197-
varying vec3 color;\
198-
varying vec3 normal;\
199-
varying vec3 light;\
200-
void main() {\
201-
vec3 n = normalize(normal);\
202-
float diffuse = max(0.0, dot(light, n));\
203-
float specular = pow(max(0.0, -reflect(light, n).z), 32.0) * sqrt(diffuse);\
204-
gl_FragColor = vec4(mix(color * (0.3 + 0.7 * diffuse), vec3(1.0), specular), 1.0);\
205-
}\
206-
');
207-
208-
gl.onmousemove = function(e) {
209-
if (e.dragging) {
210-
angleY += e.deltaX * 2;
211-
angleX += e.deltaY * 2;
212-
angleX = Math.max(-90, Math.min(90, angleX));
213-
214-
viewers.map(function(viewer) {
215-
viewer.gl.ondraw();
216-
});
217-
}
218-
};
219-
220-
var that = this;
221-
gl.ondraw = function() {
222-
gl.makeCurrent();
223-
224-
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
225-
gl.loadIdentity();
226-
gl.translate(0, 0, -depth);
227-
gl.rotate(angleX, 1, 0, 0);
228-
gl.rotate(angleY, 0, 1, 0);
229-
230-
gl.enable(gl.POLYGON_OFFSET_FILL);
231-
that.lightingShader.draw(that.mesh, gl.TRIANGLES);
232-
gl.disable(gl.POLYGON_OFFSET_FILL);
233-
234-
gl.enable(gl.BLEND);
235-
that.blackShader.draw(that.mesh, gl.LINES);
236-
gl.disable(gl.BLEND);
237-
};
238-
239-
gl.ondraw();
240-
}
241-
242-
var nextID = 0;
243-
function addViewer(viewer) {
244-
document.getElementById(nextID++).appendChild(viewer.gl.canvas);
245-
}
246-
247116
// Test simple cases
248117
var a = CSG.cube({ center: [-0.25, -0.25, -0.25] });
249118
var b = CSG.sphere({ radius: 1.3, center: [0.25, 0.25, 0.25] });
@@ -302,7 +171,7 @@ <h2>Try it!</h2>
302171
}
303172
tryit.onkeydown = function() {
304173
if (timeout) clearTimeout(timeout);
305-
timeout = setTimeout(rebuild, 100);
174+
timeout = setTimeout(rebuild, 250);
306175
};
307176
rebuild();
308177

0 commit comments

Comments
 (0)