本专栏所有文章示例代码均可在我的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 =