WebGL画点程序v3
来源:互联网 发布:e语言源码 编辑:程序博客网 时间:2024/05/29 16:06
本文程序实现画一个点的任务,如下图。其中,点的颜色由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/
转载请注明出处:http://www.cnblogs.com/opengl/p/7269946.html
阅读全文
0 0
- WebGL画点程序v3
- WebGL画点程序v1
- WebGL画点程序v2
- webGL测试程序
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(3-画一个点-版本1))
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(4-画一个点-版本2))
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(5-通过鼠标点击画点)
- Spring Boot WebGL小程序
- 第一个WEBGL脚本程序
- 【WebGL】绘制一个点(版本1)
- WebGL Learning (二)绘制一个点
- WebGL通过鼠标点击绘点
- 08 WebGL通过点击绘制点
- 48 WebGL绘制圆形的点
- WebGL之旅(十四)点光源
- 【WebGL初学系列之二】WebGL第一个程序,三角形
- WebGL
- WebGL
- tensorflow学习——xml文件写与读
- node学习记录(一)
- 百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系互转
- java数据库编程--PreparedStatement接口
- 轮播图+ImageLoader
- WebGL画点程序v3
- DataFrame.to_dict(orient='xxx')
- [YZOJ][教训]P3247-文件改名
- C++的class
- Vue基础:条件渲染、列表渲染、事件处理
- WebGL绘制三角形
- swift语言_学习笔记
- 解决数据库中文乱码问题
- Jdk1.8中的HashMap实现原理