Three.js源码阅读笔记(光照部分)_基础知识

天气越来越冷了,人也越来越懒怠,越来越像呆在温暖的寝室里看小说或者打游戏,也好久没看Three.js源码了。今天天气不错,接着看!

这次从光照部分看起:光照模型,从光线本身角度来看包括环境光、平行光、点光源,从物体表面材质角度看又包括漫反射和镜面反射。

Lights:Light

复制代码 代码如下:

THREE.Light = function ( hex ) {
THREE.Object3D.call( this );
this.color = new THREE.Color( hex );
};

该对象是其他光照对象的原型/基类,本身继承自Object3D对象/类型。它自身只有一个THREE.Color类型的color属性,就是颜色,这很好理解。

在Three.js中,光照作为一种Object3D对象,是经过Scene.add()方法加入到场景中的,渲染器会自动渲染所加入的光照效果。
Light::AmbientLight

复制代码 代码如下:

THREE.AmbientLight = function ( hex ) {
THREE.Light.call( this, hex );
};

无方向的环境光,并没有比Light类型多一个属性或方法,而仅仅为了语义上的继承而继承自Light,它甚至没有必要是Object3D对象。

Light::DirectionalLight

复制代码 代码如下:

THREE.DirectionalLight = function ( hex, intensity ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 1, 0 );
this.target = new THREE.Object3D();
this.intensity = ( intensity !== undefined ) ? intensity : 1;
this.castShadow = false;
this.onlyShadow = false;
// more settings about shadow ......
};

平行光(有方向的光),使用new运算符构造该函数时需传入颜色hex和光线的“密度”intensity。这个类有这样一些属性:
position:一个位置,以该位置为起点,原点为终点的方向是光线的方向。
intensity:光线的密度,默认为1。因为RGB的三个值均在0~255之间,不能反映出光照的强度变化,光照越强,物体表面就更明亮。
distance:衰减距离,默认值为0,光照无衰减;如果是非0值,光照会从position位置(实际上是position所处的那个平面)开始衰减,衰减到distance距离之后,光照强度intensity为0。
castShadow:布尔值,控制是否产生阴影,默认为false。如果设为true,对于所有表面都会逐像元地计算其在光照方向上是否被遮挡,这会消耗大量的计算。
onlyShadow:布尔值,控制是否只产生阴影而不“照亮”物体,默认为false。这种模式也许有什么特殊应用吧。
shadowCameraLeft,shadowCameraRight……系列,以position点为中心控制产生阴影的范围?
shadowBias:阴影偏心,默认为0。
shadowDarkness:阴影对物体亮度的影响,在0~1之间,默认为0.5。
还有不少属性暂时猜不出含义(真该去补补计算机图形学啊,硬着头皮继续看吧)。

Light::PointLight

复制代码 代码如下:

THREE.PointLight = function ( hex, intensity, distance ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 0, 0 );
this.intensity = ( intensity !== undefined ) ? intensity : 1;
this.distance = ( distance !== undefined ) ? distance : 0;
};

点光源,position那肯定就是光源点了。注意点光源的position和平行光的position的区别,前者默认在原点,而后者默认在点(0,1,1),这使得默认的平行光方向和相机的默认朝向一致。
其他两个属性和平行光中一样。PointLight点光源没有关于如何产生阴影的设定。

Light::SpotLight

复制代码 代码如下:

THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 1, 0 );
this.target = new THREE.Object3D();
this.intensity = ( intensity !== undefined ) ? intensity : 1;
this.distance = ( distance !== undefined ) ? distance : 0;
this.angle = ( angle !== undefined ) ? angle : Math.PI / 2;
this.exponent = ( exponent !== undefined ) ? exponent : 10; // more settings about shadow...
};

一种可以在某个方向上产生阴影的点光源,影响MeshLamberMaterial和MeshPhongMaterial类型材质的表面。对阴影如何处理的设定和DirectionLight一致。
总之,光照对象并不承担渲染光照的任务,而仅仅是定义如何渲染光照。
Object::Partical

复制代码 代码如下:

 
THREE.Particle = function ( material ) {
THREE.Object3D.call( this );
this.material = material;
};

粒子就是一个由材质的Object3D,这很好理解。Object3D对象提供一个坐标(就是粒子的坐标),负责粒子的运动,粒子只需要指定表现它的材质即可。

Object::ParticalSystem

复制代码 代码如下:

THREE.ParticleSystem = function ( geometry, material ) {
THREE.Object3D.call( this );
this.geometry = geometry;
this.material = ( material !== undefined ) ? material : new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } );
this.sortParticles = false;
if ( this.geometry ) {
if( this.geometry.boundingSphere === null ) {
this.geometry.computeBoundingSphere();
}
this.boundRadius = geometry.boundingSphere.radius;
}
this.frustumCulled = false;
};

粒子系统表现多个粒子的运动,粒子系统本身继承自是Object3D对象。有这样几个属性:
geometry属性,每一个节点都是一个粒子,这些共享一个材质。
material属性,即这些节点的材质。

