Update Learn page for 3D geometry

[davepagurek]

Increasing Access

Now that this feature https://github.com/processing/p5.js/pull/6287 is merged into p5.js, when the next version comes out, users have access to an API they can use to manage 3D shapes more easily and efficiently. However, the reference for its methods aren't a great spot for a high-level overview of when one should use it and how. The Learn page for custom 3D geometry is the logical spot to explain this feature.

Most appropriate sub-area of p5.js?

Home

Feature request details

In this page https://p5js.org/learn/getting-started-in-webgl-custom-geometry.html, we describe making custom 3D geometry with p5.Geometry. We now have an API to build p5.Geometry using buildGeometry()+ the shape drawing commands described earlier in the tutorial. This is likely a smaller conceptual step to make than making fully custom geometry, so it would be great to introduce it in the tutorial as an in-between step.

[ffd8]

@davepagurek I was just trying to research who had made that tutorial – because there is one smaaall detail missing that would make it oh so powerful (UVs). I have students who want to create custom form cups/pottery and put textures over them. Went searching for custom p5.geom tutorials, of which this one from @sflanker is really helpful + the one referenced above is also super helpful in even simpler terms. The big thing missing from both tutorials was hooow to add the UVs so that a texture could be added to the models, since they are only holding solids/light. For those of us that haven't taken a deep dive into WEBGL/3d-modeling, this is tricky territory. I searched and searched with the students throughout the documentation etc, to no avail. I checked out the new functions for buildGeometry() – which look really nice(!) except that when placing a texture on the model, it is applied separately to each 3d primitive used.. d'oh (unless I didn't understand it right). Those new functions would be oooh so great to add CSG capabilities to! I started getting into that with @micuat on a thread here.

The other day, I told the students too bad, doesn't seem possible.. write to the p5 forum/discord/github – when I recalled a sketch I built on top of Paul's 3d terrain example that could hold a texture (I forget if we had email contact, forum, github about HOW to do the UVs mapping) – and realized, it's just one line missing from the example online to get it all working:

let detailX = 20;
  let detailY = 20;
  myGeometry = new p5.Geometry(detailX,detailY, function() {

    // these nested for loops create a simple grid of vertices
    // which are affected by sin() and cos() on the z-axis
    for(let x = 0; x <= detailX; x++) {
      for(let y = 0; y <= detailY; y++) {
        this.vertices.push(new p5.Vector(
          x/detailX,
          y/detailY,
          (sin(x/detailX*TWO_PI*4) + cos(y/detailY*TWO_PI)) / 10
          // random()/10
        ));
        this.uvs.push(x / detailX, y / detailY); // *** missing line to solve UV + textures!
      }
    }

    // this will attach all our vertices and create faces automatically
    this.computeFaces();
    // this will calculate the normals to help with lighting
    this.computeNormals();
  });

At the moment, that tutorial is really great and helpful – so perhaps what you describe above is one of the steps building up to full custom geometry and in the meantime, this line of code could be added to that tutorial to help the next person trying to put a texture on their new model?

Edit, quick add-on regarding UVs... is it currently possible to add UVs when using the new buildGeometry() function so it can hold a texture?

[davepagurek]

Yes you can! When calling vertex, you can pass texture coordinates in via vertex(x, y, z, u, v). We're actually in the process of updating a bunch of tutorials, and manual texture coordinates will definitely be making it into the materials one. Here's an example of that (not inside of buildGeometry, but it should work there too): https://editor.p5js.org/davepagurek/sketches/CF5gbU1qn

I checked out the new functions for buildGeometry() – which look really nice(!) except that when placing a texture on the model, it is applied separately to each 3d primitive used.. d'oh (unless I didn't understand it right).

Right, currently it just takes the texture coordinates from all of the pieces that end up in the geometry. We're slowly expanding upon the geometry features though, were you hoping to wrap a texture around the whole resulting geometry? Kind of like putting a textured sphere around it all, and then shrink wrapping the sphere to the shape?

Those new functions would be oooh so great to add CSG capabilities to!

I agree, and I think it'd be pretty feasible as a library for p5 in the mean time! The data format of csg.js is pretty simple, so one could convert from p5.Geometry format to that then back again in a function.