diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index a7037d3759..dac757acd9 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -257,6 +257,7 @@ class RendererGL extends Renderer3D { } } else if (this._curShader.shaderType === 'text') { // Text rendering uses a fixed quad geometry with 6 indices + this._bindBuffer(glBuffers.indexBuffer, gl.ELEMENT_ARRAY_BUFFER); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); } else if (glBuffers.indexBuffer) { this._bindBuffer(glBuffers.indexBuffer, gl.ELEMENT_ARRAY_BUFFER); @@ -1049,7 +1050,8 @@ class RendererGL extends Renderer3D { const gl = this.GL; if (indices) { - const buffer = gl.createBuffer(); + let buffer = buffers.indexBuffer; + if (!buffer) buffer = gl.createBuffer(); this._bindBuffer(buffer, gl.ELEMENT_ARRAY_BUFFER, indices, indexType); buffers.indexBuffer = buffer; diff --git a/src/webgl/text.js b/src/webgl/text.js index 083ec0364b..439f209ed8 100644 --- a/src/webgl/text.js +++ b/src/webgl/text.js @@ -766,6 +766,7 @@ function text(p5, fn) { // this will have to do for now... sh.setUniform('uMaterialColor', curFillColor); + this._disableRemainingAttributes(sh); this._beforeDrawText(); this.glyphDataCache = this.glyphDataCache || new Set(); diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js index c2157b3d18..7462d526bb 100644 --- a/test/unit/visual/cases/webgl.js +++ b/test/unit/visual/cases/webgl.js @@ -790,6 +790,33 @@ visualSuite('WebGL', function() { screenshot(); }); + + visualTest('text renders correctly after geometry with many indices', async (p5, screenshot) => { + p5.createCanvas(100, 100, p5.WEBGL); + const font = await p5.loadFont( + '/unit/assets/Inconsolata-Bold.ttf' + ); + + p5.background(255); + p5.noStroke(); + + p5.textFont(font); + p5.textSize(20); + p5.textAlign(p5.CENTER, p5.CENTER); + p5.text('Test 1', 0, -20); + + // Draw a sphere which has many more indices than text + p5.fill(200, 200, 255); + p5.sphere(30); + + p5.clearDepth(); + + // Draw text - should bind its own index buffer + p5.fill(0); + p5.text('Test 2', 0, 20); + + screenshot(); + }); }); visualSuite('texture()', () => { diff --git a/test/unit/visual/screenshots/WebGL/font data/text renders correctly after geometry with many indices/000.png b/test/unit/visual/screenshots/WebGL/font data/text renders correctly after geometry with many indices/000.png new file mode 100644 index 0000000000..572f95b3e6 Binary files /dev/null and b/test/unit/visual/screenshots/WebGL/font data/text renders correctly after geometry with many indices/000.png differ diff --git a/test/unit/visual/screenshots/WebGL/font data/text renders correctly after geometry with many indices/metadata.json b/test/unit/visual/screenshots/WebGL/font data/text renders correctly after geometry with many indices/metadata.json new file mode 100644 index 0000000000..2d4bfe30da --- /dev/null +++ b/test/unit/visual/screenshots/WebGL/font data/text renders correctly after geometry with many indices/metadata.json @@ -0,0 +1,3 @@ +{ + "numScreenshots": 1 +} \ No newline at end of file