Skip to content

Commit e986778

Browse files
davepagurekdavepagurek
authored
Merge pull request #7390 from perminder-17/webgl-line
Adding strokeMode() to access SIMPLE lines.
2 parents be504ea + 9b34110 commit e986778

11 files changed

+342
-221
lines changed

‎src/core/constants.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,18 @@ export const WEBGL2 = Symbol('webgl2');
6060
* @final
6161
*/
6262
export const ARROW = 'default';
63+
64+
/**
65+
* @property {String} SIMPLE
66+
* @final
67+
*/
68+
export const SIMPLE = 'simple';
69+
/**
70+
* @property {String} FULL
71+
* @final
72+
*/
73+
export const FULL = 'full';
74+
6375
/**
6476
* @typedef {'crosshair'} CROSS
6577
* @property {CROSS} CROSS
@@ -1318,4 +1330,4 @@ export const HALF_FLOAT = 'half-float';
13181330
* @property {RGBA} RGBA
13191331
* @final
13201332
*/
1321-
export const RGBA = 'rgba';
1333+
export const RGBA = 'rgba';

‎src/webgl/3d_primitives.js

+119-21
Original file line numberDiff line numberDiff line change
@@ -520,6 +520,93 @@ function primitives3D(p5, fn){
520520
return this._renderer.endGeometry();
521521
};
522522

