webGL

最新推荐文章于 2023-11-24 20:31:56 发布

原创最新推荐文章于 2023-11-24 20:31:56 发布 · 712 阅读

CC 4.0 BY-SA版权

10 篇文章

订阅专栏

本文详细介绍了如何使用webgl进行三维图形渲染，包括创建缓冲区、绑定缓冲区、给缓冲区传送数据的过程，以及初始化着色器、设置顶点属性、激活属性索引和进行渲染的操作步骤。

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

var canvas = document.getElementById(“”).getContext（’webgl’）访问webgl；用变量保存后进行相关操作。
创建缓冲区>>绑定缓冲区>>给缓冲区传送数据。
a. 创建缓冲区： var aBuffer = canvas.createBuffer();
b. 绑定缓冲区:canvas.bindBuffer(cxt.ARRAY_BUFFER,aBuffer);//前一个参数表示针对顶点，还可以是ELEMENT_ARRAY_BUFFER//针对索引。
c.给缓冲区数据
canvas.bufferData(canvas.ARRAY_BUFFER,data,STATIC_DRAW)
//第二个参数是一个数组，保存顶点信息，第三个参数表示缓冲区数据不产生任何变化，一次定义，多次使用，还可以是DYNAMIX_DRAW数据频繁变化，多次定义多次使用。STREAM_DRAW,一次性使用。
var data = [];
data[1.0,1.0,
0.5,0.5,
1.0,1.0];
var postion = canvas.getAttribLoction(program,’pos’)//返回属性索引，第一个参数是程序对象，之前初始化过，第二个参数是变量。
canvas.vertexAttribPointer(position,2,canvas.FLOAT,false,0,0);//第一个参数表示属性索引，第二个表示每个顶点的维度，第三个表示类型，第四个通常为false，后两个表示存储方式和起始位置。
canvas.enableVertexAttribArray(position);//激活指定的属性索引。
进行渲染。
init shader 初始化程序。
var program = initShader(canvas,vertexShaderSource,fragmentShaderSource);
第一个参数为访问webGL的变量，后两个参数为着色器的源代码。

更多信息可以学习three.js框架。