WebGL绘制三角形
1.html部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Chapter 1. First WebGL Demo</title>
<!-- 顶点着色器和片元着色器代码 -->
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main(){
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void main(){
gl_FragColor = vec4( 1.0, 0.0, 1.0, 1.0 );
}
</script>
<!-- 一组相关的JS库 -->
<!-- 注意:所有文件里的src根据自己存放的路径写-->
<script type="text/javascript" src="../js/common/webgl-utils.js"></script>
<script type="text/javascript" src="../js/common/initShaders.js"></script>
<script type="text/javascript" src="../js/common/glMatrix-0.9.5.min.js"></script>
<!-- 绘制三角形的JS代码 -->
<script type="text/javascript" src="../js/ch01/triangle.js"></script>
</head>
<body>
<canvas id="triangle-canvas" style="border:none;" width="500" height="500"></canvas>
</body>
</html>
2.js文件夹
(包含ch01文件夹和common文件夹)
ch01文件夹下
1.triangle.js
"use strict";
var gl;
var points;
window.onload = function init(){
var canvas = document.getElementById( "triangle-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if( !gl ){
alert( "WebGL isn't available" );
}
// Three Vertices
var vertices = [
-1.0, -1.0,
0.0, 1.0,
1.0, -1.0,
/*0.0, -1.0,
1.0, -1.0,
1.0, 1.0,
0.0, -1.0,
1.0, 1.0,
0.0, 1.0*/
/*-0.5, -0.5,
0.0, 0.5,
0.5, -0.5*/
];
// Configure WebGL
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
// Load shaders and initialize attribute buffers
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
// Load the data into the GPU
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertices ), gl.STATIC_DRAW );
// Associate external shader variables with data buffer
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
render();
}
function render(){
gl.clear( gl.COLOR_BUFFER_BIT );
//gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 );
gl.drawArrays( gl.TRIANGLES, 0, 3 );
//gl.drawArrays( gl.TRIANGLE_FANS, 3, 6 );
}
common文件夹下
包含gl-matrix-min.js、initShaders.js、webgl-utils.js三个文件。
一组开发所需的JavaScript库,提供开发WebGL程序运行的支持环境,包括:[webgl-utils.js](zhengjy11.github.io/webgl-utils.js at main · zhengjy11/zhengjy11.github.io), 用于提供gl的核心功能函数库,[initShaders.js](zhengjy11.github.io/initShaders.js at main · zhengjy11/zhengjy11.github.io), 由作者提供的对于着色器代码执行输入和解析的封装工具。我选择的矩阵库是[glMatrix.js](zhengjy11.github.io/gl-matrix-min.js at main · zhengjy11/zhengjy11.github.io)。
common文件夹源码见本人GitHubcommon
效果图