原生WebGL基础学习
文章平均质量分 74
coder_路远
抱着学习的心态做IT
展开
-
原生webgl学习(三) WebGL中的矩阵运算:平移、旋转和缩放
本专栏所有文章示例代码均可在我的git码云上获取,读者可自行下载:https://gitee.com/babyogl/learnWebGL,本文示例代码在chapter-02的color-triangle-01,引用文件都在libs文件夹下;在上一节中,笔者介绍了如何用WebGL绘制一个三角形:原生webgl学习(二) 用WebGL绘制一个三角形,那我们会想,画一个三角形有什么了不起的?的确,画一...原创 2018-10-13 15:41:50 · 3756 阅读 · 3 评论 -
原生webgl学习(二) 用WebGL绘制一个三角形
所有示例代码均可在我的gitee码云上,读者可自行下载:https://gitee.com/babyogl/learnWebGL,本文示例代码在chapter-01里面,引用文件都在libs文件夹下;为了让读者不至于枯燥乏味,这一篇文章我们不讲计算和理论,相关的矩阵运算和理论留在后面,现在只是单纯的介绍WebGL一些接口和用法,从一个简单的示例开始:绘制一个带颜色的三角形。在开始之前,需要知道...原创 2018-10-10 21:56:16 · 3593 阅读 · 0 评论 -
原生webgl学习(一) 原生WebGL学习和入门引言
一.笔者自述 对于原生WebGL的学习,相信对于很多搞前端图形开发的小伙伴的痛点是花了很多时间,却收效甚微;好在现在存在诸如Three.js、Babylon.js、cesium.js等功能强大和齐全的WebGL第三方库;有了这些第三方库,我们可以用更少的代码构建出绚丽多彩的网络3D应用;那为什么我们还要学习原生的WebGL,原生的WebGL对于我们来说意味着什么?接下来笔者就以自...原创 2018-10-10 20:34:31 · 10323 阅读 · 0 评论 -
原生webgl学习(八) WebGL实现动画:平移、缩放和旋转
笔者在前面的文章主要是针对二维的静态图形进行开发;但有时候我们需要模型动起来,就像真实世界中的一切运动变化一样。场景如果不是动态的,那么可想而知,我们的世界是多么枯燥乏味。为了让我们开发的图形应用看上去更加高大上,这一节笔者将和大家一起做一个动画的例子;本节的内容用到了前面文章提到过的平移、缩放和旋转变换,如果对这方面还不是很熟悉的同学,可以参考这篇文章:原生webgl学习(三) WebGL中的矩...原创 2018-10-16 20:50:46 · 4703 阅读 · 0 评论 -
原生 WebGL开发文章目录
为了方便读者学习和阅读,这篇文章主要是列出笔者撰写的原生WebGL博文的链接:一.WebGL二维几何开发1.原生webgl学习(一) 原生WebGL学习和入门引言2.原生webgl学习(二) 用WebGL绘制一个三角形3.原生webgl学习(三) WebGL中的矩阵运算:平移、旋转和缩放4. 原生webgl学习(四) WebGL绘制矩形(一)5.原生webgl学习(五) W...原创 2018-10-16 19:44:08 · 1468 阅读 · 2 评论 -
原生webgl学习(七) WebGL写简单的汉字(二):绘制更多个字
本专栏所有文章示例代码均可在我的gitee码云上获取,读者可自行下载:https://gitee.com/babyogl/learnWebGL;本文demo代码在chapter-03下的draw-word-02.html,读者可以自行下载查看;上一节我们用WebGL绘制了一些简单的汉字:原生webgl学习(六) WebGL写简单的汉字;以此为基础,我们再实现多个汉字的复制和呈现,并控制它们的平...原创 2018-10-14 17:44:57 · 1988 阅读 · 0 评论 -
原生webgl学习(六) WebGL写简单的汉字(一)
本专栏所有文章示例代码均可在我的gitee码云上获取,读者可自行下载:https://gitee.com/babyogl/learnWebGL;本文demo代码在chapter-03下的draw-word-01.html,读者可以自行下载查看;如果读者还对本专栏的文章内容和编程方式还不是很了解,建议先对前面的文章进行学习:博客专栏:webgl基础学习。前面的几节课,笔者为大家演示了WebGL如...原创 2018-10-14 17:19:11 · 2765 阅读 · 1 评论 -
原生webgl学习(五) WebGL绘制矩形(二):更简洁的代码
本专栏所有文章示例代码均可在我的gitee码云上获取,读者可自行下载:https://gitee.com/babyogl/learnWebGL;本文demo代码在chapter-03下的rectangle-01.html,读者可以自行下载查看;前面三节笔者分别实现了:用WebGL绘制一个三角形,WebGL中的矩阵运算:平移、旋转和缩放, WebGL绘制矩形等几个demo,也许细心的读者会发现代...原创 2018-10-14 12:03:28 · 1481 阅读 · 0 评论 -
原生webgl学习(四) WebGL绘制矩形(一)
本专栏所有文章示例代码均可在我的gitee码云上获取,读者可自行下载:https://gitee.com/babyogl/learnWebGL;本节代码在文件夹chapter-02里面的color-triangle-02.html。上节课笔者绘制了一个颜色随顶点位置变化的三角形,实现平移、旋转和缩放变换的矩阵计算,并提供了一个可供交互的菜单栏工具:原生webgl学习(三) WebGL中的矩阵运...原创 2018-10-14 10:50:35 · 2140 阅读 · 0 评论 -
原生webgl学习(九) WebGL动画:不断改变顶点颜色
本专栏所有代码均可以在我的码云下载到:https://gitee.com/babyogl/learnWebGL,本节所有示例均在文件夹chapter-04下面;相信通过前面一节的学习,大家已经对简单的动画有所了解,如果还没看过,请阅读:原生webgl学习(八) WebGL实现动画:平移、缩放和旋转,如果读者对本博客专栏的编程方式还不是很了解,请阅读:原生 WebGL开发文章目录(持续更新)。这...原创 2018-10-30 16:27:09 · 1512 阅读 · 0 评论