原生webgl学习(四) WebGL绘制矩形(一)

本文档是原生WebGL系列的第四部分,讲解如何使用WebGL绘制矩形。通过修改上一节的三角形代码,利用两个三角形拼接成矩形。文中提供了修改后的代码示例,演示了如何根据顶点数组长度动态调整绘制参数。虽然这个矩形的颜色不会随位置变化,但在JavaScript中已预设了顶点颜色。接下来的章节将探讨如何用WebGL构建中文简体字,并计划改进代码结构,使其更简洁易用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本专栏所有文章示例代码均可在我的gitee码云上获取,读者可自行下载:https://gitee.com/babyogl/learnWebGL;本节代码在文件夹chapter-02里面的color-triangle-02.html

上节课笔者绘制了一个颜色随顶点位置变化的三角形,实现平移、旋转和缩放变换的矩阵计算,并提供了一个可供交互的菜单栏工具:原生webgl学习(三) WebGL中的矩阵运算:平移、旋转和缩放

在前面我们已经画了两次三角形了,这次,改变一些套路,我们画矩形。画矩形的代码跟上一节大同小异,代码解释可以参考上一节:原生webgl学习(三) WebGL中的矩阵运算:平移、旋转和缩放,唯一不同的是顶点坐标发生了改变,利用两个三角形构成一个矩形,只需要将代码中的顶点稍作修改即可:

let positions = [
        -150, -100,
         150, -100,
        -150,  100,
         150, -100,
        -150,  100,
         150,  100
    ];

在画图的时候gl.drawArrays的参数稍作修改即可,由于顶点数组

在HTML中使用原生WebGL在指定的时间(例如00:00点)绘制张图片,你需要做的是准备个图像资源,并结合WebGL的渲染管线。以下是基本步骤: 1. **设置HTML环境**:首先,确保你的HTML文件包含个`<canvas>`元素,这是WebGL绘制的基础容器: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>00点绘制图片</title> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script src="main.js"></script> </body> </html> ``` 2. **获取WebGL上下文**:在JavaScript的`main.js`文件中,你需要初始化WebGL上下文: ```javascript let canvas = document.getElementById('myCanvas'); let gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); if (!gl) { console.error('WebGL not supported'); } ``` 3. **加载图片数据**:使用`Image`对象加载图片: ```javascript let img = new Image(); img.src = 'your-image-url.jpg'; img.onload = function() { // 图片加载完成后进行下步 }; ``` 4. **创建纹理**:在图片加载完成之后,可以创建纹理并将图片数据上传到GPU: ```javascript function createTexture(img) { let texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); // ... 设置纹理参数 ... gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); return texture; } let texture = createTexture(img); ``` 5. **创建顶点数组对象(VAO)和顶点缓冲对象(VBO)**:如果你需要在00:00点精确绘制,可以在适当的时间调用`drawArrays()`或`drawElements()`,这里假设有个简单的2D矩形顶点数据: ```javascript // 创建VAO和VBO let vao, vbo; // ... 初始化顶点数据 ... // 当需要绘制时 function drawImageAtTime(time) { if (time === 0 && !vao) { // 在00:00点且还没有创建VAO时 vao = gl.createVertexArrayObject(); // 注意:实际WebGL中不需要这个操作,因为现代浏览器已经自动处理 // 绑定VAO gl.bindVertexArray(vao); // 绑定纹理 gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture); // 绘制你的图形 gl.drawArrays(gl.TRIANGLES, 0, numVertices); // 替换numVertices为你的顶点数量 } // 渲染你的图像 gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0, 0, 0, 1); // 清除颜色缓冲 gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, numVertices); gl.bindVertexArray(null); // 解绑VAO } drawImageAtTime(new Date().getHours()); // 将时间转换为小时 ``` 请注意,这个例子简化了很多细节,实际应用中还需要考虑纹理坐标、UV映射和更复杂的渲染逻辑。同时,精确到秒或毫秒级别的定时可能会受到浏览器性能的影响,不完全保证在特定时间点准确触发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值