graphics - why is that gl.clear(gl.COLOR_BUFFER_BIT) and requestAnimationFrame will clear all the primitives I drew before
问题描述
Hi guys I been leanring WebGL and trying to make a Tetris game out of it.
I have a couple of questions I'd like to ask:
- For this game I wanted to first draw the grid as the background. However I noticed that after I drew the line, if I use
gl.clear(gl.COLOR_BUFFER_BIT );
after, it will clear all the lines I drew before. I understand thatgl.clear(gl.COLOR_BUFFER_BIT );
is about clearing the color buffer (and you probably will ask why I would want to do that. Just bear with me. ). Then I tried usegl.uniform4f( uColor, 0, 0, 0, 1);
to send the color again to the fragment shader but it doesn't help.
The snippet is like this
window.onload = function(){
getGLContext();
initShaders();
drawLines( 0, 0, 400,400 );
gl.clear(gl.COLOR_BUFFER_BIT );
gl.uniform4f( uColor, 0, 0, 0, 1);
}
For the game I need the grid as background and I need
requestAnimationFrame
for the game loop and will render Tetrominos inside the loop. Therefore after drawing the line I used thisdraw()
to draw other Tetrominos. However it removes the line I drew before. And when I comment outgl.clear(gl.COLOR_BUFFER_BIT );
insidedraw()
, it will remove the line along with background color.function draw() { gl.clear(gl.COLOR_BUFFER_BIT ); gl.drawArrays(gl.TRIANGLES, 0, index*6); requestAnimationFrame(draw); }
Here is the demo: https://codepen.io/zhenghaohe/pen/LqxpjB
Hope you could answer these two questions. Thanks!
解决方案
这通常是 WebGL 的工作方式。
WebGL 只是绘制成一个像素矩形。没有原始记忆。没有结构。只有代码和生成的画布,它是一个像素矩形。
大多数 WebGL 程序/页面每帧都会清除整个画布,并在每次绘制时重绘 100% 的内容。对于俄罗斯方块,一般代码可能类似于
function render() {
clear the canvas
draw the grid
draw all the stable pieces
draw the current piece
draw the next piece
draw the effects
draw the score
}
任何有关原语或其他结构的知识完全取决于您的代码。
如果您希望网格线是静态的,则可以使用 CSS 设置静态背景或使用另一个画布
使用背景:
const gl = document.querySelector('#c').getContext('webgl');
function render(time) {
time *= 0.001;
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
drawBlocks(gl, time);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
// --- below this line not important to the answer
function drawBlocks(gl, time) {
gl.enable(gl.SCISSOR_TEST);
const numBlocks = 5;
for (let i = 0; i < numBlocks; ++i) {
const u = i / numBlocks;
gl.clearColor(i / 5, i / 2 % 1, i / 3 % 1, 1);
const x = 150 + Math.sin(time + u * Math.PI * 2) * 130;
const y = 75 + Math.cos(time + u * Math.PI * 2) * 55;
gl.scissor(x, y, 20, 20);
gl.clear(gl.COLOR_BUFFER_BIT);
}
gl.disable(gl.SCISSOR_TEST);
}
#c {
background-image: url(https://i.imgur.com/ZCfccZh.png);
}
<canvas id="c"></canvas>
使用 2 个画布
// this is the context for the back canvas. It could also be webgl
// using a 2D context just to make the sample simpler
const ctx = document.querySelector('#back').getContext('2d');
drawGrid(ctx);
// this is the context for the front canvas
const gl = document.querySelector('#front').getContext('webgl');
function render(time) {
time *= 0.001;
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
drawBlocks(gl, time);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
// --- below this line not important to the answer
function drawBlocks(gl, time) {
gl.enable(gl.SCISSOR_TEST);
const numBlocks = 5;
for (let i = 0; i < numBlocks; ++i) {
const u = i / numBlocks;
gl.clearColor(i / 5, i / 2 % 1, i / 3 % 1, 1);
const x = 150 + Math.sin(time + u * Math.PI * 2) * 130;
const y = 75 + Math.cos(time + u * Math.PI * 2) * 55;
gl.scissor(x, y, 20, 20);
gl.clear(gl.COLOR_BUFFER_BIT);
}
gl.disable(gl.SCISSOR_TEST);
}
function drawGrid(ctx) {
// draw grid
ctx.translate(-10.5, -5.5);
ctx.beginPath();
for (let i = 0; i < 330; i += 20) {
ctx.moveTo(0, i);
ctx.lineTo(330, i);
ctx.moveTo(i, 0);
ctx.lineTo(i, 300);
}
ctx.strokeStyle = "blue";
ctx.stroke();
}
#container {
position: relative; /* required so we can position child elements */
}
#front {
position: absolute;
left: 0;
top: 0;
}
<div id="container">
<canvas id="back"></canvas>
<canvas id="front"></canvas>
</div>
至于为什么即使您没有调用 clear 它也会清除,那是因为规范说它应该这样做
推荐阅读
- react-native - react-native android错误:开发服务器返回响应错误代码:404
- laravel - 在 Laravel Blade 中使用 Trait(组件)
- python - 求解变量子集的多元方程
- ruby-on-rails - Rails 6 alpha:Sprockets::FileNotFound
- c# - 自定义形状您的用户控件或面板
- amazon-web-services - 如何用其他 ec2 实例图像替换 ec2 图像?
- node.js - 未处理的拒绝 MongoError: '$inc' 中的美元 ($) 前缀字段 '$inc' 对存储无效
- java - 当我使用千分尺的 PrometheusMeterRegistry 时,指标没有出现在普罗米修斯端点
- swift - 如何在运行时将 CIFilters 添加到视频中
- java - 如何在android中上传到服务器之前调整和压缩文件(pdf,xls,doc,pptx,.....等)base64