WebGL画点程序v3
本文程序实现画一个点的任务，如下图。其中，点的颜色由Javascript传到片元着色器程序中。
整个程序包含两个文件，分别是：
1. HelloPoint3.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="HelloPoint3.js">
</script>
</html>
2. HelloPoint3.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' + // attribute variable
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
//片元着色器程序
var fragmentShaderSource =
'precision mediump float;\n' +
'uniform vec4 u_FragColor;\n' + // uniform変量
'void main() {\n' +
' gl_FragColor = u_FragColor;\n' +
'}\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();
// Get the storage location of a_Position
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;
}
// Get the storage location of u_FragColor
var u_FragColorLocation = gl.getUniformLocation(gl.program, 'u_FragColor');
if (!u_FragColorLocation) {
console.log('Failed to get the storage location of u_FragColor');
return;
}
// Pass vertex position to attribute variable
gl.vertexAttrib3f(a_PosLocation, 0.0, 0.0, 0.0);
// Pass the color of a point to u_FragColor variable
gl.uniform4f(u_FragColorLocation, 1.0, 1.0, 0.0, 1.0);
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
- WebGL Programming Guide, https://sites.google.com/site/webglbook/
WebGL画点程序v3的更多相关文章
- WebGL画点程序v2
本文程序实现画一个点的任务,如下图.其中,点的位置坐标由Javascript传到着色器程序中,而不是直接给定("硬编码")在顶点着色器中. 整个程序包含两个文件,分别是: 1. H ...
- WebGL画点程序v1
本文程序实现画一个点的任务,如下图.其中,点的位置直接给定("硬编码")在顶点着色器中. 整个程序包含两个文件,分别是: 1. HelloPoint1.html <!DOCT ...
- WebGl 画线
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 【Gamma】“北航社团帮”测试报告——小程序v3.0
目录 测试计划.过程和结果 后端测试--单元测试与覆盖率 后端测试--压力测试 展示部分数据 平均数据 前端测试--小程序v3.0 新功能 各页面均可正常打开,跳转,回退 授权登录与权限检查 页面数据 ...
- Java编写画图板程序细节-保存已画图形
没有Java编写画图板程序细节-保存已画图形 一.为何我们要保存画图板上已画图形呢? 有很多人会问,为什么我们一定要保存画图板上已经画好了的图形呢?原因很简单.当我们在画图板上画完自己想画的图形后 ...
- 【Gamma】“北航社团帮”发布说明——小程序v3.0
目录 Gamma版本新功能 小程序v3.0新功能 新功能列表 新功能展示 这一版修复的缺陷 Gamma版本的已知问题和限制 小程序端 网页端 运行.安装与发布 运行环境的要求 安装与发布 小程序 网页 ...
- WebGL画一个10px大小的点
WebGL程序在屏幕上同时使用HTML和javascript来创建和显示三维图形.WebGL中新引入的<canvas>元素标签,它定义了网页上的绘图区域. 由于<canvas> ...
- webgl画个点
function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(c ...
- matlab画棋盘格程序
转载请注明出处:zhouyelihua**http://blog.csdn.net/zhouyelihua/article/details/46674191** 意义 在摄像机标定过程中经常须要打印棋 ...
随机推荐
- c# 异步执行
c#异步执行 Action logAction = () => {////执行的操作 }; logAction.BeginInvoke(null, null);
- eclipse 快捷键及使用技巧
一.程序的编译和运行的环境配置(一般不改) window -- Preferences -- Java 编译环境:Compiler 默认选中的就是最高版本. 运行环境:Installed JREs 默 ...
- ActiveMQ学习总结（10）——ActiveMQ采用Spring注解方式发送和监听
对于ActiveMQ消息的发送,原声的api操作繁琐,而且如果不进行二次封装,打开关闭会话以及各种创建操作也是够够的了.那么,Spring提供了一个很方便的去收发消息的框架,spring jms.整合 ...
- Maven学习总结（5）——聚合与继承
Maven学习总结(五)--聚合与继承 一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 <modules> <module> ...
- 怎样给你的Android 安装文件（APK）瘦身
本文源地址:怎样给你的Android 安装文件(APK)瘦身 Android的apk文件越来越大了这已经是一个不争的事实. 在Android 还是最初版本号的时候,一个app的apk文件大小也还仅仅有 ...
- [PWA] Check Online Status by using the NavigatorOnLine API
Even if you have your application fully cached, you couldn’t perform any external request without in ...
- hdu 4941 Magical Forest （map容器）
Magical Forest Time Limit: 24000/12000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Other ...
- oc48--多个对象内存管理练习
// // main.m // 多个对象内存管理练习 // // ARC是Xcode帮我们生成内存释放的代码,MRC是需要我买自己写retain和release.想研究内存管理只能在MRC,管理对象就 ...
- Catalan数（卡特兰数）
Catalan数(卡特兰数) 卡特兰数:规定h(0)＝1,而h(1)＝1,h(2)＝2,h(3)＝5,h(4)＝14,h(5)＝42,h(6)＝132,h(7)＝429,h(8)＝1430,h(9)＝ ...
- C# 验证数字的正则表达式集
验证数字的正则表达式集 博客分类: 正则 正则表达式 验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d ...