标签归档:webgl

WebGL2画球

最近学会了用WebGL2画球,其实学会也有两个多月了,但由于某些误解一直没法生成正确的贴图映射,导致贴图错乱,直到两周前才突然开窍发现了原因,又拖到今天才来发这么一篇文章。忙里偷闲做事就是效率低下,好在并没有什么迫切需求要做,慢慢学也无所谓。

要用WebGL画球主要就是要先建个球模,然后给它上色或者贴图。要贴图就要搞清楚每个顶点和贴图的坐标映射关系,不同的球模类型映射关系也不一样,我这画的是最容易理解的经纬球,即以地球仪那种经纬线为线框的球体。

接下来开始我们的正题。

先摆一个随便找的经纬球

现在假装看不见经线(竖线),只能看见纬线(横线),那么这个球外面每隔一定的角度就绕着一个正圆,我们生成模型也可以用这种逻辑,首先生成一个正圆,然后把它按角度调整好大小并放到正确的位置上。关于生成一个合适边数的圆的方法我在前一篇文章已经写过了,这里就不再赘述了。

继续阅读WebGL2画球

三维笛卡尔坐标系转换为二维笛卡尔坐标系

在三维坐标系画一些不需要z轴坐标的二维内容的时候,和直接在二维画布上画有些不一样,因为三维坐标系原点在画布中间,并且Y轴朝上,而且xyz轴的值范围都是-1~1,所以按照二维坐标系的坐标来绘制的话,需要在顶点shader里给顶点坐标最后乘一个转换矩阵,把它转换为三维坐标系中对应的点。

过程也很简单,把坐标系先移到左上角,把横纵坐标按照实际的像素数缩小,然后上下翻转一下,顺便把它喂给二向箔。

用我做的这个矩阵库举个例子的话就是(只写了关键步骤,省略了部分内容)

到顶点shader里这样乘一下

这样就可以当canvas2d画布用了。