textureWrap() or similar for webgl mode

[kjhollen]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Feature enhancement details:

Processing has a textureWrap feature for changing the texture wrapping behavior.

this is a small size project for someone with a little experience working with open gl. see the WebGL Module Architecture page on p5 conventions for webgl.

[Siphonophora]

Thought I would add a useful example I found when looking up how these options should behave. http://www.cs.uregina.ca/Links/class-info/315/WWW/Lab5/#Repeat

[Siphonophora]

Clamp mode does seem to be working fine (applied to a box, where I changed the UVs). Would this feature normally apply only to geometry made with createShape() as suggested in the processing documentation?

[Benjamin-Davies]

If you have the texture bound then you can use

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

to tell webgl to repeat the texture when you go over the borders and

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

to tell WebGL to clamp to the edge of the texture when you go over the borders.
However, this will only set the option for the currently bound texture.
To do it for all textures you would need to either iterate through all of the textures, or set a flag to do it when any texture is bound/used.

More info at https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texParameter.

[kjhollen]

I think it's okay to deviate a little from the Processing API... the idea is just to let the user control whether the texture stretches or repeats. We can also look at other web GL toolkits to see what they do—it makes sense to consider p5 as an onramp to other heavier web graphics platforms, so it's good to help users make the leap from our 2d mode -> 3d mode -> out to some other more complex webgl kit.

[pandeykartikey]

Hi, I would like to have a go at this issue but since i am new to webgl I might require a bit of guidance.
@lmccart @Benjamin-Davies @Siphonophora @kjhollen

[kjhollen]

hi @kartik-25, go for it! there is some documentation here that might be useful https://github.com/processing/p5.js/wiki/WebGL-Module-Architecture and please let me know if you have any questions along the way. feel free to assign yourself this bug!

[pandeykartikey]

@kjhollen This error keeps occuring whenever i try to use ps5.min.js.
Uncaught TypeError: Cannot read property 'depthMask' of undefined
I cannot get why the this._renderer.GL is not defined?

[tcoppex]

Hola todos,

I've allowed myself to take up on the task, I hope that's okay with you @pandeykartikey.

To test this out I've implemented the functionality found on processing 3, updated for using OpenGL ES 2 wrap mode names. Here is the result :

textureWrap set respectively to CLAMP_TO_EDGE, REPEAT, and REPEAT_MIRRORED.

Example code :

let img;

function preload() {
  img = loadImage('whynot.png');
}

function setup() {
  createCanvas(windowWidth/3, windowHeight/2, WEBGL);
}

function draw() {
  background(45);

  const dX = mouseX / windowWidth;
  const dY = mouseY / windowHeight;

  let u = lerp(1.0, 8.0, dX);
  let v = lerp(1.0, 8.0, dY);

  scale(width/9.0);

  push();
  translate(-3, 0, 0);
  textureWrap(CLAMP_TO_EDGE);
  textured_quad(img, u, v);
  pop();

  textureWrap(REPEAT);
  textured_quad(img, u, v);

  push();
  translate(3, 0, 0);
  textureWrap(MIRRORED_REPEAT);
  textured_quad(img, u, v);
  pop();
}

function textured_quad(tex, u, v) {
  texture(tex);
  beginShape(TRIANGLES);
  vertex(-1, -1,  0, 0, 0);
  vertex( 1, -1,  0, u, 0);
  vertex( 1,  1,  0, u, v);

  vertex( 1,  1,  0, u, v);
  vertex(-1,  1,  0, 0, v);
  vertex(-1, -1,  0, 0, 0);
  endShape();
}

I can submit a pull request as is but as one might prefers an other API I prefered to discuss this with the community first.

The two alternatives I see is to set the wrap mode per textures (eg. textureWrap(tex, REPEAT)) or globally per dimension (eg. textureWrap(REPEAT, CLAMP_TO_EDGE)).

Right now I think that having the ability to easily copy-paste code from Processing to p5.js is a good thing, so I kept the legacy functionality.

What is your take on this ?

Thanks 👍

[kjhollen]

hi @tcoppex, thanks for this proposal! @aferriss submitted a PR for texturing in #2960, but added to the p5.Texture object. Do you want to review the PR and make sure it's set up to eventually implement textureWrap() as a top-level part of the p5 API?

[tcoppex]

Hey @kjhollen, I completely missed that PR !

That's quite a good idea and seems feasible, I'll wait for it to be merged and will submit my revisions afterwards.

Thank you.