Created with Sketch.
Created with Sketch.
首页
发现
小书
登录/注册
×
注册小专栏
通过微信登录
通过微博登录
通过Github登录
通过邮箱
注册
、
登录
友情提示
Login FAQ
.
×
邮箱登录
通过微信、微博、Github 登录
登录
×
邮箱注册
通过微信、微博、Github 登录
注册
webgl入门到高级进阶
作者
谭远彪
文章
22篇
售价
¥ 29
订阅
等共 71 人
马上订阅
icon_gift@2x
Created with Sketch.
送给好友
奖励
你可以在自己的个人网站、微博、朋友圈、微信群等分享本专栏的链接,如果有用户通过你的分享订阅,你将获得该订阅金10%的收入分成。
向大家推荐《webgl入门到高级进阶 》 https://xiaozhuanlan.com/webgl?rel=
复制链接
Created with Sketch.
微信扫码
icon_weibo_01@2x
Created with Sketch.
新浪微博
icon_twitter@2x
Created with Sketch.
Twitter
取消
确定
可以关注 “ITman彪叔”购买,https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzI0NDUyODMwNg==&action=getalbum&album_id=1658492112209805312#wechat_redirect&__biz=MzI0NDUyODMwNg==#wechat_redirect相比canvas 2d功能,webgl的底层API显得比较晦涩难懂。本专栏希望通过通俗易懂的语言,让大家快速入门webgl;而在本专栏的后面部分,还会介绍一些较为高级的内容,让读者可以快速成长为webgl高手。以下是本专栏的大致内容:1. 揭开WebGL的面纱 2. 绘制基本对象 3. 色彩斑斓的世界 764. 变换 5. 纹理6.进入3D世界7.创建三维模型 8.光照(lighting 冯氏光照模型等)9 高级贴图(光照贴图、法线贴图、立方体贴图等)10 阴影(渲染到纹理、着色器程序对方切换、阴影) 11 混合、透明与Alpha测试 12 广告牌 13 粒子系统 14 事件响应 和选中 15 模板测试(stencil) 16 性能优化17 着色器语言简介19 着色器高级编程(shader特效)18 附录 着色器的关键字和保留字 WebGL扩展与WebGL2 着色器内置函数 38019 更多高级内容。
最新文章
Group 14
Created with Sketch.
按发布时间正序
谭远彪
webgl径向模糊实现体积光
体积光介绍 首先,我们要确认一下什么是体积光。体积光通俗来说是我们能看见的”光路“,并不是所有灯光都会形成体积光效果,它是光照到大气中粒子散射后得到的效果(丁达尔效应)。我们有时候...
谭远彪
webgl实现径向模糊
径向模糊简介 径向模糊,是一种从中心向外呈幅射状,逐渐模糊的效果。 因此径向模糊经常会产生一些中心的发散效果,在PS中同样也有径向模糊的滤镜效果。 径向模糊通常也称为变焦模糊。径向模糊(R...
谭远彪
webgl实现发光线框(glow wireframe)效果
在之前这篇文章, WebGL 单通道wireframe渲染 我们介绍了webgl如何实现单通道wireframe的效果。 本篇文章就是在此技术原理基础之上,来实现发光的wireframe效果。 要实现发光的效果 所谓的发光的效果,就是颜...
谭远彪
第11章 混合、透明与Alpha测试
[toc] 前面已经介绍了绘制物体、光照、纹理、阴影等技术。在实际的世界中,还有一类现象——透明。比如,透过窗户的玻璃可以看到窗户外面的情况。 在WebGL中,可以通过“混合”来实现透明的效果。 11...
谭远彪
第10章 阴 影(2)
[toc] 10.5 绘制阴影 在第8章中讲述了光照,光照可以让物体表面呈现明暗不一的效果。但第8章中并没有介绍如何实现阴影。本节中将讲述如何实现阴影。 实现阴影的方式有很多种,本节中实现阴影的方式...
谭远彪
第10章 阴 影(1)
[toc] 光照可以产生丰富而立体的渲染效果。通过冯氏光照模型渲染对象,看起来效果完美,但如果绘制多个对象,就很容易发现这种光照模型的缺陷——对象之间相互没有遮挡,即对象A在对象B和光源中间...
谭远彪
第9章 高级贴图(2)
[toc] 9.5 立方体贴图 之前介绍的颜色贴图、光照贴图、法线贴图,虽然它们的用途不同,但是都是2D贴图。而WebGL系统中存在另外一种纹理类型——立方体贴图(CubeMap)。 9.5.1 认识立方体贴图 立方体贴图...
谭远彪
第9章 高级贴图(1)
[toc] 第5章介绍了颜色纹理(贴图)在WebGL程序中的使用。在实际的三维场景中,为了达到更好的渲染效果,往往需要使用更多高级的贴图。 比如,使用光照贴图,可以模拟光照的效果;使用法线贴图或凹...
谭远彪
第8章 光 照(2)
[toc] 8.6 实例27:实现片元级光照 8.5节中演示了点光源的光照效果,效果看起来比较完美。但是,如果改变了点光源的位置,则效果就没有那么完美了。 当把DrawAmbientDiffusePointLightCube.js里的点光源的位置改...
谭远彪
第8章 光 照(1)
[toc] 在前面的章已经讲述了如何赋予绘制对象颜色。在现实世界中,人眼看到的物体的颜色其实与光照有关。光线照到物体表面后,物体会反射一部分光线。反射的光线进入人的眼睛时,人们才能够看到物...
谭远彪
第七章 创建三维模型
[toc] 到目前为止,本书介绍了如何绘制一些基本的图元(包括三角形和三角形组成的四边形),但是还没有绘制真正三维的对象。 在实际应用中,往往需要创建比较复杂的模型。对于比较规则的模型,可...
谭远彪
第6章 进入3D世界
[toc] 彪叔:在之前的章中,我们讲述了很多WebGL知识,包括绘制图元、变换、贴图等。但之前的章中绘制的都是2D图形。 小K:是的。我们要讲的不是3D图形技术吗,啥时候才能绘制三维图形呢? 彪叔:小K...
谭远彪
第五章 纹理(2)
[toc] 5.3 纹理的过滤 在第5.2.10小节中,提到可以通过gl.texParameteri函数来指定纹理的参数值。其中两个比较重要的参数是gl.TEXTURE_MAG_FILTER和gl.TEXTURE_MIN_FILTER,这两个参数指定了纹理的过滤模式。 5.3.1 认识纹...
谭远彪
第5章 纹理(1)
[toc] 第3章介绍过如何给绘制的图形指定固定色、顶点色,以及如何通过着色器编程给绘制的图形着色。但是现实世界缤纷复杂,要模拟多彩的现实世界,比如要模拟客厅里的地板、天空中的云层等,这几...
谭远彪
第四章 变 换
[toc] 之前的章学习了如何绘制图形并给绘制的图形着色。本章将讲解如何对绘制的图形进行平移、缩放、旋转等操作,这样的操作称为变换(transform)。 变换操作在三维应用中很重要。通过变换,可以把...
谭远彪
第三章 色彩斑斓的世界(2)
[toc] 3.3 图元装配与光栅化 在3.2节中,点的绘制结果(如图3-4所示)很好理解,每个顶点对应一种颜色。但如果查看线段或三角形的绘制效果会发现,颜色是渐变的效果。这应如何理解呢?其实需要从图元...
谭远彪
第三章 色彩斑斓的世界(1)
[toc] 第2章介绍了如何绘制一些的基本的图元——点、线段、三角形,这些图元的颜色是在着色器中定义好的红色,颜色很单一。 没有色彩的世界会显得枯燥单调。本章将介绍如何给绘制对象增加色彩。在...
谭远彪
第二章 绘制基本对象(3)
[toc] 2.5 基本图元及绘制模式 2.2~2.4节主要说明了如何绘制点。点是WebGL系统中的基本图元之一。除此之外,还有其他两种基本图元——线段和三角形。 本节将会带读者认识所有的基本图元和图元的绘制模...
谭远彪
第二章 绘制基本对象(2)
[TOC] 2.3 实例4:绘制一个点(改进版) 小K:在2.2节实例中绘制了一个点,点的位置、尺寸和颜色都写在着色器代码里。这在实际应用中并不方便。是否有其他方式可以动态改变这些信息呢? 彪叔:嗯,...
谭远彪
第二章 绘制基本对象(1)
[TOC] ps 本章内容太多,可能会用分为多篇文章,后续章内容太多会使用同样的方式。 本章将介绍如何使用WebGL绘制一些基本图元。这些基本图元包括点、线段、三角形。 基本的图元虽然简单,但它是其...
谭远彪
第一章 揭开WebGL的面纱
[toc] 快下班了,彪叔还在电脑前工作,电脑中打开着一个Chrome浏览器,浏览器中呈现的是一个三维的界面。 “彪叔,这是什么呀,看起来好炫呀!”突然一个声音从身后传来。 彪叔回头一看,原来是小K...
谭远彪
开篇词
[toc] 前言 亲爱的读者大家好,首先欢迎并感谢大家能够来到我的这个专栏。 相比canvas 2d功能,webgl的底层API显得比较晦涩难懂,而且图形学的知识体系极为庞大。本专栏希望通过通俗易懂的语言,让大家...
Created with Sketch.
Created with Sketch.
你确定要将该文章置顶吗
置顶
取消
Created with Sketch.
不能订阅自己的专栏哦,转发到微博、朋友圈和公众号宣传自己的专栏吧。
分享给我的朋友
Created with Sketch.
微博分享
Created with Sketch.
微信扫一扫
top
Created with Sketch.
Created with Sketch.
订阅专栏成功
扫码关注小专栏服务号,专栏有新内容及时通知你