Webgl Texture Artifacts - webgl

Question

I'm trying to create a simple page flip effect in WebGL through a vertex shader. If I use the following vertex shader code, the page turn and everything looks fine.
float y_rot = mix(uAnimationStep, ease_out, aTextureCoord.x) * -PI;
If however I add the following adjustment (to make the bottom part of the page rotate faster, I get very bad texture artifacts (see the picture below).
float curve = mix(0.0, 0.25, aTextureCoord.y);
float y_rot = mix(uAnimationStep, ease_out + curve, aTextureCoord.x) * -PI;
I'm sure I'm missing something basic here... any ideas? I've tried to turn mipmapping on, but it didnt help. Thanks!

Answer 1

There really isn't enough code to answer your question but copying your 2 lines into some random sample I see no issues so it seems like your issue is somewhere else.
'use strict';
/* global twgl, requestAnimationFrame, document */
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');
const vs = `
attribute vec4 position;
attribute vec3 normal;
attribute vec2 texcoord;
uniform mat4 projection;
uniform mat4 modelView;
uniform float uAnimationStep;
const float ease_out = 0.0;
varying vec3 v_normal;
varying vec2 v_texcoord;
#define PI radians(180.0)
mat4 rotY(float angleInRadians) {
float s = sin(angleInRadians);
float c = cos(angleInRadians);
return mat4(
c, 0,-s, 0,
0, 1, 0, 0,
s, 0, c, 0,
0, 0, 0, 1);
}
void main() {
vec2 aTextureCoord = texcoord;
float curve = mix(0.0, 0.25, aTextureCoord.y);
float y_rot = mix(uAnimationStep, ease_out + curve, aTextureCoord.x) * -PI;
mat4 effectiveModelView = modelView * rotY(y_rot);
gl_Position = projection * effectiveModelView * position;
v_normal = mat3(effectiveModelView) * normal;
v_texcoord = texcoord;
}
`;
const fs = `
precision highp float;
varying vec3 v_normal;
varying vec2 v_texcoord;
varying float v_modelId;
uniform sampler2D tex;
void main() {
vec3 lightDirection = normalize(vec3(1, 2, 30)); // arbitrary light direction
vec3 color = texture2D(tex, v_texcoord).rgb;
float l = dot(lightDirection, normalize(v_normal)) * .5 + .5;
gl_FragColor = vec4(color * l, 1);
}
`;
// compile shader, link, look up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
// make some vertex data
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData
const bufferInfo = twgl.primitives.createPlaneBufferInfo(
gl,
32, // width
32, // depth
32, // width subdivisions
32, // height subdivisions
m4.rotationX(Math.PI / 2), // matrix to apply (plane is XZ, make it XY)
);
const tex = twgl.createTexture(gl, {src: 'https://i.imgur.com/ZKMnXce.png'});
function render(time) {
time *= 0.001; // seconds
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
const fov = Math.PI * 0.25;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.1;
const far = 100;
const projection = m4.perspective(fov, aspect, near, far);
const eye = [0, 30, 35];
const target = [0, 0, 0];
const up = [0, 1, 0];
const camera = m4.lookAt(eye, target, up);
const view = m4.inverse(camera);
let modelView = m4.rotateY(view, 0.2 * time);
modelView = m4.translate(modelView, [0, 0, 0]);
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
twgl.setUniforms(programInfo, {
projection,
modelView,
tex,
uAnimationStep: Math.sin(time),
});
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>