Fix textureWrap REPEAT for WebGL Power Of Two Image Element

processing · Feb 1, 2023 · 4079722 · 4079722
1 parent 69702de
commit 4079722
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/src/webgl/p5.Texture.js b/src/webgl/p5.Texture.js
@@ -334,9 334,21 @@ p5.Texture.prototype.setWrapMode = function(wrapX, wrapY) {
  // if it isn't we will set the wrap mode to CLAMP
  // webgl2 will support npot REPEAT and MIRROR but we don't check for it yet
  const isPowerOfTwo = x => (x & (x - 1)) === 0;
  const textureData = this._getTextureDataFromSource();
 
  let wrapWidth;
  let wrapHeight;
 
  if (textureData.naturalWidth && textureData.naturalHeight) {
  wrapWidth = textureData.naturalWidth;
  wrapHeight = textureData.naturalHeight;
  } else {
  wrapWidth = this.width;
  wrapHeight = this.height;
  }
 
- const widthPowerOfTwo = isPowerOfTwo(this.width);
- const heightPowerOfTwo = isPowerOfTwo(this.height);
  const widthPowerOfTwo = isPowerOfTwo(wrapWidth);
  const heightPowerOfTwo = isPowerOfTwo(wrapHeight);
 
  if (wrapX === constants.REPEAT) {
  if (widthPowerOfTwo && heightPowerOfTwo) {

diff --git a/test/unit/webgl/p5.Texture.js b/test/unit/webgl/p5.Texture.js
@@ -2,6 2,9 @@ suite('p5.Texture', function() {
  var myp5;
  var texImg1;
  var texImg2;
  var texImg3;
  var imgElementNotPowerOfTwo;
  var imgElementPowerOfTwo;
  var canvas;
 
  if (!window.Modernizr.webgl) {
@@ -12,15 15,27 @@ suite('p5.Texture', function() {
  setup(function(done) {
  myp5 = new p5(function(p) {
  p.preload = function() {
  // texImg2 must have powerOfTwo dimensions
  texImg2 = p.loadImage('unit/assets/target.gif');
-
  // texImg3 must NOT have powerOfTwo dimensions
  texImg3 = p.loadImage('unit/assets/nyan_cat.gif');
  // texture object isn't created until it's used for something:
  //p.box(70, 70, 70);
  };
  p.setup = function() {
  canvas = p.createCanvas(100, 100, p.WEBGL);
  texImg1 = p.createGraphics(2, 2, p.WEBGL);
  p.texture(texImg1);
  p.createImg(texImg2.canvas.toDataURL(), '', 'anonymous', el => {
  el.size(50, 50);
  imgElementPowerOfTwo = el;
  p.texture(imgElementPowerOfTwo);
  });
  p.createImg(texImg3.canvas.toDataURL(), '', 'anonymous', el => {
  el.size(50, 50);
  imgElementNotPowerOfTwo = el;
  p.texture(imgElementNotPowerOfTwo);
  });
  done();
  };
  });
@@ -87,6 102,18 @@ suite('p5.Texture', function() {
  assert.deepEqual(tex.glWrapS, myp5._renderer.GL.MIRRORED_REPEAT);
  assert.deepEqual(tex.glWrapT, myp5._renderer.GL.MIRRORED_REPEAT);
  });
  test('Set wrap mode REPEAT if src dimensions is powerOfTwo', function() {
  const tex = myp5._renderer.getTexture(imgElementPowerOfTwo);
  tex.setWrapMode(myp5.REPEAT, myp5.REPEAT);
  assert.deepEqual(tex.glWrapS, myp5._renderer.GL.REPEAT);
  assert.deepEqual(tex.glWrapT, myp5._renderer.GL.REPEAT);
  });
  test('Set default wrap mode CLAMP if src dimensions != powerOfTwo', function() {
  const tex = myp5._renderer.getTexture(imgElementNotPowerOfTwo);
  tex.setWrapMode(myp5.REPEAT, myp5.REPEAT);
  assert.deepEqual(tex.glWrapS, myp5._renderer.GL.CLAMP_TO_EDGE);
  assert.deepEqual(tex.glWrapT, myp5._renderer.GL.CLAMP_TO_EDGE);
  });
  test('Set textureMode to NORMAL', function() {
  myp5.textureMode(myp5.NORMAL);
  assert.deepEqual(myp5._renderer.textureMode, myp5.NORMAL);