原文地址:WebGL光照阴影映射   经过前面的学习,webgl的基本功能都已经掌握了,我们不仅掌握了着色器的编写,图形的绘制,矩阵的变换,添加光照,还通过对webgl的基础api封装,编写出了便利的工具库. 是时候进一步深入学习webgl的高级功能了,我认为要做逼真的3D特效,阴影绝对是一个必不可少的环节.现在我们就在之前光照的基础上添加阴影效果吧.   首先看一下阴影效果的实例: 阴影综合(多物体高精度) 点光源聚光灯阴影 内容大纲    我们以阴影综合(多物体高精度PCF)为例, 开始…

1.着色(shading) 在三维图形学术语“着色”的真正含义就是,根据光照条件重建“物体各表面明暗不一的效果”的过程.明白着色过程,需要考虑两件事:    1.发出光线的光源类型.    2.物体表面如何反射光线. 2.光源类型    真实世界中的光主要有两种,平行光(directional light),类似于自然中的太阳光:点光源光(point light),类似于人造灯泡的光.此外,我们还用环境光(ambient light)来模拟真实世界中的非直射光(也就是由光源发出后经过墙壁或其他物…

目录 1. 绪论 2. 目录 3. 资源 1. 绪论 最近研究WebGL,看了<WebGL编程指南>这本书,结合自己的专业知识写的一系列教程.之前在看OpenGL/WebGL的时候总是感觉OpenGL/WebGL看的时候懂,实际用起来却挺难,感觉中间总是隔着很多东西.现在一路边学边写,才明白这中间缺少的其实就是总结,是实践:把这个过程写出来,既是帮助他人,也是帮助自己. 现在这一系列文章也写了不少了,就写个目录汇总一下,方便查阅,以后增添了新的文章也会随之更新.这一系列教程由浅入深,知识也是循…

WebGL高级编程:开发Web3D图形 目录 WebGL简介11.1 WebGL基础11.2 浏览器3D图形吸引人的原因21.3 设计一个图形API31.3.1 即时模式API31.3.2 保留模式API31.4 图形硬件简介41.4.1 GPU41.4.2 帧缓存51.4.3 纹理存储器61.4.4 视频控制器61.5 WebGL图形流水线61.5.1 顶点着色器81.5.2 图元装配111.5.3 光栅化121.5.4 片段着色器121.5.5 逐片段操作151.6 WebGL与其他图形技术…

在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型.着色器允许我们使用数学模型来控制如何照亮我们的场景. 最好有线性代数的相关知识. 本章中: 光源.法线.材料 光照和着色的区别 Goraud Phong着色方法和Lambertian Phong光照模型 定义并使用uniforms.attributes.varyings 使用ESSL,webgl的着色器语言 讨论跟着色有关的webgl api 继续关于webgl是一个状态机的分析,描述跟着色器相关的可以从状态机中设置和取回的…

  原文地址:WebGL多模型光照综合实例   WebGL是一个非常的接近硬件底层的光栅化API, 从非常类似C/C++风格的API调用方式就可以看出来, 习惯了高级语言的我们会觉得很不友好,觉得特别繁琐. 这个也是很多人觉得WebGL难的原因之一. 如果我们要使用WebGL做一些项目,毫无疑问要么使用Three.js之类的3D库, 要么需要对原生的API进行封装. 这段时间查看了一些WebGL工具库的源代码, 参考封装出了一个简单的工具库,这样往后用WebGL做小项目就方便多了.   经过前面…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］.另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指正. 本次的demo的执行结果 点光源 上次介绍了高氏着色和补色着色. 使用补色着色的手法.能够渲染更加自然的阴影.3D效果更加真实.可是会有计算量比較大的缺点. 这个仅仅能case by case,依据不同的情况来处理了.是个挺烦人的地方. 那么,这次,还是讲光源.我貌似听到了"不会吧......…

目录 1. 概述 2. 原理 2.1. 光源类型 2.2. 反射类型 2.2.1. 环境反射(enviroment/ambient reflection) 2.2.2. 漫反射(diffuse reflection) 2.2.3. 综合 3. 实例 3.1. 具体代码 3.2. 改动详解 3.2.1. 设置日照 3.2.2. 着色器光照设置 4. 结果 5. 参考 1. 概述 在上一篇教程<WebGL简易教程(九):综合实例:地形的绘制>中,实现了对一个地形场景的渲染.在这篇教程中,就给这个地…

局部光照与全局光照 局部光照 只考虑光源到模型表面的照射效果,运算量较小: 全局光照 考虑到环境中所有表面和光源相互作用的照射效果,即让没有直接受光照射的位置也会受周围反射光的影响,运算量较大: Phong反射模型 Phong光照模型是真实图形学中提出的第一个有影响的光照明模型,该模型只考虑物体对直接光照的反射作用,认为环境光是常量,没有考虑物体之间相互的反射光,物体间的反射光只用环境光表示.Phong光照模型属于简单光照模型. Phong光照模型是由环境反射.漫反射和镜面反射相互作用得到的光照…

WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件.WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文,准备数据,在canvas中绘制对象并渲染.与2D不同的就是3D涉及的知识更多了,例如世界.光线.纹理.相机.矩阵等专业知识.WebGL有一个很好的中文教程,就是下面使用参考中的第一个链接,所以这里不再班门弄斧,后面的内容只是简单的总结一下学习的内容. 浏览器的支持 由于微软有自己的图形发展计划,一…