WebGL绘制三角形
2024-08-27 10:44:00
本文程序实现绘制一个三角形的任务,如下图。
整个程序包含两个文件,分别是:
1. HelloTriangle.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>画一个三角形</title>
</head>
<body onload="startup()">
<canvas id="myGLCanvas" width="600" height="600">
</canvas>
</body>
<script type="text/javascript" src="HelloTriangle.js">
</script>
</html>
2. HelloTriangle.js
var gl;
function createGLContext(canvas) {
var names = ["webgl", "experimental-webgl"];
var context = null;
for (var i=0; i < names.length; i++) {
try {
context = canvas.getContext(names[i]); //获取webgl context绘图上下文
} catch(e) {}
if (context) {
break;
}
}
if (context) {
context.viewportWidth = canvas.width;
context.viewportHeight = canvas.height;
} else {
alert("Failed to create WebGL context!");
}
return context;
}
function loadShader(type, shaderSource) {
var shader = gl.createShader(type);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert("Error compiling shader" + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
function setupShaders() {
//顶点着色器程序
var vertexShaderSource =
'attribute vec4 a_Position;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
//片元着色器程序
var fragmentShaderSource =
'void main(){ \n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' + //gl_FragColor指定像素的颜色
'} \n';
var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Failed to setup shaders");
}
gl.useProgram(shaderProgram);
gl.program= shaderProgram;
}
function initVertexBuffers(gl) {
var vertices = new Float32Array([
0, 0.5, -0.5, -0.5, 0.5, -0.5
]);
var n = 3; // The number of vertices
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_PosLocation = gl.getAttribLocation(gl.program, 'a_Position');
if (a_PosLocation < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_PosLocation, 2, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_PosLocation);
return n;
}
function startup(){
var canvas = document.getElementById('myGLCanvas');//获取<canvas>元素
gl = createGLContext(canvas);
setupShaders();
// Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0, 0, 0, 1);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the rectangle
gl.drawArrays(gl.TRIANGLES, 0, n);
}
参考代码
- Hello Point——WebGL, http://www.cnblogs.com/idealer3d/p/3513838.html
- Professional WebGL Programming: Developing 3D Graphics for the Web,Listing 2-1,http://media.wiley.com/product_ancillary/60/11199688/DOWNLOAD/Listing-2-1.html
- WebGL Programming Guide, https://sites.google.com/site/webglbook/
最新文章
- 解决“chrome提示adobe flash player 已经过期”的小问题
- 【第三篇】ASP.NET MVC快速入门之安全策略(MVC5+EF6)
- scrapy爬虫笔记(二)------交互式爬取
- Nop源码分析三
- eclipse启动报错eclipse failed to create the java virutal machine
- Android测试框架-uiautomator
- java大数总结【转】
- poj1873 The Fortified Forest 凸包+枚举 水题
- php 文件上传的基本方法
- 织梦dedecms|文章模型内容页标签
- Spring内部bean无法通过id获取
- 利用Unity3D与Oculus实现机器情绪安抚师的一种方案
- Struts2学习---拦截器+struts的工作流程+struts声明式异常处理
- redis 五大数据结构__常用命令
- 7.8 paint.c 程序
- leetcode56:Merge Intervals
- Java获取当前时间的年月日方法
- oracle存储过程-获取错误信息
- ZOJ2725_Digital Deletions
- 大端和小端(big endian little endian)
热门文章
- 5 pandas模块,DataFrame类
- [置顶]
 Git学习总结(1)——Git使用详细教程
- noip模拟赛 党
- PatentTips - Invalidating TLB entries in a virtual machine system
- 越来越好玩,SPRINGMVC
- posix线程库1
- javac compiling error ( mising package)
- [React Testing] Confidently Ship Production React Apps
- QT中使用高速排序
- 深入剖析Android四大组件(一)——Activity生命周期具体解释