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

webgl入门实例-09索引缓冲区示例

实现效果

在这里插入图片描述

实现代码

<!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_Begin/*** 索引缓冲区(也称为元素数组缓冲区)是WebGL中一种优化渲染性能的重要机制,它允许您重用顶点数据来绘制复杂的几何图形。* 减少内存使用:可以重用顶点数据而不需要重复存储* 提高性能:减少需要传输到GPU的数据量* 支持复杂几何:更容易构建由多个三角形组成的复杂形状*/var 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);// n代表法线var jsArrayData = [// 每6个为一个顶点的信息//x     y       z       nx      ny      nz-0.5,   +0.5,   0.0,    0.0,    0.0,    0.0, // 0+0.5,   +0.5,   0.0,    0.0,    0.0,    0.0, // 1+0.5,   -0.5,   0.0,    0.0,    0.0,    0.0, // 2-0.5,   -0.5,   0.0,    0.0,    0.0,    0.0, // 3];//右顶点var indexDatas = [0,1,2, // 第一个三角形对应 jsArrayData 中的 0 1 20,2,3, // 第二个三角形];//指定绘制所使用的顶点数据 从 该缓冲区中获取var triangleBuffer  =   webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);// 将顶点数据存入缓冲区webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);var indexBuffer     =   webgl.createBuffer();webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexDatas), webgl.STATIC_DRAW);// 设置重绘背景的颜色webgl.clearColor(0.0, 0.0, 0.0, 1.0);//! 执行绘制,即将背景清空成制定的颜色(clearColor)webgl.clear(webgl.COLOR_BUFFER_BIT);webgl.enableVertexAttribArray(v3PositionIndex);webgl.vertexAttribPointer(v3PositionIndex, 3, // 每个点对应 类型为 vec4(), 如这里写的3, 假设顶点缓冲区中的xyz都为1.0, 3-->vec4(1.0, 1.0, 1.0, 1.0)   2--> vec4(1.0, 1.0, 0.0, 1.0)  1-->vec4(1.0, 0.0, 0.0, 1.0)webgl.FLOAT, false, // 是否正交化4 * 6, // jsArrayData中的没6个存储一个点的信息0 // 顶点的起始位置);// 索引缓冲区使用 drawElements webgl.drawElements(webgl.TRIANGLES,6, // 画6给索引, 即indexDatas的长度webgl.UNSIGNED_SHORT, // 索引缓冲区中的数据类型0 // 顶点位置偏移量);//Sandcastle_End}window.onload = function() {Sandcastle.finishedLoading();Init()}</script>
</body></html>
http://www.xdnf.cn/news/5257.html

相关文章:

  • BH1750光照传感器---附代码
  • java + spring boot + mybatis 通过时间段进行查询
  • 【JavaScript】二十四、JS的执行机制事件循环 + location + navigator + history
  • 基于尚硅谷FreeRTOS视频笔记——13—HAL库和RTOS时钟源问题
  • UE学习记录part18
  • Java锁的分类与解析
  • LeetCode算法题(Go语言实现)_51
  • Vue3如何选择传参方式
  • C++面试
  • 【HDFS入门】HDFS核心配置与优化指南概述
  • 【Python学习笔记】Pandas实现Excel质检记录表初审、复核及质检统计
  • webgl入门实例-08索引缓冲区的基本概念
  • 杂记-LeetCode中部分题思路详解与笔记-HOT100篇-其三
  • 二分查找-LeetCode
  • 代码学习总结(三)
  • 算法5-16 对二进制字符串解码
  • 多 Agent 协作怎么整:从谷歌A2A到多Agent交互方案实现
  • STL简介(了解)
  • 【无标题】
  • Qt核心知识总结
  • 第六章:6.3求一个3*3的整型矩阵对角线元素之和
  • ESP32-idf学习(二)esp32C3作服务端与电脑蓝牙数据交互
  • 机器学习有多少种算法?当下入门需要全部学习吗?
  • vscode+keil嵌入式软件开发全流程
  • C++笔记-list
  • 【已更新】2025华中杯C题数学建模网络挑战赛思路代码文章教学数学建模思路:就业状态分析与预测
  • 06-DevOps-自动构建Docker镜像
  • 动态规划专题5:最长上升子序列
  • LeetCode hot 100—括号生成
  • 数据中台(大数据平台)之数据质量管理