frustumCulled属性,布尔值,如果设定为真,那么在相机视界之外的会被踢出,但还没弄清楚是粒子系统中心坐标在视界外就踢出整个粒子系统还是单个粒子出去了就剔除,猜测多半是后者。

其实这几篇都是涉及怎么定义场景的,至于怎么渲染场景很难有深入。我准备接下来去看Demo的代码,结合者看看WebGLRenderer类的源代码(几千行OMG)。

时间: 2024-08-07 06:51:58

Three.js源码阅读笔记(光照部分)_基础知识的相关文章

Three.js源码阅读笔记(Object3D类)_基础知识

这是Three.js源码阅读笔记的第二篇,直接开始. Core::Object3D Object3D似乎是Three.js框架中最重要的类,相当一部分其他的类都是继承自Object3D类,比如场景类.几何形体类.相机类.光照类等等:他们都是3D空间中的对象,所以称为Object3D类.Object3D构造函数如下: 复制代码 代码如下: THREE.Object3D = function () { THREE.Object3DLibrary.push( this ); this.id = THR

Backbone.js 0.9.2 源码注释中文翻译版_基础知识

// Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.j

Three.js源码阅读笔记(基础的核心Core对象)_基础知识

Three.js是一个比较伟大的webgl开源库,它简化了浏览器3D编程,使得使用JavaScript在浏览器中创建复杂的场景变得容易很多.Github上众多webgl demo令我兴奋不已,跃跃欲试.由于这个库还处在开发阶段,因此资料非常匮乏,爱好者大部分时间不得不通过阅读该库的源码进行学习,我现在也准备这样做. 这是第一篇笔记,先从最基础的核心(Core)对象开始. Core::Vector2 该构造函数用来创建一个表示二维向量的对象 复制代码 代码如下: THREE.Vector2 = f

CI框架源码阅读笔记2 一切的入口 index.php

上一节(CI框架源码阅读笔记1 - 环境准备.基本术语和框架流程)中,我们提到了CI框架的基本流程,这里再次贴出流程图,以备参考: 作为CI框架的入口文件,源码阅读,自然由此开始.在源码阅读的过程中,我们并不会逐行进行解释,而只解释核心的功能和实现. 1. 设置应用程序环境 define("ENVIRONMENT", "development"); 这里的development可以是任何你喜欢的环境名称(比如dev,再如test),相对应的,你要在下面的switch

Apache Storm源码阅读笔记&OLAP在大数据时代的挑战

 <一>Apache Storm源码阅读笔记 楔子 自从建了Spark交流的QQ群之后,热情加入的同学不少,大家不仅对Spark很热衷对于Storm也是充满好奇.大家都提到一个问题就是有关storm内部实现机理的资料比较少,理解起来非常费劲. 尽管自己也陆续对storm的源码走读发表了一些博文,当时写的时候比较匆忙,有时候衔接的不是太好,此番做了一些整理,主要是针对TridentTopology部分,修改过的内容采用pdf格式发布,方便打印. 文章中有些内容的理解得益于徐明明和fxjwind两

php中get_adjacent_post函数PHP源码阅读笔记

这个函数是wordpress里的一个函数,作用是获取相邻的POST文章. 函数并不大,有效代码大概只有70行左右,但是里面包含的知识不少,所以专门用一篇文章来解释一下. get_adjacent_post函数的源码位于wp-includes/link-template.php中. 我会通过"//roc:"在引出源码阅读笔记. /**  * Retrieve adjacent post.  *  * Can either be next or previous post.  *  * @

CI框架源码阅读笔记5 基准测试 BenchMark.php

由于BenchMark是CI中第一个加载的core组件,因此我们的分析首先从该组件开始.BenchMark的含义非常明确,使用过BenchMark工具的同学应该比较清楚,这是一个基准组件.既然是BenchMark,我们便可大胆猜想,BM组件的主要功能就是记录程序的运行时间.内存使用.cpu使用等情况.     这个组件结构较简单,只有一个marker内部变量和三个对外的接口:   1 Elapsed_time 2 Mark 3 Memory_usage 下面一个个展开来看:   1. mark

深入理解Spark:核心思想与源码分析. 2.2 Spark基础知识

2.2 Spark基础知识 1.版本变迁 经过4年多的发展,Spark目前的版本是1.4.1.我们简单看看它的版本发展过程. 1)Spark诞生于UCBerkeley的AMP实验室(2009). 2)Spark正式对外开源(2010年). 3)Spark 0.6.0版本发布(2012-10-15),进行了大范围的性能改进,增加了一些新特性,并对Standalone部署模式进行了简化. 4)Spark 0.6.2版本发布(2013-02-07),解决了一些bug,并增强了系统的可用性. 5)Spa

THREE.JS入门教程(3)着色器-下_基础知识

译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. .简介 这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程. 上一篇结束的时候,我们在屏幕中央画了一个好看的粉红色的球体.现在我要开始创建一些更加有意思的东西了. 在这一篇教程中,我们会先花点时间