Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for .mtl Files with Textures #7072

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Support for .mtl Files with Textures #7072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 34 additions & 4 deletions src/webgl/loading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,8 +531,8 @@ function parseMtl(p5,mtlPath){
];

}else if (tokens[0] === 'map_Kd') {
//Texture path
materials[currentMaterial].texturePath = tokens[1];
// Diffuse Texture path
materials[currentMaterial].diffuseTexturePath = tokens[1];
}
}
resolve(materials);
Expand Down Expand Up @@ -585,6 +585,17 @@ function parseObj(model, lines, materials= {}) {
if (tokens[0] === 'usemtl') {
// Switch to a new material
currentMaterial = tokens[1];
if( materials[currentMaterial]
&& materials[currentMaterial].diffuseTexturePath
) {
if (!model.textures[currentMaterial]) {
model.textures[currentMaterial] = {};
}
model.hasTextures = true;
model.textures[currentMaterial].diffuseTexture =
loadImage(materials[currentMaterial].diffuseTexturePath);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do we expect to happen here if this image file hasn't been uploaded along with the sketch? Maybe we can add some error handling here?

model.textures[currentMaterial].faces = [] ;
}
}else if (tokens[0] === 'v' || tokens[0] === 'vn') {
// Check if this line describes a vertex or vertex normal.
// It will have three numeric parameters.
Expand Down Expand Up @@ -651,8 +662,15 @@ function parseObj(model, lines, materials= {}) {
face[0] !== face[2] &&
face[1] !== face[2]
) {
model.faces.push(face);
//same material for all vertices in a particular face
if (currentMaterial
&& model.textures[currentMaterial]
&& model.textures[currentMaterial].diffuseTexture
) {
model.textures[currentMaterial].faces.push(face);
} else {
model.faces.push(face);
}
if (currentMaterial
&& materials[currentMaterial]
&& materials[currentMaterial].diffuseColor) {
Expand Down Expand Up @@ -1125,7 +1143,19 @@ p5.prototype.model = function(model) {
this._renderer.createBuffers(model.gid, model);
}

this._renderer.drawBuffers(model.gid);
// If model has textures for each texture update index buffer and invoke draw call.
if(model.hasTextures) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we can make this a little more consistent with fill/stroke? So previously, p5.Geoemtry was kind of just shape info, not including color or textures, and you would be able to call fill() or stroke() before model(yourModel) before drawing it to change those things. Now, buildGeometry captures some of those vertex and stroke colors, so they no wouldn't get reset, they're baked in. If you want to turn your shape back into something without that info baked in, we have a geom.clearColors() method you can call. For this scenario that maybe means:

  • Having a method to clear the textures out of geometry (either along with or independently from the colors)
  • Capturing the textures, if any are applied, in buildGeometry

this._renderer.updateIndexBuffer(model.gid, model.faces);
this._renderer.drawBuffers(model.gid);
for (let material of Object.keys(model.textures)) {
const texture = model.textures[material];
this._renderer.updateIndexBuffer(model.gid, texture.faces);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a way for us to do this by having multiple index buffers that we swap between? In the past we've found that on some computers, the cpu-to-gpu data transfer is by far the biggest bottleneck, so we've tried to minimize the data sent back and forth. Currently, p5.Geometry is the way to cache this reused data to avoid any transfer after the first time you draw it, so ideally we'd keep that property.

this._renderer._tex = texture.diffuseTexture;
this._renderer.drawBuffers(model.gid);
}
} else {
this._renderer.drawBuffers(model.gid);
}
}
};

Expand Down
32 changes: 29 additions & 3 deletions src/webgl/p5.Geometry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,11 @@ p5.Geometry = class Geometry {
// One color per vertex representing the stroke color at that vertex
this.vertexStrokeColors = [];

// Map storing the textures and faces for each texture
this.textures = {};

this.hasTextures = false;

// One color per line vertex, generated automatically based on
// vertexStrokeColors in _edgesToVertices()
this.lineVertexColors = new p5.DataArray();
Expand Down Expand Up @@ -707,10 +712,18 @@ p5.Geometry = class Geometry {
_makeTriangleEdges() {
this.edges.length = 0;

const _addEdge = face => {
this.edges.push([face[0], face[1]]);
this.edges.push([face[1], face[2]]);
this.edges.push([face[2], face[0]]);
};

for (let j = 0; j < this.faces.length; j++) {
this.edges.push([this.faces[j][0], this.faces[j][1]]);
this.edges.push([this.faces[j][1], this.faces[j][2]]);
this.edges.push([this.faces[j][2], this.faces[j][0]]);
_addEdge(this.faces[j]);
}

for (let material of Object.keys(this.textures)) {
this.textures[material].faces.map(face => _addEdge(face));
}

return this;
Expand Down Expand Up @@ -1003,5 +1016,18 @@ p5.Geometry = class Geometry {
}
return this;
}

/**
* When using textures each material contains all the face indices for that texture.
* this function collects all the faces mapped to different textures in a single array
* @method collectFaces
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this meant to be used internally only? If so we can add the @private tag so it doesn't show up in the reference for users.

*/
collectFaces() {
const faces = [];
for (let materialName of Object.keys(this.textures)) {
faces.push(this.textures[materialName]['faces']);
}
return faces.flat();
}
};
export default p5.Geometry;
44 changes: 24 additions & 20 deletions src/webgl/p5.RendererGL.Retained.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,29 @@ p5.RendererGL.prototype._freeBuffers = function(gId) {
freeBuffers(this.retainedMode.buffers.fill);
};

p5.RendererGL.prototype.updateIndexBuffer = function(gId, faces) {
const gl = this.GL;
const buffers = this.retainedMode.geometry[gId];
let indexBuffer = buffers.indexBuffer;

if (!indexBuffer) indexBuffer = buffers.indexBuffer = gl.createBuffer();
const vals = p5.RendererGL.prototype._flatten(faces);

// If any face references a vertex with an index greater than the maximum
// un-singed 16 bit integer, then we need to use a Uint32Array instead of a
// Uint16Array

const hasVertexIndicesOverMaxUInt16 = vals.some(v => v > 65535);
let type = hasVertexIndicesOverMaxUInt16 ? Uint32Array : Uint16Array;
this._bindBuffer(indexBuffer, gl.ELEMENT_ARRAY_BUFFER, vals, type);
buffers.indexBufferType = hasVertexIndicesOverMaxUInt16
? gl.UNSIGNED_INT
: gl.UNSIGNED_SHORT;

// the vertex count is based on the number of faces
buffers.vertexCount = faces.length * 3;
};

/**
* creates a buffers object that holds the WebGL render buffers
* for a geometry.
Expand All @@ -80,26 +103,7 @@ p5.RendererGL.prototype.createBuffers = function(gId, model) {
let indexBuffer = buffers.indexBuffer;

if (model.faces.length) {
// allocate space for faces
if (!indexBuffer) indexBuffer = buffers.indexBuffer = gl.createBuffer();
const vals = p5.RendererGL.prototype._flatten(model.faces);

// If any face references a vertex with an index greater than the maximum
// un-singed 16 bit integer, then we need to use a Uint32Array instead of a
// Uint16Array
const hasVertexIndicesOverMaxUInt16 = vals.some(v => v > 65535);
let type = hasVertexIndicesOverMaxUInt16 ? Uint32Array : Uint16Array;
this._bindBuffer(indexBuffer, gl.ELEMENT_ARRAY_BUFFER, vals, type);

// If we're using a Uint32Array for our indexBuffer we will need to pass a
// different enum value to WebGL draw triangles. This happens in
// the _drawElements function.
buffers.indexBufferType = hasVertexIndicesOverMaxUInt16
? gl.UNSIGNED_INT
: gl.UNSIGNED_SHORT;

// the vertex count is based on the number of faces
buffers.vertexCount = model.faces.length * 3;
this.updateIndexBuffer(gId, model.faces);
} else {
// the index buffer is unused, remove it
if (indexBuffer) {
Expand Down