Skip to content

Commit

Permalink
changed 'setAttribute()' to 'vertexProperty()' and all references, va…
Browse files Browse the repository at this point in the history 
…riables & helpers to match
  • Loading branch information
@lukeplowden
lukeplowden committed Oct 1, 2024
1 parent 38ae74b commit 0da4073
Show file tree
Hide file tree
Showing 8 changed files with 230 additions and 223 deletions.
32 changes: 16 additions & 16 deletions src/core/shape/vertex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2253,26 +2253,26 @@ p5.prototype.normal = function(x, y, z) {
return this;
};

/** Sets the shader's vertex attribute variables.
/** Sets the shader's vertex property or attribute variables.
*
* An attribute is a variable belonging to a vertex in a shader. p5.js provides some
* default attributes, such as `aPosition`, `aNormal`, `aVertexColor`, etc. These are
* An vertex property or vertex attribute is a variable belonging to a vertex in a shader. p5.js provides some
* default properties, such as `aPosition`, `aNormal`, `aVertexColor`, etc. These are
* set using <a href="#/p5/vertex">vertex()</a>, <a href="#/p5/normal">normal()</a>
* and <a href="#/p5/fill">fill()</a> respectively. Custom attribute data can also
* and <a href="#/p5/fill">fill()</a> respectively. Custom properties can also
* be defined within <a href="#/p5/beginShape">beginShape()</a> and
* <a href="#/p5/endShape">endShape()</a>.
*
* The first parameter, `attributeName`, is a string with the attribute's name.
* This is the same variable name which should be declared in the shader, similar to
* `setUniform()`.
* The first parameter, `propertyName`, is a string with the property's name.
* This is the same variable name which should be declared in the shader, such as
* `in vec3 aProperty`, similar to .`setUniform()`.
*
* The second parameter, `data`, is the value assigned to the attribute. This
* The second parameter, `data`, is the value assigned to the shader variable. This
* value will be applied to subsequent vertices created with
* <a href="#/p5/vertex">vertex()</a>. It can be a Number or an array of numbers,
* and in the shader program the type can be declared according to the WebGL
* specification. Common types include `float`, `vec2`, `vec3`, `vec4` or matrices.
*
* See also the <a href="#/p5/setAttribute">setAttribute()</a> method on
* See also the <a href="#/p5/vertexProperty">vertexProperty()</a> method on
* <a href="#/p5/Geometry">Geometry</a> objects.
*
* @example
Expand Down Expand Up @@ -2327,7 +2327,7 @@ p5.prototype.normal = function(x, y, z) {
* const yOff = 10 * noise(y + millis()/1000) - 5;
*
* // Apply these noise values to the following vertex.
* setAttribute('aOffset', [xOff, yOff]);
* vertexProperty('aOffset', [xOff, yOff]);
* vertex(x, y);
* }
* endShape(CLOSE);
Expand Down Expand Up @@ -2402,7 +2402,7 @@ p5.prototype.normal = function(x, y, z) {
* let distance = dist(x1,y1, mouseX, mouseY);
*
* // Send the distance to the shader.
* setAttribute('aDistance', min(distance, 100));
* vertexProperty('aDistance', min(distance, 100));
*
* vertex(x, y);
* vertex(x + cellSize, y);
Expand All @@ -2415,14 +2415,14 @@ p5.prototype.normal = function(x, y, z) {
* </code>
* </div>
*
* @method setAttribute
* @method vertexProperty
* @param {String} attributeName the name of the vertex attribute.
* @param {Number|Number[]} data the data tied to the vertex attribute.
*/
p5.prototype.setAttribute = function(attributeName, data){
// this._assert3d('setAttribute');
// p5._validateParameters('setAttribute', arguments);
this._renderer.setAttribute(attributeName, data);
p5.prototype.vertexProperty = function(attributeName, data){
// this._assert3d('vertexProperty');
// p5._validateParameters('vertexProperty', arguments);
this._renderer.vertexProperty(attributeName, data);
};

export default p5;
144 changes: 72 additions & 72 deletions src/webgl/3d_primitives.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3019,15 +3019,15 @@ p5.RendererGL.prototype.bezierVertex = function(...args) {
strokeColors[0] = immediateGeometry.vertexStrokeColors.slice(-4);
strokeColors[3] = this.curStrokeColor.slice();

// Do the same for custom attributes
const userAttributes = {};
for (const attrName in immediateGeometry.userAttributes){
const attr = immediateGeometry.userAttributes[attrName];
const size = attr.getDataSize();
userAttributes[attrName] = [];
for (m = 0; m < 4; m++) userAttributes[attrName].push([]);
userAttributes[attrName][0] = attr.getSrcArray().slice(-size);
userAttributes[attrName][3] = attr.getCurrentData();
// Do the same for custom vertex properties
const userVertexProperties = {};
for (const propName in immediateGeometry.userVertexProperties){
const prop = immediateGeometry.userVertexProperties[propName];
const size = prop.getDataSize();
userVertexProperties[propName] = [];
for (m = 0; m < 4; m++) userVertexProperties[propName].push([]);
userVertexProperties[propName][0] = prop.getSrcArray().slice(-size);
userVertexProperties[propName][3] = prop.getCurrentData();
}

if (argLength === 6) {
Expand Down Expand Up @@ -3057,14 +3057,14 @@ p5.RendererGL.prototype.bezierVertex = function(...args) {
strokeColors[0][k] * d2 + strokeColors[3][k] * (1-d2)
);
}
for (const attrName in immediateGeometry.userAttributes){
const size = immediateGeometry.userAttributes[attrName].getDataSize();
for (const propName in immediateGeometry.userVertexProperties){
const size = immediateGeometry.userVertexProperties[propName].getDataSize();
for (k = 0; k < size; k++){
userAttributes[attrName][1].push(
userAttributes[attrName][0][k] * (1-d0) + userAttributes[attrName][3][k] * d0
userVertexProperties[propName][1].push(
userVertexProperties[propName][0][k] * (1-d0) + userVertexProperties[propName][3][k] * d0
);
userAttributes[attrName][2].push(
userAttributes[attrName][0][k] * (1-d2) + userAttributes[attrName][3][k] * d2
userVertexProperties[propName][2].push(
userVertexProperties[propName][0][k] * (1-d2) + userVertexProperties[propName][3][k] * d2
);
}
}
Expand All @@ -3084,25 +3084,25 @@ p5.RendererGL.prototype.bezierVertex = function(...args) {
_x += w_x[m] * this._lookUpTableBezier[i][m];
_y += w_y[m] * this._lookUpTableBezier[i][m];
}
for (const attrName in immediateGeometry.userAttributes){
const attr = immediateGeometry.userAttributes[attrName];
const size = attr.getDataSize();
for (const propName in immediateGeometry.userVertexProperties){
const prop = immediateGeometry.userVertexProperties[propName];
const size = prop.getDataSize();
let newValues = Array(size).fill(0);
for (let m = 0; m < 4; m++){
for (let k = 0; k < size; k++){
newValues[k] += this._lookUpTableBezier[i][m] * userAttributes[attrName][m][k];
newValues[k] += this._lookUpTableBezier[i][m] * userVertexProperties[propName][m][k];
}
}
attr.setCurrentData(newValues);
prop.setCurrentData(newValues);
}
this.vertex(_x, _y);
}
// so that we leave currentColor with the last value the user set it to
this.curFillColor = fillColors[3];
this.curStrokeColor = strokeColors[3];
for (const attrName in immediateGeometry.userAttributes) {
const attr = immediateGeometry.userAttributes[attrName];
attr.setCurrentData(userAttributes[attrName][2]);
for (const propName in immediateGeometry.userVertexProperties) {
const prop = immediateGeometry.userVertexProperties[propName];
prop.setCurrentData(userVertexProperties[propName][2]);
}
this.immediateMode._bezierVertex[0] = args[4];
this.immediateMode._bezierVertex[1] = args[5];
Expand Down Expand Up @@ -3134,14 +3134,14 @@ p5.RendererGL.prototype.bezierVertex = function(...args) {
strokeColors[0][k] * d2 + strokeColors[3][k] * (1-d2)
);
}
for (const attrName in immediateGeometry.userAttributes){
const size = immediateGeometry.userAttributes[attrName].getDataSize();
for (const propName in immediateGeometry.userVertexProperties){
const size = immediateGeometry.userVertexProperties[propName].getDataSize();
for (k = 0; k < size; k++){
userAttributes[attrName][1].push(
userAttributes[attrName][0][k] * (1-d0) + userAttributes[attrName][3][k] * d0
userVertexProperties[propName][1].push(
userVertexProperties[propName][0][k] * (1-d0) + userVertexProperties[propName][3][k] * d0
);
userAttributes[attrName][2].push(
userAttributes[attrName][0][k] * (1-d2) + userAttributes[attrName][3][k] * d2
userVertexProperties[propName][2].push(
userVertexProperties[propName][0][k] * (1-d2) + userVertexProperties[propName][3][k] * d2
);
}
}
Expand All @@ -3161,25 +3161,25 @@ p5.RendererGL.prototype.bezierVertex = function(...args) {
_y += w_y[m] * this._lookUpTableBezier[i][m];
_z += w_z[m] * this._lookUpTableBezier[i][m];
}
for (const attrName in immediateGeometry.userAttributes){
const attr = immediateGeometry.userAttributes[attrName];
const size = attr.getDataSize();
for (const propName in immediateGeometry.userVertexProperties){
const prop = immediateGeometry.userVertexProperties[propName];
const size = prop.getDataSize();
let newValues = Array(size).fill(0);
for (let m = 0; m < 4; m++){
for (let k = 0; k < size; k++){
newValues[k] += this._lookUpTableBezier[i][m] * userAttributes[attrName][m][k];
newValues[k] += this._lookUpTableBezier[i][m] * userVertexProperties[propName][m][k];
}
}
attr.setCurrentData(newValues);
prop.setCurrentData(newValues);
}
this.vertex(_x, _y, _z);
}
// so that we leave currentColor with the last value the user set it to
this.curFillColor = fillColors[3];
this.curStrokeColor = strokeColors[3];
for (const attrName in immediateGeometry.userAttributes) {
const attr = immediateGeometry.userAttributes[attrName];
attr.setCurrentData(userAttributes[attrName][2]);
for (const propName in immediateGeometry.userVertexProperties) {
const prop = immediateGeometry.userVertexProperties[propName];
prop.setCurrentData(userVertexProperties[propName][2]);
}
this.immediateMode._bezierVertex[0] = args[6];
this.immediateMode._bezierVertex[1] = args[7];
Expand Down Expand Up @@ -3243,15 +3243,15 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) {
strokeColors[0] = immediateGeometry.vertexStrokeColors.slice(-4);
strokeColors[2] = this.curStrokeColor.slice();

// Do the same for custom (user defined) attributes
const userAttributes = {};
for (const attrName in immediateGeometry.userAttributes){
const attr = immediateGeometry.userAttributes[attrName];
const size = attr.getDataSize();
userAttributes[attrName] = [];
for (m = 0; m < 3; m++) userAttributes[attrName].push([]);
userAttributes[attrName][0] = attr.getSrcArray().slice(-size);
userAttributes[attrName][2] = attr.getCurrentData();
// Do the same for user defined vertex properties
const userVertexProperties = {};
for (const propName in immediateGeometry.userVertexProperties){
const prop = immediateGeometry.userVertexProperties[propName];
const size = prop.getDataSize();
userVertexProperties[propName] = [];
for (m = 0; m < 3; m++) userVertexProperties[propName].push([]);
userVertexProperties[propName][0] = prop.getSrcArray().slice(-size);
userVertexProperties[propName][2] = prop.getCurrentData();
}

if (argLength === 4) {
Expand All @@ -3274,12 +3274,12 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) {
strokeColors[0][k] * (1-d0) + strokeColors[2][k] * d0
);
}
for (const attrName in immediateGeometry.userAttributes){
const attr = immediateGeometry.userAttributes[attrName];
const size = attr.getDataSize();
for (const propName in immediateGeometry.userVertexProperties){
const prop = immediateGeometry.userVertexProperties[propName];
const size = prop.getDataSize();
for (let k = 0; k < size; k++){
userAttributes[attrName][1].push(
userAttributes[attrName][0][k] * (1-d0) + userAttributes[attrName][2][k] * d0
userVertexProperties[propName][1].push(
userVertexProperties[propName][0][k] * (1-d0) + userVertexProperties[propName][2][k] * d0
);
}
}
Expand All @@ -3300,26 +3300,26 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) {
_y += w_y[m] * this._lookUpTableQuadratic[i][m];
}

for (const attrName in immediateGeometry.userAttributes) {
const attr = immediateGeometry.userAttributes[attrName];
const size = attr.getDataSize();
for (const propName in immediateGeometry.userVertexProperties) {
const prop = immediateGeometry.userVertexProperties[propName];
const size = prop.getDataSize();
let newValues = Array(size).fill(0);
for (let m = 0; m < 3; m++){
for (let k = 0; k < size; k++){
newValues[k] += this._lookUpTableQuadratic[i][m] * userAttributes[attrName][m][k];
newValues[k] += this._lookUpTableQuadratic[i][m] * userVertexProperties[propName][m][k];
}
}
attr.setCurrentData(newValues);
prop.setCurrentData(newValues);
}
this.vertex(_x, _y);
}

// so that we leave currentColor with the last value the user set it to
this.curFillColor = fillColors[2];
this.curStrokeColor = strokeColors[2];
for (const attrName in immediateGeometry.userAttributes) {
const attr = immediateGeometry.userAttributes[attrName];
attr.setCurrentData(userAttributes[attrName][2]);
for (const propName in immediateGeometry.userVertexProperties) {
const prop = immediateGeometry.userVertexProperties[propName];
prop.setCurrentData(userVertexProperties[propName][2]);
}
this.immediateMode._quadraticVertex[0] = args[2];
this.immediateMode._quadraticVertex[1] = args[3];
Expand All @@ -3345,12 +3345,12 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) {
);
}

for (const attrName in immediateGeometry.userAttributes){
const attr = immediateGeometry.userAttributes[attrName];
const size = attr.getDataSize();
for (const propName in immediateGeometry.userVertexProperties){
const prop = immediateGeometry.userVertexProperties[propName];
const size = prop.getDataSize();
for (let k = 0; k < size; k++){
userAttributes[attrName][1].push(
userAttributes[attrName][0][k] * (1-d0) + userAttributes[attrName][2][k] * d0
userVertexProperties[propName][1].push(
userVertexProperties[propName][0][k] * (1-d0) + userVertexProperties[propName][2][k] * d0
);
}
}
Expand All @@ -3371,26 +3371,26 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) {
_y += w_y[m] * this._lookUpTableQuadratic[i][m];
_z += w_z[m] * this._lookUpTableQuadratic[i][m];
}
for (const attrName in immediateGeometry.userAttributes) {
const attr = immediateGeometry.userAttributes[attrName];
const size = attr.getDataSize();
for (const propName in immediateGeometry.userVertexProperties) {
const prop = immediateGeometry.userVertexProperties[propName];
const size = prop.getDataSize();
let newValues = Array(size).fill(0);
for (let m = 0; m < 3; m++){
for (let k = 0; k < size; k++){
newValues[k] += this._lookUpTableQuadratic[i][m] * userAttributes[attrName][m][k];
newValues[k] += this._lookUpTableQuadratic[i][m] * userVertexProperties[propName][m][k];
}
}
attr.setCurrentData(newValues);
prop.setCurrentData(newValues);
}
this.vertex(_x, _y, _z);
}

// so that we leave currentColor with the last value the user set it to
this.curFillColor = fillColors[2];
this.curStrokeColor = strokeColors[2];
for (const attrName in immediateGeometry.userAttributes) {
const attr = immediateGeometry.userAttributes[attrName];
attr.setCurrentData(userAttributes[attrName][2]);
for (const propName in immediateGeometry.userVertexProperties) {
const prop = immediateGeometry.userVertexProperties[propName];
prop.setCurrentData(userVertexProperties[propName][2]);
}
this.immediateMode._quadraticVertex[0] = args[3];
this.immediateMode._quadraticVertex[1] = args[4];
Expand Down
28 changes: 14 additions & 14 deletions src/webgl/GeometryBuilder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,30 +60,30 @@ class GeometryBuilder {
);
this.geometry.uvs.push(...input.uvs);

const inputAttrs = input.userAttributes;
const builtAttrs = this.geometry.userAttributes;
const inputUserVertexProps = input.userVertexProperties;
const builtUserVertexProps = this.geometry.userVertexProperties;
const numPreviousVertices = this.geometry.vertices.length - input.vertices.length;

for (const attrName in builtAttrs){
if (attrName in inputAttrs){
for (const propName in builtUserVertexProps){
if (propName in inputUserVertexProps){
continue;
}
const attr = builtAttrs[attrName]
const size = attr.getDataSize();
const prop = builtUserVertexProps[propName]
const size = prop.getDataSize();
const numMissingValues = size * input.vertices.length;
const missingValues = Array(numMissingValues).fill(0);
attr.pushDirect(missingValues);
prop.pushDirect(missingValues);
}
for (const attrName in inputAttrs){
const attr = inputAttrs[attrName];
const data = attr.getSrcArray();
const size = attr.getDataSize();
if (numPreviousVertices > 0 && !(attrName in builtAttrs)){
for (const propName in inputUserVertexProps){
const prop = inputUserVertexProps[propName];
const data = prop.getSrcArray();
const size = prop.getDataSize();
if (numPreviousVertices > 0 && !(propName in builtUserVertexProps)){
const numMissingValues = size * numPreviousVertices;
const missingValues = Array(numMissingValues).fill(0);
this.geometry.setAttribute(attrName, missingValues, size);
this.geometry.vertexProperty(propName, missingValues, size);
}
this.geometry.setAttribute(attrName, data, size);
this.geometry.vertexProperty(propName, data, size);
}

if (this.renderer._doFill) {
Expand Down
Loading

0 comments on commit 0da4073

Please sign in to comment.