WebGL Droste效应
我正在尝试在立方体的面上使用WebGL实现。视口中只有一个网格，即立方体，其所有面共享相同的纹理。为了实现Droste效果，我更新了每个帧上的纹理，实际上我只是拍摄了一张画布的快照，我正在绘制其WebGL上下文，随着时间的推移，随着快照越来越多地包含越来越多的嵌套过去的帧，这会导致Droste效果 这里有一个我现在正在使用的演示： 有关守则如下：WebGL Droste效应,webgl,Webgl,我正在尝试在立方体的面上使用WebGL实现。视口中只有一个网格，即立方体，其所有面共享相同的纹理。为了实现Droste效果，我更新了每个帧上的纹理，实际上我只是拍摄了一张画布的快照，我正在绘制其WebGL上下文，随着时间的推移，随着快照越来越多地包含越来越多的嵌套过去的帧，这会导致Droste效果 这里有一个我现在正在使用的演示： 有关守则如下： // Set up fragment and vertex shader and attach them to a program, link the
// Set up fragment and vertex shader and attach them to a program, link the program
// Create a vertex buffer, an index buffer and a texture coordinate buffer
// Tesselate the cube's vertices and fill in the index and texture coordinate buffers
const textureCanvas = document.createElement('canvas');
textureCanvas.width = 256;
textureCanvas.height = 256;
const textureContext = textureCanvas.getContext('2d');
// In every `requestAnimationFrame`:
textureContext.drawImage(context.canvas, 0, 0);
const texture = context.createTexture();
context.bindTexture(context.TEXTURE_2D, texture);
context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, context.RGBA, context.UNSIGNED_BYTE, textureCanvas);
context.generateMipmap(context.TEXTURE_2D);
// Clear the viewport completely (depth and color buffers)
// Set up attribute and uniform values, the projection and model view matrices
context.activeTexture(context.TEXTURE0);
context.bindTexture(context.TEXTURE_2D, texture);
context.uniform1i(fragmentShaderTextureSamplerUniformLocation, 0);
context.drawElements(context.TRIANGLES, 36, context.UNSIGNED_SHORT, 0)
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(
gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0 /* level */)
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.viewport(0, 0, textureWidth, textureHeight);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);