一.Three.js中有哪些光源? 在Three.js中,光源有一个基类THREE.Light(hex),这个hex接受16进制颜色作为参数而初始化光源的颜色,比如我们要定义一种绿色的光源,可以这样来定义: var greenLight = new THREE.Light(0x00FF00); 而作为3d引擎three.js,这个基类是很难满足我们的要求的,所以,我们还需要继承这个基类的更多样化的光源:   即除了这个基类光源之外,我们还有环境光.区域光.方向光.聚光灯.点光源等等.下面我们介绍…

光的类型:所有的光都是从THREE.Light继承,分为环境光THREE.AmbientLight,点光源PointLight,聚光灯THREE.SpotLight和方向光THREE.DirectionalLight等. 1. 环境光:一种无处不在的光,任何物体任何方向都可以感受的光源,这种光源和物体的距离,方向,角度无关 var light = new THREE.AmbientLight( 0xff0000 ); scene.add( light ); 2. 点光源:光源放出的光线来自同一点…

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------…

在Threejs中,光源用Light表示,它是所有光源的基类.它的构造函数是: THREE.Light ( hex ) 它有一个参数hex,接受一个16进制的颜色值.例如要定义一种红色的光源,我们可以这样来定义: Var redLight = new THREE.Light(0xFF0000); Three.js内置了多种光源可以直接调用: AmbientLight(环境光) AreaLight(区域光) DirectionalLight(平行光) HemisphereLight(半球光) Po…

在WebGL场景中导入多个Babylon骨骼模型,在局域网用WebSocket实现多用户交互控制. 首先是场景截图: 上图在场景中导入一个Babylon骨骼模型,使用asdw.空格.鼠标控制加速度移动,在移动时播放骨骼动画. 上图在场景中加入更多的骨骼模型(兔子),兔子感知到人类接近后会加速远离人类. 上图,一个局域网中的新玩家进入场景,(他们头上的数字是WebSocket分配的session id),兔子们受到0和1的叠加影响. 具体实现: 一.工程结构: 前台WebStorm工程: 其中ma…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指正. 本次的demo的执行结果 着色方法 上次介绍了反射光,反射光是实现光泽的必不可少的概念,到此为止,主要的光照效果都已经封装完成了. 光照的效果主要就是扩散光,环境光和反射光三种方法,灵活运用这三种光照,应该就能实现非常逼真的照明效果了. 前几篇一直在说光照,这次略微换个视点,看一下着色,着色是…

