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

webgl入门实例-07顶点缓冲区示例

news 来源：原创 2025/5/15 5:30:38

实现效果

在这里插入图片描述

实现代码

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><meta name="description" content="Render voxel primitives with different shape types." /><meta name="cesium-sandcastle-labels" content="Showcases, WEBGL" /><title>WEBGL Demo</title>
</head><body><canvas id="myCanvas" style="border: 1px solid red;" width='600' height='600'></canvas><script type="text/plain" id="VSHADER_SOURCE">attribute vec3 v3Position;void main(void){gl_Position = vec4(v3Position, 1.0);}</script><script type="text/plain" id="FSHADER_SOURCE">void main(void){gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0);}</script><script id="cesium_sandcastle_script">"use strict";function Init() {//Sandcastle_Beginvar webgl = null;var VSHADER_SOURCE = document.getElementById("VSHADER_SOURCE").textContent;var FSHADER_SOURCE = document.getElementById("FSHADER_SOURCE").textContent;var canvas = document.getElementById('myCanvas');webgl = canvas.getContext("webgl");webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vertexShaderObject,VSHADER_SOURCE);webgl.shaderSource(fragmentShaderObject,FSHADER_SOURCE);webgl.compileShader(vertexShaderObject);webgl.compileShader(fragmentShaderObject);if (!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) { alert("error:vertexShaderObject");return; }if (!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)){ alert("error:fragmentShaderObject");return;}var programObject = webgl.createProgram();webgl.attachShader(programObject, vertexShaderObject);webgl.attachShader(programObject, fragmentShaderObject);var v3PositionIndex = 0;webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");webgl.linkProgram(programObject);if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) { alert("error:programObject"); return; }webgl.useProgram(programObject);//1 顶点缓冲区//2 索引缓冲区//3 纹理//4 帧缓冲//5 深度缓冲区//6 颜色缓冲区//7 模板缓冲区//1 模型矩阵//2 观察矩阵//3 投影矩阵//4 视口var vertexArray = [0.0, 1.0, 0.0,//上顶点-1.0, -1.0, 0.0,//左顶点1.0, -1.0, 0.0//右顶点];// 该示例中并未使用到z坐标，因此以下顶点数据与 vertexArray 相等 对应的 ebgl.vertexAttribPointer的第二个参数变为2即可// 如：webgl.vertexAttribPointer(v3PositionIndex,2,webgl.FLOAT,false,0,0)var vertexArray1 = [0.0, 1.0,//上顶点-1.0, -1.0,//左顶点1.0, -1.0//右顶点];// 顶点缓冲区var triangleBuffer = webgl.createBuffer(); // 指定绘制所使用的顶点数据 从 该缓冲区中获取webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);// 分配内存 Float32单精度  Float16半精度// webgl.STATIC_DRAW的作用是告诉显卡该数据在内存中不会被改变// webgl.STREAM_DRAW数据偶尔变化，变得不多的情况// webgl.DYNAMIC_DRAW数据动态变化大// 性能优化：尽量减少数据更新，变多少，更新多少webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertexArray), webgl.STATIC_DRAW); //申请在显卡中开辟新的内存 将数据存入显卡内存webgl.clearColor(0.0, 0.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT);webgl.enableVertexAttribArray(v3PositionIndex);webgl.vertexAttribPointer(v3PositionIndex, 3, // 对应gl_Position，对应vec4，vec4中，除第四个分量为1外，其余未分配的将自动填充为0，如第一个点 vec4( 0.0, 1.0, 0.0, 1.0)webgl.FLOAT, false, 0,  // 指定多少个字节存储一个顶点的信息，如 x, y, z 共3个0);webgl.drawArrays(webgl.TRIANGLES, 0, 3 // 绘制3个点，顶点shader就被执行3次);//Sandcastle_End}window.onload = function() {Sandcastle.finishedLoading();Init()}</script>
</body></html>