webGL
技道两进
起步于压缩机研发,积累于CAE仿真开发实施,转型于MES项目实施,成熟于SAAS产品设计,融通于工业互联网咨询。
展开
-
webGL第四课
经过前三节课,已经能够画出简单的图形,并且能给图形上色或者添加纹理了,在进行下个例子之前,先补充一下基础知识, 学习下《webGL编程指南第五章颜色和纹理》原创 2016-07-26 14:49:37 · 506 阅读 · 0 评论 -
webGL背景知识
最近部门技术规划,需要了解一些webGL技术,看是否用到后续的项目中。所以,在网上查了相关资料,并准备初步入门测试一下。后面可能会把学习笔记整理到blog上进行备份。原创 2016-07-15 17:21:52 · 1404 阅读 · 0 评论 -
webGL第二课
看完论坛的第一个例子之后,论坛网址。发现该作者的系列讲解比老外讲解的好多了,虽然思路和实现方法不一样,但不失为一个入门接触webGL的好教材。还是先了解,再系统性学习。今天进行第二课的学习概述该例子介绍了如何给图形绘制颜色。原理和绘制图形是一样的。一般流程首先创建着色器。顶点着色器中包含gl_Position变量,片段着色器中包括gl_FragColor变量。然后将数据通过index绑定到程序原创 2016-07-18 13:05:43 · 625 阅读 · 0 评论 -
webGL第三课
添加纹理添加颜色太单调,有时候需要在图形上添加纹理,比如一幅画,就用到了纹理特征。 为了让webGL可以访问我们指定的图像数据,需要将图像数据保存到webGL内部纹理对象中,步骤如下: 1. 创建纹理对象,使用createTexture()函数。 2. 将该纹理对象设置为相应纹理类型的当前操作对象; 3. 将指定的图像数据复制到该纹理对象对应的存储区,以使webGL内部能够访问到它。 4.原创 2016-07-21 16:44:31 · 491 阅读 · 0 评论 -
webGL第五课——屏幕坐标转到webGL坐标
看到第四课,发现好多知识需要了解,所以应该进行系统性顺序性的学习了.参考《webGL编程指南》webGL入门知识浏览器支持html5之后,可以创建canvas,并调用js进行二维图形的绘制。要使用webGL绘制图形,必须使用着色器。着色器是webGL的核心机制。drawArrays函数说明:屏幕上点转换成webGL坐标系中的点,参照下图所示依据平面坐标系转换公式进行坐标转换 x′=(x−原创 2016-08-18 17:21:42 · 5521 阅读 · 2 评论 -
webGL第八课-绘制一个三维图形
之前看了二维绘图的知识,基本上了解了webGL的工作原理,下面开始了解一下三维的知识了原创 2016-08-29 15:04:03 · 3553 阅读 · 0 评论 -
webGL第六课——二维平面真实坐标到webGL坐标转换
在学习过程中,推导一下真是坐标系到webGL坐标系转换的通用计算方法,前提是webGL完全占据canvas画布位置。原创 2016-08-24 17:09:12 · 2308 阅读 · 0 评论 -
webGL第七课 —— 平移、旋转和缩放
在图形显示中,图形变换只有平移、旋转和缩放三种情况。他们都是通过矩阵运算获得的。原创 2016-08-26 13:57:41 · 2215 阅读 · 0 评论