523+
524+
/**
525+
* Sets the stroke rendering mode to balance performance and visual features when drawing lines.
526+
*
527+
* `strokeMode()` offers two modes:
528+
*
529+
* - `SIMPLE`: Optimizes for speed by disabling caps, joins, and stroke color features.
530+
* Use this mode for faster line rendering when these visual details are unnecessary.
531+
* - `FULL`: Enables caps, joins, and stroke color for lines.
532+
* This mode provides enhanced visuals but may reduce performance due to additional processing.
533+
*
534+
* Choose the mode that best suits your application's needs to either improve rendering speed or enhance visual quality.
535+
*
536+
* @method strokeMode
537+
* @param {string} mode - The stroke mode to set. Possible values are:
538+
* - `'SIMPLE'`: Fast rendering without caps, joins, or stroke color.
539+
* - `'FULL'`: Detailed rendering with caps, joins, and stroke color.
540+
*
541+
* @example
542+
* <div>
543+
* <code>
544+
* function setup() {
545+
* createCanvas(300, 300, WEBGL);
546+
*
547+
* describe('A sphere with red stroke and a red, wavy line on a gray background.');
548+
* }
549+
*
550+
* function draw() {
551+
* background(128);
552+
* strokeMode(FULL); // Enables detailed rendering with caps, joins, and stroke color.
553+
* push();
554+
* strokeWeight(1);
555+
* translate(0, -50, 0);
556+
* sphere(50);
557+
* pop();
558+
*
559+
* noFill();
560+
* strokeWeight(15);
561+
* beginShape();
562+
* vertex(-150, 100);
563+
* stroke('red');
564+
* bezierVertex(-50, -100, 30, 300, 130, 50);
565+
* endShape();
566+
* }
567+
* </code>
568+
* </div>
569+
*
570+
* <div>
571+
* <code>
572+
* function setup() {
573+
* createCanvas(300, 300, WEBGL);
574+
*
575+
* describe('A sphere with red stroke and a wavy line without full curve decorations without caps and color on a gray background.');
576+
* }
577+
*
578+
* function draw() {
579+
* background(128);
580+
* strokeMode(SIMPLE); // Enables simple rendering without caps, joins, and stroke color.
581+
* push();
582+
* strokeWeight(1);
583+
* translate(0, -50, 0);
584+
* sphere(50);
585+
* pop();
586+
*
587+
* noFill();
588+
* strokeWeight(15);
589+
* beginShape();
590+
* vertex(-150, 100);
591+
* stroke('red');
592+
* bezierVertex(-50, -100, 30, 300, 130, 50);
593+
* endShape();
594+
* }
595+
* </code>
596+
* </div>
597+
*/
598+
599+
fn.strokeMode = function (mode) {
600+
if (mode === undefined) {
601+
return this._renderer._simpleLines ? constants.SIMPLE : constants.FULL;
602+
} else if (mode === constants.SIMPLE) {
603+
this._renderer._simpleLines = true;
604+
} else if (mode === constants.FULL) {
605+
this._renderer._simpleLines = false;
606+
} else {
607+
throw Error('no such parameter');
608+
}
609+
}
523610
/**
524611
* Creates a custom <a href="#/p5.Geometry">p5.Geometry</a> object from
525612
* simpler 3D shapes.
@@ -2109,7 +2196,7 @@ function primitives3D(p5, fn){
21092196
this.faces = [[0, 1, 2]];
21102197
this.uvs = [0, 0, 1, 0, 1, 1];
21112198
};
2112-
const triGeom = new Geometry(1, 1, _triangle);
2199+
const triGeom = new Geometry(1, 1, _triangle, this);
21132200
triGeom._edgesToVertices();
21142201
triGeom.computeNormals();
21152202
triGeom.gid = gid;
@@ -2245,7 +2332,7 @@ function primitives3D(p5, fn){
22452332
}
22462333
};
22472334

2248-
const arcGeom = new Geometry(detail, 1, _arc);
2335+
const arcGeom = new Geometry(detail, 1, _arc, this);
22492336
arcGeom.computeNormals();
22502337

22512338
if (detail <= 50) {
@@ -2308,7 +2395,7 @@ function primitives3D(p5, fn){
23082395
];
23092396
}
23102397
};
2311-
const rectGeom = new Geometry(detailX, detailY, _rect);
2398+
const rectGeom = new Geometry(detailX, detailY, _rect, this);
23122399
rectGeom
23132400
.computeFaces()
23142401
.computeNormals()
@@ -2440,7 +2527,7 @@ function primitives3D(p5, fn){
24402527
this.uvs.push([pctx, pcty]);
24412528
}
24422529
}
2443-
});
2530+
}, this);
24442531

24452532
quadGeom.faces = [];
24462533
for(let y = 0; y < detailY-1; y++){
@@ -3362,7 +3449,7 @@ function primitives3D(p5, fn){
33623449
}
33633450
}
33643451
};
3365-
const planeGeom = new Geometry(detailX, detailY, _plane);
3452+
const planeGeom = new Geometry(detailX, detailY, _plane, this);
33663453
planeGeom.computeFaces().computeNormals();
33673454
if (detailX <= 1 && detailY <= 1) {
33683455
planeGeom._makeTriangleEdges()._edgesToVertices();
@@ -3442,7 +3529,7 @@ function primitives3D(p5, fn){
34423529
this.faces.push([v + 2, v + 1, v + 3]);
34433530
});
34443531
};
3445-
const boxGeom = new Geometry(detailX, detailY, _box);
3532+
const boxGeom = new Geometry(detailX, detailY, _box, this);
34463533
boxGeom.computeNormals();
34473534
if (detailX <= 4 && detailY <= 4) {
34483535
boxGeom._edgesToVertices();
@@ -3498,7 +3585,7 @@ function primitives3D(p5, fn){
34983585
}
34993586
}
35003587
};
3501-
const ellipsoidGeom = new Geometry(detailX, detailY, _ellipsoid);
3588+
const ellipsoidGeom = new Geometry(detailX, detailY, _ellipsoid, this);
35023589
ellipsoidGeom.computeFaces();
35033590
if (detailX <= 24 && detailY <= 24) {
35043591
ellipsoidGeom._makeTriangleEdges()._edgesToVertices();
@@ -3525,17 +3612,18 @@ function primitives3D(p5, fn){
35253612
) {
35263613
const gid = `cylinder|${detailX}|${detailY}|${bottomCap}|${topCap}`;
35273614
if (!this.geometryInHash(gid)) {
3528-
const cylinderGeom = new p5.Geometry(detailX, detailY);
3529-
_truncatedCone.call(
3530-
cylinderGeom,
3531-
1,
3532-
1,
3533-
1,
3534-
detailX,
3535-
detailY,
3536-
bottomCap,
3537-
topCap
3538-
);
3615+
const cylinderGeom = new p5.Geometry(detailX, detailY, function() {
3616+
_truncatedCone.call(
3617+
this,
3618+
1,
3619+
1,
3620+
1,
3621+
detailX,
3622+
detailY,
3623+
bottomCap,
3624+
topCap
3625+
);
3626+
}, this);
35393627
// normals are computed in call to _truncatedCone
35403628
if (detailX <= 24 && detailY <= 16) {
35413629
cylinderGeom._makeTriangleEdges()._edgesToVertices();
@@ -3561,8 +3649,18 @@ function primitives3D(p5, fn){
35613649
) {
35623650
const gid = `cone|${detailX}|${detailY}|${cap}`;
35633651
if (!this.geometryInHash(gid)) {
3564-
const coneGeom = new Geometry(detailX, detailY);
3565-
_truncatedCone.call(coneGeom, 1, 0, 1, detailX, detailY, cap, false);
3652+
const coneGeom = new Geometry(detailX, detailY, function() {
3653+
_truncatedCone.call(
3654+
this,
3655+
1,
3656+
0,
3657+
1,
3658+
detailX,
3659+
detailY,
3660+
cap,
3661+
false
3662+
);
3663+
}, this);
35663664
if (detailX <= 24 && detailY <= 16) {
35673665
coneGeom._makeTriangleEdges()._edgesToVertices();
35683666
} else if (this.states.doStroke) {
@@ -3624,7 +3722,7 @@ function primitives3D(p5, fn){
36243722
}
36253723
}
36263724
};
3627-
const torusGeom = new Geometry(detailX, detailY, _torus);
3725+
const torusGeom = new Geometry(detailX, detailY, _torus, this);
36283726
torusGeom.computeFaces();
36293727
if (detailX <= 24 && detailY <= 16) {
36303728
torusGeom._makeTriangleEdges()._edgesToVertices();

‎src/webgl/GeometryBuilder.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class GeometryBuilder {
1313
renderer._pInst.push();
1414
this.identityMatrix = new Matrix();
1515
renderer.states.uModelMatrix = new Matrix();
16-
this.geometry = new Geometry();
16+
this.geometry = new Geometry(undefined, undefined, undefined, this.renderer);
1717
this.geometry.gid = `_p5_GeometryBuilder_${GeometryBuilder.nextGeometryId}`;
1818
GeometryBuilder.nextGeometryId++;
1919
this.hasTransform = false;

‎src/webgl/ShapeBuilder.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export class ShapeBuilder {
2121
constructor(renderer) {
2222
this.renderer = renderer;
2323
this.shapeMode = constants.TESS;
24-
this.geometry = new Geometry();
24+
this.geometry = new Geometry(undefined, undefined, undefined, this.renderer);
2525
this.geometry.gid = '__IMMEDIATE_MODE_GEOMETRY__';
2626

2727
this.contourIndices = [];

‎src/webgl/loading.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,7 @@ function loading(p5, fn){
377377
fileType = '.obj';
378378
}
379379

380-
const model = new Geometry();
380+
const model = new Geometry(undefined, undefined, undefined, this._renderer);
381381
model.gid = `${path}|${normalize}`;
382382

383383
async function getMaterials(lines) {

0 commit comments

Comments
 (0)