WebGL画点程序v1
2024-08-31 05:46:34
本文程序实现画一个点的任务,如下图。其中,点的位置直接给定(“硬编码”)在顶点着色器中。
整个程序包含两个文件,分别是:
1. HelloPoint1.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="640" height="480">
</canvas>
</body>
<script type="text/javascript" src="HelloPoint1.js">
</script>
</html>
2. HelloPoint1.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 = 'void main(){ \n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' + //gl_Position指定了点的位置
' 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 startup(){
var canvas = document.getElementById('myGLCanvas');//获取<canvas>元素
gl = createGLContext(canvas);
setupShaders();
gl.clearColor(0.0, 0.0, 0.0, 1.0);//指定清空<canvas>的颜色
gl.clear(gl.COLOR_BUFFER_BIT);//清空<canvas>
gl.drawArrays(gl.POINTS, 0, 1);//从第0个元素开始,在指定位置(gl_Position)画1个点
}
参考代码
- 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
最新文章
- js添加var和不加var区别
- java 26 - 8 网络编程之 TCP协议的练习
- codevs 1215 迷宫
- Linq 中的 left join
- C# lock
- uva 1449 - Dominating Patterns
- Mongo客户端
- poj3233之经典矩阵乘法
- discuz使用总结
- python的while嵌套 99乘法表 三角形和正方形
- 使用window.performance分析web前端性能
- [STM32F103]DMA原理
- Oracle+PL+SQL从入门到精通.丁士锋.清华大学出版社.2012
- 小组互评Alpha版本
- java应用健康检查
- Spring boot初入门
- 微信小程序开发 [00] 写在前面的话,疯狂唠唠
- 引用第三方高德地图接口---使用js脚本进行开发地图定位的步骤
- Python 类的名称空间和组合
- 遇到的有关js继承和原型链的一个问题
热门文章
- Python 1 初识python
- python编码小记
- CodeForces - 357D - Xenia and Hamming
- .Net程序猿玩转Android开发---(6)线性布局LinearLayout
- kendo AutoComplete实现多筛选条件
- wordpress相关
- [odroid-pc] ubuntu12.04 android4.0移植到odroid-pc过程
- 启动VIP报CRS-1028/CRS-0223致使VIP状态为UNKNOWN故障分析与解决
- LeetCode208:Implement Trie (Prefix Tree)
- TF101出现“DMClient已停止”处理办法