<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Draw a point (1)</title>
</head>
<body οnlοad="main();">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script type="text/javascript" src="/WebGL/js/lib/webgl-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/webgl-debug.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/cuon-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/HelloPoint1.js"></script>
<script>
</script>
</body>
</html>
//顶点着色器程序
var VSHADER_SOURCE =
'void main() {\n' +
'gl_Position = vec4(0.0,0.0,0.0,1.0);\n' + //设置坐标
'gl_PointSize = 10.0;\n' + //设置尺寸 gl_PointSize为浮点型 不然报错
'}\n';
//片元着色器程序
var FSHADER_SOURCE =
'void main() {\n' +
'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' + //设置颜色
'}\n';
function main(){
//获取<canvas>元素
var canvas = document.getElementById('webgl');
//获取WebGL绘图上下文
var gl = getWebGLContext(canvas);
if(!gl){
console.log('Failed to get the rendering context for WebGL');
return;
}
//初始化着色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
console.log('Failed to initialize shaders');
return;
}
//设置<canvas>的背景颜色-----黑色
gl.clearColor(0.0,0.0,0.0,1.0);
//清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
//绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}
//矢量(vector)也可译作向量 (比如“法向量”),统一称为“矢量”
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
