webgl 绘制三角形 2.1

我的娘噶, 我真的学的太慢了, webgl,不行得加快脚楽。

上节课就是随便介绍了一下webgl, 这节课的知识特别的多呢。 感觉得分为两次讲呢。

你就随着我的脚步慢慢走吧。

一 、首先,介绍一下,webgl里面的 坐标系。右手坐标系。不说了,直接上图

 

             

  这就不用介绍了吧, 伸出你的右手比划一下,Z轴是穿出你的屏幕的,刺向你的哦, 不要眨眼, 不会伤害你的眼睛, 不过温馨提示,注意休息眼睛哦。

二 、 介绍两个shader, 与显卡GPU有关

webgl的程序需要两个着色器,  顶点着色器(vertex Shader) 和 片段着色器 (fragment Shader)。

1.vertex Shader: 顶点shader, 以后我们就这样称呼了。

描述顶点的特性 (如: 位置, 大小, 颜色),就是画一个点,在二维或三维空间中的坐标, 这个点的大小, 和点的颜色。

<script id = "shader-vs">
attribute vec3 v3Position; // attribute , 变量类型, 只在顶点shader里面使用个,只是定义顶点的位置。 这个以后会专门出一篇介绍变量的。
void main(void){
gl_Position = vec4(v3Position, 1.0); // 设置顶点的位置, vec3 3个浮点数表示的矢量
}
</script>

2.fragmentShader: 片段shader。

对片元进行处理, 片元可以理解为像素。 比如光照的效果, 明暗,影子等。这些通过设置片元来体现出来。 ·
<script id = "shader-fs">
void main(void){
//指定三角形的颜色
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
 

 注意 : 3维世界里面, 点划线,线画面,再构成我们形态各异的立体, 最小单元是点哦。 不过我们以后所建立的模型是由三角形筑成的。

看到了咩,都是三角形构成了一只兔子哦。

三、 创建一个可执行程序

programObject = webgl.createProgram(); 

 然后关联两个shader.

四、 创建一个缓冲区

缓冲区对象是  webgl  系统中的一块存储区, 可以保存 所有的顶点数据。

1. 创建缓冲区

webgl.createBuffer();

2.  绑定缓冲区

webgl.bindBuffer(target, buffer);

target :两个参数,

  webgl. ARRAY_BUFFER  表示缓冲区对象中包含了顶点的数据。

  webgl.ELEMENT_ARRAY_BUFFER 表示缓冲区包含了顶点的索引值。

buffer: 之前所创建的缓冲区, 在在这里与之进行绑定

3.   向缓冲区中写入数据

webgl.bufferData(target , data, usage)

target : webgl.ARRAY_BUFFER  或 webgl.ELEMENT_ARRAY_BUFFER

data:  写入缓冲区对象的数据usage:  webgl.STATIC_DRAW 向缓冲区中写入一次数据, 但需要绘制很多次

     webgl.STREAM_DRAW 写入一次数据,绘制若干次

     webgl.DYNAMIC_DRAW  向缓冲区中多次写入数据, 绘制多次

4.

triangleBuffer = webgl.createBuffer();                          //1.  创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);              //2.  绑定缓冲区对象,
webgl.bufferData(webgl.ARRAY_BUFFER, dataPoint, webgl.STATIC_DRAW);   //3.  将数据写入缓冲区

webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);      //4.  缓冲区和 attribute 变量绑定
webgl.enableVertexAttribArray(v3PositionIndex);               // 5.  开启attribute 变量


五、 绘制图形

webgl.drawArrays(webgl.TRIANGLES, 0, 3);

webgl.drawArrays(mode, first, count);

1. mode , 绘制的方式

2. first ,  从哪个顶点开始绘制 ,   整型数

3. count , 绘制所需要的顶点数 , 整数型



转载于:https://www.cnblogs.com/doudian6/p/6385850.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebGL是一种用于在Web浏览器中绘制3D图形的技术。要绘制多边形,你需要定义顶点数据,并使用WebGL绘制函数将其绘制到画布上。 以下是一个使用WebGL绘制三角形的示例: ```javascript // 获取画布元素 var canvas = document.getElementById("myCanvas"); // 获取WebGL上下文 var gl = canvas.getContext("webgl"); // 定义顶点数据 var vertices = [ -0.5, -0.5, 0.0, // 第一个顶点的坐标 0.5, -0.5, 0.0, // 第二个顶点的坐标 0.0, 0.5, 0.0 // 第三个顶点的坐标 ]; // 创建缓冲区对象 var vertexBuffer = gl.createBuffer(); // 绑定缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // 将顶点数据写入缓冲区对象 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // 获取顶点着色器代码 var vertexShaderSource = ` attribute vec3 aPosition; void main() { gl_Position = vec4(aPosition, 1.0); } `; // 创建顶点着色器对象 var vertexShader = gl.createShader(gl.VERTEX_SHADER); // 编译顶点着色器代码 gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); // 获取片元着色器代码 var fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; // 创建片元着色器对象 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // 编译片元着色器代码 gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); // 创建着色器程序对象 var program = gl.createProgram(); // 将顶点着色器和片元着色器附加到着色器程序对象上 gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // 链接着色器程序对象 gl.linkProgram(program); // 使用着色器程序对象 gl.useProgram(program); // 获取顶点位置属性的位置 var aPosition = gl.getAttribLocation(program, "aPosition"); // 启用顶点属性数组 gl.enableVertexAttribArray(aPosition); // 指定顶点属性数组的数据格式和位置 gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); // 清空画布 gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // 绘制三角形 gl.drawArrays(gl.TRIANGLES, 0, 3); // 刷新画面 gl.flush(); ``` 这段代码首先获取了画布元素和WebGL上下文,然后定义了三个顶点的坐标数据。接下来,创建了顶点着色器和片元着色器,并编译它们的代码。然后,创建了着色器程序对象,并将顶点着色器和片元着色器附加到着色器程序对象上。之后,启用顶点属性数组,并指定顶点属性数组的数据格式和位置。最后,清空画布,绘制三角形,并刷新画面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值