本系列教程主要讲解利用WebGL开发网页版的三维图形程序。这里主要用到的OpenGL和FlyMath内容。本系列内容较难。要求学生对几何和编程有一定的了解。建议初三以上同学学习。
这节我们讲两个内容,一个是如何给canvas添加鼠标事件响应,这个很简单,加个相应事件函数完成。第二个是,如何给片断着色语句传递颜色值。这个也不难。但要注意语句的书写和使用位置。这节的例子是这样的:还是上节的三角形,在canvas点击,三角形的着色由黑慢慢变红。
这里主要说下片元着色语句里的第一句:precision highp float;。着色语言定了三种级别的精度:lowp, mediump, highp。我们可以在 glsl 脚本文件的开头定义默认的精度。如果没有这句,编译器可能会报错。因为在顶点着色阶段,如果没有用户自定义的默认精度,那么 int 和 float 都默认为 highp 级别;而在片元着色阶段,如果没有用户自定义的默认精度,那么就真的没有默认精度了,我们必须在每个变量前放置精度描述符。
这次修改的主要是javascript部份。html的不变,我就不贴出来了。大家看javascript部份代码。直接替换上节的javascript部份就可以了。
javascript部分源码
//定义颜色数组
var color = [0,0,0];
var v_color=0.1;
//处理点击事件
function click(ev,gl_context)
{
color[0]+=v_color;
if(color[0]>=1 || color[0]<0.1)
{
v_color*=-1;
}
draw_triangle(gl_context);
}
//初始化WebGL
function init_webgl()
{
var canvas = document.getElementById("webGL");
if(!canvas){
alert("获取<Canvas>标签失败!");
return;
}
//获取webGL统计图上下文
var gl_context = canvas.getContext('webgl',
{ antialias:true,
stencil:true});
if(!gl_context){
alert("获取WebGL上下文失败!");
}
canvas.width = $("#area").width();
canvas.height = $("#area").width()*3/5;
canvas.onmousedown = function(ev){ click(ev,gl_context);};
//设置视口大小
gl_context.viewport(0,0,canvas.width,canvas.height);
draw_triangle(gl_context);
}
//绘制三角形
function draw_triangle(gl_context)
{
//清空canvas的背景颜色
gl_context.clearColor(0,0,0.5,1);
//清空webgl颜色缓冲区里的内容
gl_context.clear(gl_context.COLOR_BUFFER_BIT);
//定义顶点shader和片断shader
var vs_src = "attribute vec4 a_Position;\n" +
"uniform vec3 a_color;\n" +
"varying vec3 A_color;\n" +
"void main() {\n" +
" gl_Position = a_Position;\n"+
" A_color = a_color;\n"+
"}\n";
var fs_src = "precision highp float;\n" +
"varying vec3 A_color;\n" +
"void main() {\n" +
" gl_FragColor = vec4(A_color.xyz,1);\n" +
"}\n";
var vs = gl_context.createShader(gl_context.VERTEX_SHADER);
gl_context.shaderSource(vs,vs_src);
gl_context.compileShader(vs);
if(!gl_context.getShaderParameter(vs,gl_context.COMPILE_STATUS)){
alert(gl_context.getShaderInfoLog(vs));
return;
}
var fs = gl_context.createShader(gl_context.FRAGMENT_SHADER);
gl_context.shaderSource(fs,fs_src);
gl_context.compileShader(fs);
if(!gl_context.getShaderParameter(vs,gl_context.COMPILE_STATUS)){
alert(gl_context.getShaderInfoLog(fs));
return;
}
if(!gl_context.getProgramParameter(shaderProgram, gl_context.LINK_STATUS)) {
alert("Could not initialise shaders");
}
//加载选择的顶点和片断
var shaderProgram = gl_context.createProgram();
gl_context.attachShader(shaderProgram, vs);
gl_context.attachShader(shaderProgram, fs);
gl_context.linkProgram(shaderProgram);
//绑定shader中的参数变量
var shader_pos = gl_context.getAttribLocation(shaderProgram, "a_Position");
var ColorUniform = gl_context.getUniformLocation(shaderProgram,"a_color");
var vertices = new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]);
var tri_buf = gl_context.createBuffer();
gl_context.bindBuffer(gl_context.ARRAY_BUFFER, tri_buf);
gl_context.bufferData(gl_context.ARRAY_BUFFER, new Float32Array(vertices), gl_context.STATIC_DRAW);
//使用选择的程序,激活缓冲区,渲染
gl_context.useProgram(shaderProgram);
gl_context.enableVertexAttribArray(shader_pos);
gl_context.vertexAttribPointer(shader_pos, 2, gl_context.FLOAT, false, 0, 0);
//绑定顶点顔色
gl_context.uniform3f(ColorUniform,color[0],color[1],color[2]);
gl_context.drawArrays(gl_context.TRIANGLES,0,3);
}
运行范例