Skip to content

Commit e2b15db

Browse files
QianqianyeQianqianye
authored
Merge pull request #5830 from davepagurek/fix/tess-uvs
Handle vertex data in TESS mode
2 parents 27fb8d5 + b39ffa7 commit e2b15db

File tree

3 files changed

+229
-9
lines changed

3 files changed

+229
-9
lines changed

‎src/webgl/p5.RendererGL.Immediate.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -309,17 +309,36 @@ p5.RendererGL.prototype._calculateEdges = function(
309309
p5.RendererGL.prototype._tesselateShape = function() {
310310
this.immediateMode.shapeMode = constants.TRIANGLES;
311311
const contours = [
312-
new Float32Array(this._vToNArray(this.immediateMode.geometry.vertices))
312+
this._flatten(this.immediateMode.geometry.vertices.map((vert, i) => [
313+
vert.x,
314+
vert.y,
315+
vert.z,
316+
this.immediateMode.geometry.uvs[i * 2],
317+
this.immediateMode.geometry.uvs[i * 2 + 1],
318+
this.immediateMode.geometry.vertexColors[i * 4],
319+
this.immediateMode.geometry.vertexColors[i * 4 + 1],
320+
this.immediateMode.geometry.vertexColors[i * 4 + 2],
321+
this.immediateMode.geometry.vertexColors[i * 4 + 3],
322+
this.immediateMode.geometry.vertexNormals[i].x,
323+
this.immediateMode.geometry.vertexNormals[i].y,
324+
this.immediateMode.geometry.vertexNormals[i].z
325+
]))
313326
];
314327
const polyTriangles = this._triangulate(contours);
315328
this.immediateMode.geometry.vertices = [];
329+
this.immediateMode.geometry.vertexNormals = [];
330+
this.immediateMode.geometry.uvs = [];
331+
const colors = [];
316332
for (
317333
let j = 0, polyTriLength = polyTriangles.length;
318334
j < polyTriLength;
319-
j = j + 3
335+
j = j + 12
320336
) {
321-
this.vertex(polyTriangles[j], polyTriangles[j + 1], polyTriangles[j + 2]);
337+
colors.push(...polyTriangles.slice(j + 5, j + 9));
338+
this.normal(...polyTriangles.slice(j + 9, j + 12));
339+
this.vertex(...polyTriangles.slice(j, j + 5));
322340
}
341+
this.immediateMode.geometry.vertexColors = colors;
323342
};
324343

325344
/**

‎src/webgl/p5.RendererGL.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1435,9 +1435,9 @@ p5.prototype._assert3d = function(name) {
14351435
p5.RendererGL.prototype._initTessy = function initTesselator() {
14361436
// function called for each vertex of tesselator output
14371437
function vertexCallback(data, polyVertArray) {
1438-
polyVertArray[polyVertArray.length] = data[0];
1439-
polyVertArray[polyVertArray.length] = data[1];
1440-
polyVertArray[polyVertArray.length] = data[2];
1438+
for (let i = 0; i < data.length; i++) {
1439+
polyVertArray[polyVertArray.length] = data[i];
1440+
}
14411441
}
14421442

14431443
function begincallback(type) {
@@ -1452,7 +1452,14 @@ p5.RendererGL.prototype._initTessy = function initTesselator() {
14521452
}
14531453
// callback for when segments intersect and must be split
14541454
function combinecallback(coords, data, weight) {
1455-
return [coords[0], coords[1], coords[2]];
1455+
const result = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
1456+
for (let i = 0; i < weight.length; i++) {
1457+
for (let j = 0; j < result.length; j++) {
1458+
if (weight[i] === 0 || !data[i]) continue;
1459+
result[j] += data[i][j] * weight[i];
1460+
}
1461+
}
1462+
return result;
14561463
}
14571464

14581465
function edgeCallback(flag) {
@@ -1482,8 +1489,8 @@ p5.RendererGL.prototype._triangulate = function(contours) {
14821489
for (let i = 0; i < contours.length; i++) {
14831490
this._tessy.gluTessBeginContour();
14841491
const contour = contours[i];
1485-
for (let j = 0; j < contour.length; j += 3) {
1486-
const coords = [contour[j], contour[j + 1], contour[j + 2]];
1492+
for (let j = 0; j < contour.length; j += 12) {
1493+
const coords = contour.slice(j, j + 12);
14871494
this._tessy.gluTessVertex(coords, coords);
14881495
}
14891496
this._tessy.gluTessEndContour();

‎test/unit/webgl/p5.RendererGL.js‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -755,6 +755,200 @@ suite('p5.RendererGL', function() {
755755
assert.equal(renderer.immediateMode.geometry.edges.length, 10);
756756
done();
757757
});
758+
759+
test('TESS preserves vertex data', function(done) {
760+
var renderer = myp5.createCanvas(10, 10, myp5.WEBGL);
761+
762+
myp5.textureMode(myp5.NORMAL);
763+
renderer.beginShape(myp5.TESS);
764+
renderer.fill(255, 255, 255);
765+
renderer.normal(-1, -1, 1);
766+
renderer.vertex(-10, -10, 0, 0);
767+
renderer.fill(255, 0, 0);
768+
renderer.normal(1, -1, 1);
769+
renderer.vertex(10, -10, 1, 0);
770+
renderer.fill(0, 255, 0);
771+
renderer.normal(1, 1, 1);
772+
renderer.vertex(10, 10, 1, 1);
773+
renderer.fill(0, 0, 255);
774+
renderer.normal(-1, 1, 1);
775+
renderer.vertex(-10, 10, 0, 1);
776+
renderer.endShape(myp5.CLOSE);
777+
778+
assert.equal(renderer.immediateMode.geometry.vertices.length, 6);
779+
assert.deepEqual(
780+
renderer.immediateMode.geometry.vertices[0].array(),
781+
[10, -10, 0]
782+
);
783+
assert.deepEqual(
784+
renderer.immediateMode.geometry.vertices[1].array(),
785+
[-10, 10, 0]
786+
);
787+
assert.deepEqual(
788+
renderer.immediateMode.geometry.vertices[2].array(),
789+
[-10, -10, 0]
790+
);
791+
assert.deepEqual(
792+
renderer.immediateMode.geometry.vertices[3].array(),
793+
[-10, 10, 0]
794+
);
795+
assert.deepEqual(
796+
renderer.immediateMode.geometry.vertices[4].array(),
797+
[10, -10, 0]
798+
);
799+
assert.deepEqual(
800+
renderer.immediateMode.geometry.vertices[5].array(),
801+
[10, 10, 0]
802+
);
803+
804+
assert.equal(renderer.immediateMode.geometry.vertexNormals.length, 6);
805+
assert.deepEqual(
806+
renderer.immediateMode.geometry.vertexNormals[0].array(),
807+
[1, -1, 1]
808+
);
809+
assert.deepEqual(
810+
renderer.immediateMode.geometry.vertexNormals[1].array(),
811+
[-1, 1, 1]
812+
);
813+
assert.deepEqual(
814+
renderer.immediateMode.geometry.vertexNormals[2].array(),
815+
[-1, -1, 1]
816+
);
817+
assert.deepEqual(
818+
renderer.immediateMode.geometry.vertexNormals[3].array(),
819+
[-1, 1, 1]
820+
);
821+
assert.deepEqual(
822+
renderer.immediateMode.geometry.vertexNormals[4].array(),
823+
[1, -1, 1]
824+
);
825+
assert.deepEqual(
826+
renderer.immediateMode.geometry.vertexNormals[5].array(),
827+
[1, 1, 1]
828+
);
829+
830+
assert.deepEqual(renderer.immediateMode.geometry.vertexColors, [
831+
1, 0, 0, 1,
832+
0, 0, 1, 1,
833+
1, 1, 1, 1,
834+
0, 0, 1, 1,
835+
1, 0, 0, 1,
836+
0, 1, 0, 1
837+
]);
838+
839+
assert.deepEqual(renderer.immediateMode.geometry.uvs, [
840+
1, 0,
841+
0, 1,
842+
0, 0,
843+
0, 1,
844+
1, 0,
845+
1, 1
846+
]);
847+
848+
done();
849+
});
850+
851+
test('TESS interpolates vertex data at intersections', function(done) {
852+
var renderer = myp5.createCanvas(10, 10, myp5.WEBGL);
853+
854+
// Hourglass shape:
855+
//
856+
// 1 3
857+
// o o
858+
// | \ / |
859+
// | / \ |
860+
// o o
861+
// 4 2
862+
//
863+
// Tessy will add a vertex in the middle
864+
myp5.textureMode(myp5.NORMAL);
865+
renderer.beginShape(myp5.TESS);
866+
renderer.fill(255, 255, 255);
867+
renderer.normal(-1, -1, 1);
868+
renderer.vertex(-10, -10, 0, 0);
869+
renderer.fill(0, 255, 0);
870+
renderer.normal(1, 1, 1);
871+
renderer.vertex(10, 10, 1, 1);
872+
renderer.fill(255, 0, 0);
873+
renderer.normal(1, -1, 1);
874+
renderer.vertex(10, -10, 1, 0);
875+
renderer.fill(0, 0, 255);
876+
renderer.normal(-1, 1, 1);
877+
renderer.vertex(-10, 10, 0, 1);
878+
renderer.endShape(myp5.CLOSE);
879+
880+
assert.equal(renderer.immediateMode.geometry.vertices.length, 6);
881+
assert.deepEqual(
882+
renderer.immediateMode.geometry.vertices[0].array(),
883+
[0, 0, 0]
884+
);
885+
assert.deepEqual(
886+
renderer.immediateMode.geometry.vertices[1].array(),
887+
[-10, 10, 0]
888+
);
889+
assert.deepEqual(
890+
renderer.immediateMode.geometry.vertices[2].array(),
891+
[-10, -10, 0]
892+
);
893+
assert.deepEqual(
894+
renderer.immediateMode.geometry.vertices[3].array(),
895+
[10, 10, 0]
896+
);
897+
assert.deepEqual(
898+
renderer.immediateMode.geometry.vertices[4].array(),
899+
[0, 0, 0]
900+
);
901+
assert.deepEqual(
902+
renderer.immediateMode.geometry.vertices[5].array(),
903+
[10, -10, 0]
904+
);
905+
906+
assert.equal(renderer.immediateMode.geometry.vertexNormals.length, 6);
907+
assert.deepEqual(
908+
renderer.immediateMode.geometry.vertexNormals[0].array(),
909+
[0, 0, 1]
910+
);
911+
assert.deepEqual(
912+
renderer.immediateMode.geometry.vertexNormals[1].array(),
913+
[-1, 1, 1]
914+
);
915+
assert.deepEqual(
916+
renderer.immediateMode.geometry.vertexNormals[2].array(),
917+
[-1, -1, 1]
918+
);
919+
assert.deepEqual(
920+
renderer.immediateMode.geometry.vertexNormals[3].array(),
921+
[1, 1, 1]
922+
);
923+
assert.deepEqual(
924+
renderer.immediateMode.geometry.vertexNormals[4].array(),
925+
[0, 0, 1]
926+
);
927+
assert.deepEqual(
928+
renderer.immediateMode.geometry.vertexNormals[5].array(),
929+
[1, -1, 1]
930+
);
931+
932+
assert.deepEqual(renderer.immediateMode.geometry.vertexColors, [
933+
0.5, 0.5, 0.5, 1,
934+
0, 0, 1, 1,
935+
1, 1, 1, 1,
936+
0, 1, 0, 1,
937+
0.5, 0.5, 0.5, 1,
938+
1, 0, 0, 1
939+
]);
940+
941+
assert.deepEqual(renderer.immediateMode.geometry.uvs, [
942+
0.5, 0.5,
943+
0, 1,
944+
0, 0,
945+
1, 1,
946+
0.5, 0.5,
947+
1, 0
948+
]);
949+
950+
done();
951+
});
758952
});
759953

760954
suite('setAttributes', function() {

0 commit comments

Comments
 (0)