WebGL（五）——WEBGL缓冲区，绘制三角形

在 WebGL（四）—— 第一个WEBGL程序一篇中，留了一个问题，

像下面这样的写法，字符串拼接真的很让人觉得麻烦：

关于改进：

缓冲区对象

缓冲区对象（buffer object）: 缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。

绘制一个三角形，了解缓冲区对象的使用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="webgl" width="500" height="500" style="background-color: honeydew"></canvas><script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;void main(){gl_Position = a_Position;}</script><script id="fragmentShader" type="x-shader/x-fragment">precision mediump float;uniform vec4 u_FragColor;void main(){gl_FragColor = vec4(1.0,0.0,0.0,1.0);}</script><script>let canvas = document.getElementById("webgl");let gl = canvas.getContext("webgl");let vertexSource = document.getElementById("vertexShader").innerText;let fragmentSource = document.getElementById("fragmentShader").innerText;//创建着色器+编译let verShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(verShader,vertexSource);gl.compileShader(verShader);let fragShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragShader,fragmentSource);gl.compileShader(fragShader);//着色器已经完成了//创建webgl   programvar shaderProgram = gl.createProgram();gl.attachShader(shaderProgram,verShader);gl.attachShader(shaderProgram,fragShader);gl.linkProgram(shaderProgram);gl.useProgram(shaderProgram);//program准备完成//缓冲区部分：//初始化缓冲区：let n = initBuffers(gl);gl.clearColor(0.0,0.0,0.0,1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES,0,n);function initBuffers(gl){let vertices = new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])let n = 3;//点的个数//创建缓冲区,通知webgl，开辟一个显存空间let vertexBuffer = gl.createBuffer();//缓冲区对象绑定到目标对象//ARRAY_BUFFER表示缓冲区对象中包含的顶点数据//ELEMENT_ARRAY_BUFFER包含缓冲区对象中包含的顶点的索引值gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);//向缓冲区写入数据//bufferData方法将vertices传输到gl.ARRAY_BUFFER中，gl.STATIC_DRAW是传输的属性//gl.STATIC_DRAW允许向缓冲区写入一次数据，但是需要绘制很多次，一次修改，多次使用//gl.STREAM_DRAW只会向缓冲区对象中写入一次数据，但是绘制若干次，一次修改，一次使用//gl.DYNAMIC_DRAW会向缓冲区多次写入数据，并且绘制很多次，多次修改，多次使用gl.bufferData(gl.ARRAY_BUFFER, vertices ,gl.STATIC_DRAW);//获取webglProgram对象中a_Position变量let a_Position = gl.getAttribLocation(shaderProgram,'a_Position');//获取program对象 分配给内置变量gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);//建立缓冲区与内置变量的连接gl.enableVertexAttribArray(a_Position);return n;}</script>
</body>
</html>

最终效果：

WebGL（五）——WEBGL缓冲区，绘制三角形相关推荐

webgl渲染管线、缓冲区绘制三角形
文章目录前言一.WebGL是什么二.WebGL渲染管线 1 获取坐标元素 2 顶点着色器 3 图元装配 4 光栅化阶段 5 片元着色器三. 绘制一个三角形 1 初始化一个HTML 2 创建画布 ...
【OpenGL】十五、OpenGL 绘制三角形 ( 绘制 GL_TRIANGLE_FAN 三角形扇 )
文章目录一.绘制 GL_TRIANGLE_FAN 三角形 1.绘制 3 个点的情况 2.绘制 4 个点的情况 3.绘制 5 个点的情况 4.绘制 6 个点的情况二.相关资源一.绘制 GL_TRI ...
【OpenGL】绘制三角形
[OpenGL]绘制三角形效果展示准备条件图形渲染管线的各个阶段概览创建着色器程序与绘制OpenGL图元参考资料效果展示准备条件首先已经通过[OpenGL]使用OpenGL创建窗口使用 ...
HTML5画布（canvas）绘制三角形，矩形，圆形
canvas标签: <canvas id="cavsElem" width="400" height="300">您的浏览器不支 ...
【OpenGL学习】绘制三角形
绘制三角形上节中完成了窗口的绘制,这节我们主要实现在窗口中完成一个最简单的三角形的绘制,同样,要完成一个三角形的绘制,需要以下内容: Vertex Array 存放顶点数据的数组(实际上存放的是顶点 ...
【OpenGL】十四、OpenGL 绘制三角形 ( 绘制 GL_TRIANGLE_STRIP 三角形 | GL_TRIANGLE_STRIP 三角形绘制分析 )
文章目录一.绘制 GL_TRIANGLE_STRIP 三角形二.GL_TRIANGLE_STRIP 三角形绘制分析三.相关资源一.绘制 GL_TRIANGLE_STRIP 三角形该模式绘制首 ...
【OpenGL】十三、OpenGL 绘制三角形 ( 绘制单个三角形 | 三角形绘制顺序 | 绘制多个三角形 )
文章目录一.绘制三角形二.三角形绘制顺序 1.绘制正面 2.三个点逆时针方向排列 3.三个点顺时针方向排列 4.设置点的正面方向三.绘制多个三角形四.相关资源一.绘制三角形三角形绘制即绘制 ...
Metal之渲染绘制三角形
准备工作 Metal渲染的构建流程, 请参考:Metal之简单渲染动态切换屏幕颜色 Metal三角形的渲染显示与渲染构建流程大体一致, 本文主要介绍以下方面的修改和实现: ① metal渲染文件 ② ...
viewpager初始化fragment没有绘制_NDK OpenGL ES渲染系列之绘制三角形
前言新的知识学习都是循序渐进的,从基础到复杂.前面OpenGL ES概念已经介绍了OpenGL ES的相关概念,这篇文章开始我们就正式开始OpenGL ES渲染系列第一站---绘制三角形.绘制三角 ...

WebGL（五）——WEBGL缓冲区，绘制三角形

WebGL（五）——WEBGL缓冲区，绘制三角形

缓冲区对象

WebGL（五）——WEBGL缓冲区，绘制三角形相关推荐

最新文章

热门文章