原生webgl学习（六） WebGL写简单的汉字（一）

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：https://gitee.com/babyogl/learnWebGL；本文demo代码在chapter-03下的draw-word-01.html，读者可以自行下载查看；

如果读者还对本专栏的文章内容和编程方式还不是很了解，建议先对前面的文章进行学习：博客专栏：webgl基础学习。前面的几节课，笔者为大家演示了WebGL如何绘制三角形和矩形，也说过绘制这些图案当然不是无聊绘制着玩的，这节课我们就利用绘制多个三角形和矩形，然后来组成我们的一些简单的汉字。下面我们先来看一张图

这个“王”字（ps:会不会令你想起隔壁老王？哈哈），总共有四笔，我们可以用四个矩形来组成它，分别用16个顶点，以第一横为例，要画两个三角形，画图时顶点的顺序组合为：（v0，v1, v2），（v2,v1,v3），其实不只这种顺序组合，读者可以自行探索其他的组合。其他的笔画也按照这个顺序来，最终经过绘制后，就会有一个王字清晰地呈现在我们面前，像前面的文章一样，给其加一个交互菜单栏工具，用于控制其位置的平移、旋转缩放。不同的是，这一次的旋转，我们利用更加有逼格的形式实现。

着色器

来看一下着色器：

<script id="v-shader" type="x-shader/x-vertex">attribute vec2 a_position;uniform vec2 u_resolution;//分辨率uniform vec2 u_translate;//平移uniform vec2 u_rotate;//旋转uniform vec2 u_scale;//缩放varying vec4 v_color;void main(){vec2 sPosition = a_position * u_scale;vec2 rotatePosition = vec2(sPosition.x * u_rotate.y + sPosition.y * u_rotate.x,sPosition.y * u_rotate.y - sPosition.x * u_rotate.x);vec2 position = rotatePosition + u_translate;vec2 zeroToOne = position / u_resolution;vec2 zeroToTwo = zeroToOne * 2.0;vec2 clipSpace = zeroToTwo - 1.0;gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);//(1，-1)将坐标原点设置为左上角v_color = vec4(gl_Position.xyz * 0.5, 0.6);}
</script><script id="f-shader" type="x-shader/x-vertex">#ifdef GL_ESprecision mediump float;#endifvarying vec4 v_color;void main(){gl_FragColor = v_color.rbga;}
</script>

初始化数据

初始化相关的数据，包括平移、旋转、缩放、顶点位置、以及菜单栏相关命令初始化：

 let translate = [100, 150];let rotate = [0, 1];let scale = [1, 1];//王let wang = [//第一横0, 0,150, 0,0, 30,0, 30,150, 0,150, 30,//第二横0, 80,150, 80,0, 110,0, 110,150, 80,150, 110,//第三横0, 160,150, 160,0, 190,0, 190,150, 160,150, 190,//竖60, 30,60, 160,90, 30,90, 30,60, 160,90, 160];let guiField = {'平移X': translate[0],'平移Y': translate[1],'缩放X': scale[0],'缩放Y': scale[1]};

建立菜单栏和建立绘制函数

function initGui(gl, program) {let gui = new dat.GUI();gui.add(guiField, '平移X', 0, gl.canvas.width-200).onChange(function(e) {translate[0] = e;drawScene(gl, program);});gui.add(guiField, '平移Y', 0, gl.canvas.height-200).onChange(function(e) {translate[1] = e;drawScene(gl, program);});gui.add(guiField, '缩放X', -4, 4).onChange(function (e) {scale[0] = e;drawScene(gl, program)});gui.add(guiField, '缩放Y', -4, 4).onChange(function (e) {scale[1] = e;drawScene(gl, program)});let ui = document.getElementById('ui-translate');ui.appendChild(gui.domElement);}//获取着色器中的attribute变量的位置function getAttribute(gl, program, name) {return gl.getAttribLocation(program, name);}//获取着色器中的uniform变量的位置function getUniform(gl, program, name) {return gl.getUniformLocation(program, name)}function drawScene(gl, program) {webglUtils.resizeCanvasToDisplaySize(gl.canvas);//告诉WebGL如何从剪辑空间转换为像素gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);//清除canvasgl.clear(gl.COLOR_BUFFER_BIT);//应用着色器程序gl.useProgram(program);//开启顶点属性gl.enableVertexAttribArray(program.pLocation);//绑定缓冲区gl.bindBuffer(gl.ARRAY_BUFFER, program.positionBuffer);setGeometry(gl, wang);//获取缓冲区数据gl.vertexAttribPointer(program.pLocation, 2, gl.FLOAT, false, 0, 0);//设置分辨率gl.uniform2f(program.rLocation, gl.canvas.width, gl.canvas.height);//旋转gl.uniform2fv(program.roLocation, rotate);//设置平移gl.uniform2fv(program.tLocation, translate);//设置缩放gl.uniform2fv(program.sLocation, scale);gl.drawArrays(gl.TRIANGLES, 0, wang.length / 2);}

主函数

 function main() {let canvas = document.getElementById('translate');let gl = canvas.getContext('webgl', {antialias: true, depth: false})if (!gl) {alert("您的浏览器不支持WebGL!")}//获取顶点和片段着色器文本let vShaderSource = document.getElementById('v-shader').text;let fShaderSource = document.getElementById('f-shader').text;//创建着色器程序let program = initShader(gl, vShaderSource, fShaderSource);program.pLocation = getAttribute(gl, program, 'a_position');program.rLocation = getUniform(gl, program, 'u_resolution');program.tLocation = getUniform(gl, program, 'u_translate');program.roLocation = getUniform(gl, program, 'u_rotate');program.sLocation = getUniform(gl, program, 'u_scale');//创建缓冲区program.positionBuffer = gl.createBuffer();//绑定缓冲区gl.bindBuffer(gl.ARRAY_BUFFER, program.positionBuffer);drawScene(gl, program);initGui(gl, program);//利用jQuery绘制圆控制图形的旋转$("#ui-rotate").gmanUnitCircle({width: 200,height: 200,value: 0,slide: function(e,u) {rotate[0] = u.x;rotate[1] = u.y;drawScene(gl, program);}});}

当然，除了“王”字，笔者也将构成“华”的顶点数组post出来，笔者可以自行尝试：

let hua = [45, 60,75, 80,0, 140,35, 120,65, 120,35, 240,35, 240,65, 120,65, 240,125, 80,155, 80,125, 240,125, 240,155, 80,155, 240,200, 80,220, 100,155, 140,135, 210,205, 210,135, 240,135, 240,205, 210,205, 240,0, 250,210, 250,0, 280,0, 280,210, 250,210, 280,85, 180,115, 180,85, 400,85, 400,115, 180,115, 400];

程序实现效果

这种单个字的效果看起来可能不是很炫酷，下一节笔者将带领大家一起绘制多个字，并控制它们的平移，旋转，缩放。