当前位置: 首页 > news >正文

WebGL关键知识点

JavaScript运行在CPU中
着色器语言编译后运行在GPU中
JavaScript可以通过WebGL API来编译执行代码,并在GPU中运行,初始化GPU状态
  • 顶点着色器(vertexShader) 的作用是计算顶点的位置,即提供顶点在裁剪空间中的坐标值,GPU顶点着色器单元中执行
  • 片元着色器(vertexShader) 的作用是计算图元的颜色值,我们可以将片元着色器大致理解成网页中的像素,GPU片元着色器单元中执行
WebGL API -> 浏览器 -> 操作系统 -> 显卡驱动 -> GPU硬件(渲染管线)
渲染管线四个阶段:
应用阶段(Application)
几何处理阶段(Geometry Processing)
光栅化阶段(Rasterization)
像素处理阶段(Pixel Processing)
顶点着色器:(逐顶点处理顶点数据)主要作用就是执行顶点着色器程序对顶点进行变换计算,比如顶点位置坐标执行进行旋转、平移等矩阵变换,变换后新的顶点坐标赋值给内置变量gl_Position,作为顶点着色器的输出,团员装配和光栅化环节的输入。
WebGL顶点着色器程序在Javascript中以字符串的形式存在,通过编译处理后传递给顶点着色器执行。
内置输入变量:gl_VertexID(记录顶点的整数索引)、gl_InstanceID(记录在采用实例绘制时当前图元对应的实例号)
内置输入变量:gl_Position、gl_PointSize
图元装配:顶点变换后的操作时图片装配,时绘制函数drawArrays和drawElements第一个参数绘制模式mode控制顶点如何装配为图元。
点:gl.POINTS
线:gl.LINES
三角形:gl.TRIANGLES
光栅化:把图形分解成一个一个小的像素(类似小格子)
片元着色器:逐片元处理片元数据。通过给内置变量gl_FragColor赋值可以给每一个片元进行着色,值可以是一个确定的RGBA值,可以使一个和片元位置相关的值,也可以是插值后的顶点颜色。通过关键字discard可以实现丢弃哪些片元,被丢弃的片元不会出现在帧缓冲区,自然不会显示在canvas画布
纹理缓冲区、颜色缓冲区、深度缓冲区
attribute:
范围: 只适用于vertexShader,将js代码中的数据传递给vertexShader。
//获取变量内存位置
let aPosition = gl.getAttribLocation(gl.program, "a_Position")
//以为就是1f,二维就是2f,三维就是3f...,给变量内存位置设置赋值
gl.vertexAttrib2f(aPosition, x, y)
uniform
范围:适用于vertexShader或fragmentShader,将js代码中的数据传递给vertexShader或fragmentShader
注意:在使用uniform时必须在前一行添加precision mediump float;确定精度
let color = gl.getUniformLocation(gl.program, "u_color")
gl.uniform3f(color, 1.0, 0.0)
varying
范围:是将顶点着色器中的数据传给片元着色器,而无法直接通过js进行数据传递
注意:使用时需要两边同时varying声明一个相同变量名称的变量,用于数据传递
let a_color = gl.getAttribLocation(gl.program, "a_color")
gl.vertexAttrib3f(a_color, 1.0, 0.0, 0.0)
http://www.dtcms.com/a/517916.html

相关文章:

  • 图片瀑布流网站模板网络空间安全学院
  • 静态网站开发工具有谁帮做网站
  • 单位建设网站的请示上海官方网站建
  • 鄂州网站制作人才招聘企业手机网站建设策划
  • 以用户为中心 建设学校网站苏州学习网站建设
  • 3d视频动画制作优化网站架构
  • 网站建设的淘宝模板西安长安网站建设制作
  • 美食教做网站如何建立免费的网站
  • wordpress设置多站点采集电影做的网站
  • 大模型是什么?从 GPT 到 LLaMA 的核心概念解析
  • 深圳专业优定软件网站建设我想做代理商
  • 美食网站的设计与制作宁波网站开发制作
  • 注册公司网页威海seo优化公司
  • 淘宝客网站做app室内装修设计软件app哪个好
  • 郑州做网站琴免费网络咨询免费建站
  • 企业网站建立意义何在凡客诚品线下店
  • 哪个建站系统适合外贸网站建设国家企业年审营业执照官网
  • 网站首页做的好看wordpress根目录文件有哪些
  • 免费软件下载网站入口正能量佛山专业做网站公司哪家好
  • 深圳优质网站建设案例网站怎么弄缩略图上传
  • 聚美优品一个专注于做特价的网站做游戏模板下载网站
  • 网站开发中安全性的防范做美食网站的意义
  • 高校思政教育工作网站建设东莞网站关键词优化哪家好
  • 记事本做网站怎么调整图片间距自媒体账号注册平台
  • 网站建设微信商城开发建设网站租服务器
  • 苏州市吴中区住房和城乡建设局网站遵义市网站建设公司
  • 兴宁市住房和城乡规划建设局网站站长工具高清
  • 如何建造网站链接wordpress 森林
  • 招远网站建设互联网十
  • 手机网站模板制作wordpress 下载模板