[✔️]cocos creator shader 入门教程2:webgl动起来

简介: [✔️]cocos creator shader 入门教程2:webgl动起来

在上一节,我们成功使用webgl绘制了一个点,这一节我们就来实现让这个点动起来。


分析:如何让点动起来?


先复习下上节课的shader:


  • vertex shader


void main() { 
    gl_Position = vec4(0.0,0.0,0.0, 1.0); 
    gl_PointSize = 10.0; 
}


  • fragment shader


void main() { 
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
}


运动的本质就是坐标的变化,我们想要修改坐标,其实就是要修改gl_Position,也就是说我们需要在vertex shader定义一个变量,同时程序能够控制变量的值。


修改点的位置


因为shader使用的是glsl语言,这里就需要用到attribute, attribute变量只能定义在vertex shader中,attribute更像是一个修饰符,表示这是一个可以被js代码修改的属性(为了方便理解暂且这么解释,更专业的解释你需要看glsl语言规范)。


  • vertex shader修改


attribute vec2 a_pos;
void main()
{
    gl_Position = vec4(a_pos.x,a_pos.y,0.0, 1.0);
    gl_PointSize = 10.0;
}


  • 在shader中我们定义了a_pos属性,然后将a_pos.x、a_pos.y分别传递给了gl_Position,当我们通过代码修改a_pos后,gl_Postion也会随之改变。


  • 在js代码中,我们可以这样传递数据给a_pos


// 放到program之后,从vertex shader里面获取a_pos属性
const a_pos = gl.getAttribLocation(program, "a_pos");
// 设置a_pos属性值
gl.vertexAttrib2f(a_pos, 0.9, 0.9);


重新运行长须观察到点的位置渲染到了右上角,通过这个表现,不难推理出,webgl的坐标是[-1, 1]


image.png


实现:让点动起来!


原理也非常简单,不停的改变a_pos属性即可:


// ...
let x = -1;
setInterval(() => {
    x += 0.1;
    if (x > 1) {
        x = -1;
    }
    gl.vertexAttrib2f(a_pos, x, 0);
    gl.drawArrays(gl.POINTS, 0, 1);
}, 100)


这样子,我们就看到了一个红点,从左往右移动,完整的代码我放到了CodePen


整体思路回顾:


  1. vertex shader增加attribute vec2 a_pos,并且将a_pos的值赋给gl_Position


  1. 通过getAttribLocation获取a_pos


  1. 通过vertexAttrib2f设置a_pos的值,并调用draw进行渲染绘制


  1. 使用定时器,改变a_pos,进而实现点的移动效果


定时器的一个callback,我们通常称为一帧,要绘制出复杂的游戏画面,通常需要进行多次的draw函数调用,在这一帧中我们调用了几次draw函数,那么我们通常就说drawcall是多少,drawcall是性能优化的一个非常重要的指标。


当然以上的代码非常的简陋,在实际项目中我们也不会使用setInterval驱动渲染更新,因为无法保证100ms,但是这个思路是通用的。


游戏引擎其实就是一个死循环,每次循环开始都要擦除上一次的绘制结果,然后计算出当前帧的绘制数据,多次调用draw函数进行渲染,希望到这里,能让你对游戏引擎有更深层次的理解。


拓展


上边的代码中,我们如果要绘制多个不同颜色、不同位置、不同大小的点,就比较麻烦,而且数据量比较多,webgl当然考虑到了这种情况,所以产生了buffer的概念,并且可以通过gl.vertexAttribPointer进行数据的绑定,这里就不再展开了,留给你自己探索了。




目录
相关文章
|
前端开发 UED
你需要知道的 CSS 技巧:图片篇2 你的图片裂开了怎么办?
你需要知道的 CSS 技巧:图片篇2 你的图片裂开了怎么办?
1004 0
|
10月前
|
人工智能 搜索推荐 API
|
数据采集 Web App开发 搜索推荐
项目配置之道:优化Scrapy参数提升爬虫效率
项目配置之道:优化Scrapy参数提升爬虫效率
|
安全 定位技术 API
探讨如何在Flutter中集成支付、地图等第三方服务,以及集成过程中需要注意的问题和最佳实践
【6月更文挑战第11天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,注意服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则包括选择地图服务、获取API密钥、初始化地图组件和添加交互功能。集成时要选择稳定插件、仔细阅读文档,处理错误,优化性能并遵循安全规范。随着Flutter生态发展,更多优质服务将可供选择。
277 2
|
移动开发 前端开发 JavaScript
移动端 Hybrid 开发:RN、Flutter与Webview的抉择与融合
【4月更文挑战第6天】本文对比了移动端Hybrid开发的三种主流方案——React Native (RN),Flutter和Webview。RN基于JavaScript,适合React熟练的团队,适用于性能要求高、跨平台的中大型应用。Flutter,使用Dart语言,以其高性能和自定义UI适用于追求极致体验的项目。Webview适合快速移植Web应用至移动端,开发成本低但性能受限。选择时要考虑项目规模、性能需求、团队技术栈等因素,实际应用中常采用混合策略,如RN/Flutter+Webview、原生模块集成等,以实现最佳开发效果和长期技术规划。
996 0
|
XML 安全 测试技术
Jinja2:使用Python进行模板渲染的艺术
Jinja2:使用Python进行模板渲染的艺术
475 0
|
编解码 安全 小程序
Flutter屏幕适配
Flutter屏幕适配
|
存储 关系型数据库 MySQL
PolarDB的性能对比
PolarDB的性能对比
1062 1
|
缓存 Android开发
Skia深入分析5——skia文字绘制的实现
文字绘制主要包括编码转换(主要是中文)、字形解析(点线或image)和实际渲染三个步骤。在这个过程中,字形解析和实际渲染均是耗时步骤。Skia对文字解析的结果做了一套缓存机制。在中文字较多,使用多种字体,绘制的样式(粗/斜体)有变化时,这个缓存会变得很大,因此Skia文字缓存做了内存上的限制。 1、SkPaint 文字绘制与SkPaint的属性相关很大,先回头看下SkPaint相关
7328 0
|
JavaScript 前端开发 C++
CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解
CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解
380 0