ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

webgl画一个和多个点

2021-10-02 21:03:31  阅读:161  来源: 互联网

标签:多个 一个 attribute webgl program 0.0 缓冲区 gl 着色器


使用WebGL画点

webgl给我的感觉就像是老太太的裹脚布,又臭又长。层层封装,每个人代码都不一样,缺少统一的接口。

自顶向下有理论,guide讲的清楚,但是教材是自顶向下,所以要把guide的代码都搬过去。

着色器

顶点着色器控制点的位置和大小,片元着色器控制点的颜色。

函数调用关系:

gl.drawArrays()->顶点着色器->main->片元着色器->main

取出点并赋值

var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
gl.program = program;

获取program中一个点,然后传值。

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

attribute是沟通的桥梁,也可以说是沟通的约定,如果js要拿到program对象里的变量,就得知道attribute变量的名字。

绘制多个点

缓冲区是显存里的,能被gl访问。就像手动malloc一块内存一样

  1. 创建缓冲区对象:gl.createBuffer()
  2. 绑定缓冲区对象,即指定用途
  3. 将数据写入缓冲区对象
  4. 将缓冲区对象分配给一个attribute变量
  5. 开启attribute变量

标签:多个,一个,attribute,webgl,program,0.0,缓冲区,gl,着色器
来源: https://www.cnblogs.com/ticlab/p/15362681.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有