1.如何实现雾化 实现雾化的方式由多种,这里使用最简单的一种:线性雾化(linear fog).在线性雾化中,某一点的雾化程度取决于它与视点之间的距离,距离越远雾化程度越高.线性雾化有起点和终点,起点表示开始雾化之处,终点表示完全雾化之处两点之间某一点的雾化程度与该点与视点的距离呈线性关系.比终点更远的点完全雾化了,即完全看不见了. 某一点雾化的程度可以被定义为雾化因子(fog factor),并在线性雾化公式中被计算出来: <雾化因子> = (<终点> - <当前点与视点间…

在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做小项目就方便多了.   经过前面…

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

  原文地址:WebGL展示3D房屋内景   由于生活和工作上的原因,从年前开始一直到处奔波,没有太多的时间去关注和学习WebGL图形学相关的技术, 不过陆陆续续都有学习使用blender进行3D建模, 而这篇文章涉及到的房屋内景3D建模就是我这段时间以来的学习成果,现在展示出来.   文件模型比较大,页面加载比较慢,请耐心等候,实例为: 餐厅 dinning hall 3D   动画效果如下: Blender   Blender是开源的建模和动画制作软件,功能虽然没有3dmax和maya强大,…

这一章中关于webgl中颜色的使用我们将深入研究.我们将从研究颜色在webgl和essl中如何被组装和获取开始.然后我们讨论在物体.光照和场景中颜色的使用.这之后我们将看到当一个物体在另一个物体前面是webgl如何来实现物体碰撞,这是通过深度检测来实现的.相反透明度混合允许我们结合所有物体的颜色当一个物体与另一个物体啮合时.我们将用透明度混合来创建透明物体. 这一章主要讨论: 在物体上使用颜色 为光源分配颜色 在ESSL中使用多光源 深度检测和z缓冲区 混合方法和公式 使用face cullin…

  Threejs 2017年6月6日 15:06 Stats: new Stats();性能监视器,性能测试的方法,引入 Stats.js        http://www.hewebgl.com/article/getarticle/58 stats.setMode(1);参数为0的时候,表示显示的是FPS界面,参数为1的时候,表示显示的是MS界面.Stats的begin和end 函数本质上是在统计代码执行的时间和帧数,然后用公式fps=帧数/时间,就能够得到FPS.MS表示渲染一帧需要的…

这几天在看李鹏程翻译的[美]Jos Dirksen的<Three.js开发指南>,看到第八章了,现在来总结一下threejs中材料的相关知识.顺带也看完了上海交大的张雯莉出的<threejs入门指南>,我所学所写都是基于书和threejs官网的一些例子. 这两本书的电子版:链接: http://pan.baidu.com/s/1hrTqJGg 密码: e8ay Threejs r85版的材质解析: 相比之前的版本代码,新版本有所改动,各位同学看书的时候,最好对照着Github上面最…

入门建议: webGL中文翻译教程,基于NeHe的openGL教程:http://www.hiwebgl.com/?p=42 . WebGL中文网 http://www.hewebgl.com/ ,里面有THREEJS教程,THREEJS初级教程免费 ,其余要收费.但是初级教程也很不错. three.js官方网站:www.threejs.org/  ,three.js-master包里面有很多很有趣的例子,虽然官方没有给出文档,但是学习一段时间后,自己就能看懂代码了. 推荐书籍:[美]Andre…

这篇文章讨论如何在基于Babylon.js的WebGL场景中,实现多个简单卡牌类对象的显示.选择.分组.排序,同时建立一套实用的3D场景代码框架.由于作者美工能力有限,所以示例场景视觉效果可能欠佳,本文的重点在于对相关技术的探讨. 因为文章比较长,读者可以考虑将网页导出为mhtml格式,使用Word浏览.Chrome浏览器导出mhtml文件的方法见末尾. 一.显示效果: 1.访问https://ljzc002.github.io/CardSimulate/HTML/TEST2.html查看“卡牌…

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

WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学中的纹理既包括通常意义上物体表面的纹理即使物体表面呈现凹凸不平的沟纹,同时也包括在物体的光滑表面上的彩色图案,所谓的纹理映射就是在物体的表面上绘制彩色的图案. 在three.js中使用纹理可以实现很多不同的效果,但是最基本的就是为网格体的每个像素指定颜色.等同于将一张纹理图片应用在一个几何体的材质上…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指正. 本次的demo的执行结果 照亮世界 上次绘制了一个像甜甜圈一样的圆环体模型,尽管没有涉及特别的新知识,可是也算成功的绘制出了3D模型了吧. 那么,这次来看一下光. 光在3D渲染中有非常多种类和用法.想把光研究透彻.也是非常不easy的. 现实世界中我们能看到物体,是由于物体反射的光进入我们的眼…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上［lufy:］,另外,鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指正. 本次的demo的执行结果 各种各样的光照 上次,以及上上次,介绍了通过顶点着色器来实现光照效果. 最開始介绍了从平行光源发出的光.上次介绍了平行光源的缺点.以及相应这个缺点的方法,就是环境光源. 这次是光照处理的第三篇.进一步介绍反射光照. 反射光和它的名字一样,就是模拟光的反射.通过反射光.…

<!DOCTYPE HTML> <html lang="en"> <head> <title>Listing 7-3 and 7-4, Texturing and Lighting With the Phong Reflection Model.</title> <script src="./lib/webgl-debug.js"></script> <script src=&…

<!DOCTYPE HTML> <html lang="en"> <head> <title>Listing 7-3 and 7-4, Texturing and Lighting With the Phong Reflection Model.</title> <script src="./lib/webgl-debug.js"></script> <script src=&…

WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化.显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等. 渲染流水线设计如下:应用程序层 -> 硬件抽象层 ->…

前言: Three.js 是一个封装了 WebGL 接口的非常好的库,简化了 WebGL 很多细节,降低了学习成本,是当前前端开发者完成3D绘图的得力工具,那么今天我就给大家详细讲解下 Three.js 中各种光源的区别和引用场景. 为了更加直观的展示不同光源的特性,我特意做了一个 demo 通过动画来区别不同类型光源的特性,demo 中会展示点光源,环境光源,平行光源,半球光源,聚光灯光源五中光源的特性,为了能够直观体验光源移动过程中物体受光源的影响和光源位置,所以在光源的相同位置增加了一个白…

目录 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简易教程(九):综合实例:地形的绘制>中,实现了对一个地形场景的渲染.在这篇教程中,就给这个地…

目录 1. 概述 2. 实现详解 3. 具体代码 4. 参考 1. 概述 在之前的教程中,都是通过物体的包围盒来设置模型视图投影矩阵(MVP矩阵),来确定物体合适的位置的.但是在很多情况下,使用包围盒并不方便计算,可以利用包围盒再生成一个包围球,利用包围球来设置MVP矩阵. 在<WebGL简易教程(十):光照>中,给地形赋予了固定方向的平行光.这篇教程的例子就是想模拟在平行光的视角下地形的情况.对于点光源光,可以用透视投影来实现渲染的效果:而平行光就需要通过正射投影来模拟.并且,这种正射并不是…

目录 1. 概述 2. 示例 2.1. 着色器部分 2.1.1. 帧缓存着色器 2.1.2. 颜色缓存着色器 2.2. 绘制部分 2.2.1. 整体结构 2.2.2. 具体改动 3. 结果 4. 参考 1. 概述 所谓阴影,就是物体在光照下向背光处投下影子的现象,使用阴影技术能提升图形渲染的真实感.实现阴影的思路很简单: 找出阴影的位置. 将阴影位置的图元调暗. 很明显,关键还是在于如何去判断阴影的位置.阴影检测的算法当然可以自己去实现,但其实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学习之HDR与Bloom 什么是HDR HDR (High Dynamic Range,高动态范围),在摄影领域,指的是可以提供更多的动态范围和图像细节的一种技术手段.简单讲就是将不同曝光拍摄出的最佳细节的LDR (低动态范围) 图像合成后,就叫HDR,它能同时反映出场景最暗和最亮部分的细节.为什么需要多张图片?因为目前的单反相机的宽容度还是有限的,一张照片不能反映出高动态场景的所有细节.一张图片拍摄就必须要在暗光和高光之间做出取舍,只能亮部暗部两者取其一.但是通过HDR合成…

什么是延迟着色(Deferred Shading)?它是相对于正常使用的正向着色(Forward Shading)而言的,正向着色的工作模式:遍历光源,获取光照条件,接着遍历物体,获取物体的几何数据,最后根据光照和物体几何数据进行计算. 但是正向着色(Forward Shading)在光源非常多的情况下,对性能的消耗非常大.因为程序要对每一个光源,每一个需要渲染的物体,每一个需要渲染的片段进行迭代!还有片段着色器的输出会被之后的输出覆盖,正向渲染会在场景中因多个物体重合在一个像素上浪费大量的片段…