WebGL 绘制三角形示例
CSDN 2024-06-16 16:33:11 阅读 88
还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
原生WebGL API用于绘制图形时相对复杂，因为它要求你直接与GPU通信并管理顶点数据、着色器、纹理等。下面是一个使用原生WebGL API来绘制一个简单三角形的基本示例代码。这个例子假设你已经有了一个HTML页面，其中包含一个<canvas>元素。
<!DOCTYPE html><html><head> <title>WebGL Triangle</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; } </style></head><body> <canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById('myCanvas'); var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); if (!gl) { alert('WebGL not supported.'); return; } // 配置顶点位置数据 var vertices = [ -0.5, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -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 a_position; void main() { gl_Position = vec4(a_position, 1.0); } `; // 设置片段着色器源码 var fragmentShaderSource = ` precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; // 创建并编译顶点着色器 function createShader(gl, type, source) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (success) { return shader; } console.log(gl.getShaderInfoLog(shader)); gl.deleteShader(shader); } var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); // 创建并链接着色器到着色器程序 var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); // 获取顶点属性位置 var positionAttributeLocation = gl.getAttribLocation(program, 'a_position'); gl.enableVertexAttribArray(positionAttributeLocation); gl.vertexAttribPointer(positionAttributeLocation, 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); </script></body></html>
这段代码执行了以下步骤：
获取WebGL绘图上下文。定义顶点数据并将其加载到一个缓冲区对象中。编写并编译顶点和片段着色器。创建一个着色器程序，将着色器链接到程序中。配置顶点属性以指向缓冲区中的数据。清除颜色缓冲区。使用drawArrays方法来绘制三角形。
请确保在支持WebGL的现代浏览器中测试此代码，否则它可能不会工作。如果WebGL不被支持，页面会弹出警告框提示用户。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。