标签:web3d 图形 三维 three.js javascript
商域无疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句:商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、Html5、WEBGL、THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
俺也是刚开始学,好多地儿肯定不对还请见谅.
以下代码是THREE.JS 源码文件中materials/MeshLambertMaterial.js文件的注释.
更多更新在 : https://github.com/omni360/three.js.sourcecode
/** * @author mrdoob / http://mrdoob.com/ * @author alteredq / http://alteredqualia.com/ * * parameters = { * color: <hex>, * ambient: <hex>, * emissive: <hex>, * opacity: <float>, * * map: new THREE.Texture( <Image> ), * * lightMap: new THREE.Texture( <Image> ), * * specularMap: new THREE.Texture( <Image> ), * * alphaMap: new THREE.Texture( <Image> ), * * envMap: new THREE.TextureCube( [posx, negx, posy, negy, posz, negz] ), * combine: THREE.Multiply, * reflectivity: <float>, * refractionRatio: <float>, * * shading: THREE.SmoothShading, * blending: THREE.NormalBlending, * depthTest: <bool>, * depthWrite: <bool>, * * wireframe: <boolean>, * wireframeLinewidth: <float>, * * vertexColors: THREE.NoColors / THREE.VertexColors / THREE.FaceColors, * * skinning: <bool>, * morphTargets: <bool>, * morphNormals: <bool>, * * fog: <bool> * } */ /* ///MeshPhongMaterial方法根据参数parameters创建mesh(网格)的Lambert(兰伯特)材质类型,表面有光泽的材质类型,计算每个像素, ///parameters参数的格式看上面.MeshPhongMaterial对象的功能函数采用,定义构造的函数原型对象来实现.大部分属性方法继承自材质的基类Material. */ ///<summary>MeshLambertMaterial</summary> ///<param name ="parameters" type="String">string类型的JSON格式材质属性参数</param> ///<returns type="MeshLambertMaterial">返回MeshLambertMaterial,网格兰伯特材质.</returns> THREE.MeshLambertMaterial = function ( parameters ) { THREE.Material.call( this ); //调用Material对象的call方法,将原本属于Material的方法交给当前对象MeshLambertMaterial来使用 this.color = new THREE.Color( 0xffffff ); // diffuse 漫射颜色,默认初始化为0xffffff,白色 this.ambient = new THREE.Color( 0xffffff ); //环境色 ,默认初始化为0xffffff, 白色, 乘以环境光对象的颜色 this.emissive = new THREE.Color( 0x000000 ); //自发光(荧光)颜色, 默认初始化为0x000000,黑色, 实体颜色,不受其他灯光的影响. /* this.wrapAround和this.wrapRGB所关联的着色器语言 // diffuse散射 " #ifdef WRAP_AROUND", " float spotDiffuseWeightFull = max( dot( normal, spotVector ), 0.0 );", " float spotDiffuseWeightHalf = max( 0.5 * dot( normal, spotVector ) + 0.5, 0.0 );", " vec3 spotDiffuseWeight = mix( vec3( spotDiffuseWeightFull ), vec3( spotDiffuseWeightHalf ), wrapRGB );", genType mix (genType x, genType y, genType a)、genType mix (genType x, genType y, float a) 返回线性混合的x和y,如:x*(1?a)+y*a " #else", " float spotDiffuseWeight = max( dot( normal, spotVector ), 0.0 );", " #endif", */ this.wrapAround = false; //是否遮罩?? //TODO: this.wrapAround和this.wrapRGB属性有点含糊,还需要测试. this.wrapRGB = new THREE.Vector3( 1, 1, 1 ); //通过设置wrapRGB的数值,根据上面注释中的公式,对材质颜色进行线性混合. this.map = null; //普通贴图贴图,默认为null /*********************************为什么要用Lightmapping************************************************************************** 参考:http://blog.sina.com.cn/s/blog_5b6cb9500101cplo.html 1.为什么要用Lightmapping? 简单来说就是实时灯光计算十分耗时,随着光源越多会倍增计算耗时。使用Lightmap模拟灯光带来的效果,便不用去计算灯光,会带来性能上 的大大提升。当然你不用灯光效果也是没问题的,具体还是看项目需求。最简单的直接在3dmas或maya里面烘培完贴图顶点色也行。 ***************************************************************************************************************************/ this.lightMap = null //光照贴图,默认为null; this.specularMap = null; //高光贴图,默认为null this.alphaMap = null; //透明通道贴图,默认为null this.envMap = null; //环境贴图,默认为null // TEXTURE CONSTANTS //纹理常量,用来设置材质混合模式,有 //THREE.MultiplyOperation, 相乘,photoshop中的图层混合翻译成正片叠底 //THREE.MixOperation, //混合模式 //THREE.AddOperation, //增加模式 //参考: http://avnpc.com/pages/photoshop-layer-blending-algorithm //参考: //TODO: 是不是还可以实现更多的模式? // Normal正常模式 // Dissolve溶解模式 // Dancing Dissolve动态溶解模式 // Darken变暗模式 // Multiply正片叠底模式 // Linear Burn线性加深模式 // Color Burn颜色加深模式 // Classic Color Burn为兼容早版本的Color Burn模式 // Add增加模式 // Lighten变亮模式 // Screen屏幕模式 // Linear Dodge线性减淡模式 // Overlay叠加模式 // Soft Light柔光模式 // Hard Light强光模式 // Liner Light线性加光模式 // Vivid Light清晰加光模式 // Din Light阻光模式 // Hard Mix强光混合模式 // Difference差别模式 // Classic Difference兼容老版本的差别模式 // Exclusion排除模式 // Hue色相模式 // Saturation饱和度模式 // Color颜色模式 // Luminosity高度模式。 // 上面所列的层模式,是通上下层的颜色通道混合产生影响变化,而下层的层模式则是通过层的Alpha通道影响混合变化。 // Stencil Alpha:Alpha通道模式 // Stencil Luma:亮度模式 // Slihouette Alpha:Alpha通道轮廓 // Slihouette Luma:亮度轮廓 // Alpha Add:Alpha添加 // Luminescent Premul:冷光模式。 /****************混合模式公式*************************************************************************************************************** Photoshop图层混合模式计算公式大全 关于photoshop的图层混合模式,大家一定都非常熟悉了,我在这里把各种混合模式的计算公式都详细的描述一便,希望能够对大家理解图层的混合模式 有所帮助,编写仓促,不足之处请多批评指正。 混合模式可以将两个图层的色彩值紧密结合在一起,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面我将介绍photoshop cs2 中所有混合模式的数学计算公式。另外还介绍了不透明度。下面所介绍的公式仅适用于RGB图像。对于Lab颜色图像而言,这些公式将不再适用。 Opacity 不透明度 C=d*A+(1-d)*B 相对于不透明度而言,其反义就是透明度。这两个术语之间的关系就类似于正负之间的关系:100%的不透明度就是0%的透明度。该混合模式相对来说比较简单,在该混合模式下, 如果两个图层的叠放顺序不一样,其结果也是不一样的(当然50%透明除外)。 该公式中,A代表了上面图层像素的色彩值(A=像素值/255),d表示该层的透明度,B代表下面图层像素的色彩值(B=像素值/255),C代表了混合像素的色彩 值(真实的结果像素值应该为255*C)。该公式也应用于层蒙板,在这种情况下,d代表了蒙板图层中给定位置像素的亮度,下同,不再叙述。 Darken 变暗 B<=A: C=B B>=A: C=A 该模式通过比较上下层像素后取相对较暗的像素作为输出,注意,每个不同的颜色通道的像素都是独立的进行比较,色彩值相对较小的作为输出结果, 下层表示叠放次序位于下面的那个图层,上层表示叠放次序位于上面的那个图层,下同,不再叙述。 Lighten 变亮 B<=A: C=A B>A: C=B 该模式和前面的模式是相似,不同的是取色彩值较大的(也就是较亮的)作为输出结果。 Multiply 正片叠底 C=A*B 该效果将两层像素的标准色彩值(基于0..1之间)相乘后输出,其效果可以形容成:两个幻灯片叠加在一起然后放映,透射光需要分别通过这两个幻灯片, 从而被削弱了两次。 Screen 滤色 C=1-(1-A)*(1-B)也可以写成 1-C=(1-A)*(1-B) 该模式和上一个模式刚好相反,上下层像素的标准色彩值反相后相乘后输出,输出结果比两者的像素值都将要亮(就好像两台投影机分别对其中一个图层进行 投影后,然后投射到同一个屏幕上)。从第二个公式中我们可以看出,如果两个图层反相后,采用Multiply模式混合,则将和对这两个图层采用Screen模式混合后反相的结果完全一样。 Color Dodge 颜色减淡 C=B/(1-A) 该模式下,上层的亮度决定了下层的暴露程度。如果上层越亮,下层获取的光越多,也就是越亮。如果上层是纯黑色,也就是没有亮度,则根本不会影响下层。 如果上层是纯白色,则下层除了像素为255的地方暴露外,其他地方全部为白色(也就是255,不暴露)。结果最黑的地方不会低于下层的像素值。 Color Burn 颜色加深 C=1-(1-B)/A 该模式和上一个模式刚好相反。如果上层越暗,则下层获取的光越少,如果上层为全黑色,则下层越黑,如果上层为全白色,则根本不会影响下层。 结果最亮的地方不会高于下层的像素值。 Linear Dodge 线形减淡 C=A+B 将上下层的色彩值相加。结果将更亮。 Linear Burn 线形加深 C=A+B-1 如果上下层的像素值之和小于255,输出结果将会是纯黑色。如果将上层反相,结果将是纯粹的数学减。 Overlay 叠加 B<=0.5: C=2*A*B B>0.5: C=1-2*(1-A)*(1-B) 依据下层色彩值的不同,该模式可能是Multiply,也可能是Screen模式。 上层决定了下层中间色调偏移的强度。如果上层为50%灰,则结果将完全为下层像素的值。如果上层比50%灰暗,则下层的中间色调的将向暗地方偏移, 如果上层比50%灰亮,则下层的中间色调的将向亮地方偏移。对于上层比50%灰暗,下层中间色调以下的色带变窄(原来为0~2*0.4*0.5,现在为0~2*0.3*0.5), 中间色调以上的色带变宽(原来为2*0.4*0.5~1,现在为2*0.3*0.5~1)。反之亦然。 Hard Light 强光 A<=0.5: C=2*A*B A>0.5: C=1-2*(1-A)*(1-B) 该模式完全相对应于Overlay模式下,两个图层进行次序交换的情况。如过上层的颜色高于50%灰,则下层越亮,反之越暗。 Soft Light 柔光 A<=0.5: C=(2*A-1)*(B-B*B)+B A>0.5: C=(2*A-1)*(sqrt(B)-B)+B 该模式类似上层以Gamma值范围为2.0到0.5的方式来调制下层的色彩值。结果将是一个非常柔和的组合。 Vivid Light 亮光 A<=0.5: C=1-(1-B)/2*A A>0.5: C=B/(2*(1-A)) 该模式非常强烈的增加了对比度,特别是在高亮和阴暗处。可以认为是阴暗处应用Color Burn和高亮处应用Color Dodge。 Linear Light 线形光 C=B+2*A-1 相对于前一种模式而言,该模式增加的对比度要弱些。其类似于Linear Burn,只不过是加深了上层的影响力。 Pin Light 点光 B<2*A-1: C=2*A-1 2*A-1<B<2*A: C=B B>2*A: C=2*A 该模式结果就是导致中间调几乎是不变的下层,但是两边是Darken和Lighte年模式的组合。 Hard Mix 实色混合 A<1-B: C=0 A>1-B: C=1 该模式导致了最终结果仅包含6种基本颜色,每个通道要么就是0,要么就是255。 Difference 差值 C=|A-B| 上下层色调的绝对值。该模式主要用于比较两个不同版本的图片。如果两者完全一样,则结果为全黑。 Exclusion 排除 C=A+B-2*A*B 亮的图片区域将导致另一层的反相,很暗的区域则将导致另一层完全没有改变。 Hue 色相 HcScYc =HASBYB 输出图像的色调为上层,饱和度和亮度保持为下层。对于灰色上层,结果为去色的下层。 Saturation 饱和度 HcScYc =HBSAYB 输出图像的饱和度为上层,色调和亮度保持为下层。 Color 颜色 HcScYc =HASAYB 输出图像的亮度为下层,色调和饱和度保持为上层。 Luminosity 亮度 HcScYc =HBSBYA 输出图像的亮度为上层,色调和饱和度保持为下层。 Dissolve 溶解 该模式根本不是真正的溶解,因此并不是适合Dissolve这个称谓,其表现仅仅和Normal类似。其从上层中随机抽取一些像素作为透明, 使其可以看到下层,随着上层透明度越低,可看到的下层区域越多。如果上层完全不透明,则效果和Normal不会有任何不同。 ******************************混合模式公式**************************************************************************************************/ this.combine = THREE.MultiplyOperation; //混合模式 this.reflectivity = 1; //反射率,默认为1 this.refractionRatio = 0.98; //折射率,默认为0.98 this.fog = true; //雾效,默认开启 this.shading = THREE.SmoothShading; this.wireframe = false; //以线框方式渲染几何体.默认为false this.wireframeLinewidth = 1; //线框的宽度,默认初始化为1. /*******************************************linecap和linejoin属性详解**************************************** lineCap 属性指定线段如何结束。只有绘制较宽线段时,它才有效。这个属性的合法值如下表所示。默认值是:"round"。 值 含义 "butt" 这个默认值指定了线段应该没有线帽。线条的末点是平直的而且和线条的方向正交,这条线段在其端点之外没有扩展。 "round" 这个值指定了线段应该带有一个半圆形的线帽,半圆的直径等于线段的宽度,并且线段在端点之外扩展了线段宽度的一半。 "square" 这个值表示线段应该带有一个矩形线帽。这个值和 "butt" 一样,但是线段扩展了自己的宽度的一半。 lineJoin 属性设置或返回所创建边角的类型,当两条线交汇时。 注释:值 "miter" 受 miterLimit 属性的影响。 默认值: round 值 描述 bevel 创建斜角。 round 创建圆角。 miter 默认。创建尖角。 ********************************************linecap和linejoin属性详解****************************************/ this.wireframeLinecap = 'round'; //线框的线段端点的样式,默认为round,和html的canvas里的属性一样也有"butt", "round", "square" this.wireframeLinejoin = 'round'; //线框的线段边角的类型,当两条线交汇时,默认为round,和html的canvas里的属性一样也有"round", "bevel", "miter" //TODO: 要给线框设置线型怎么办? this.vertexColors = THREE.NoColors; //顶点颜色,默认初始化为THREE.NoColors.当然还可以有 THREE.VertexColors / THREE.FaceColors等选项,这里显示出了javascript的灵活性了.; this.skinning = false; //定义材质是否使用蒙皮,默认初始化为false this.morphTargets = false; //定义材质是否设定目标变形动画,默认为false this.morphNormals = false; //定义是否反转(变换)法线,默认为false this.setValues( parameters ); //调用Material类的setValues方法,将参数parameters赋值给当前MeshLambertMaterial材质的属性. }; /************************************************************* ****下面是MeshLambertMaterial对象的方法属性定义,继承自Material *************************************************************/ THREE.MeshLambertMaterial.prototype = Object.create( THREE.Material.prototype ); /*clone方法 ///clone方法克隆MeshLambertMaterial对象, */ ///<summary>clone</summary> ///<param name ="material" type="MeshLambertMaterial">MeshLambertMaterial对象,可有可无.</param> ///<returns type="MeshLambertMaterial">返回克隆的MeshLambertMaterial对象</returns> THREE.MeshLambertMaterial.prototype.clone = function () { //以下是将材质的属性一一进行复制 var material = new THREE.MeshLambertMaterial(); THREE.Material.prototype.clone.call( this, material ); material.color.copy( this.color ); material.ambient.copy( this.ambient ); material.emissive.copy( this.emissive ); material.wrapAround = this.wrapAround; material.wrapRGB.copy( this.wrapRGB ); material.map = this.map; material.lightMap = this.lightMap; material.specularMap = this.specularMap; material.alphaMap = this.alphaMap; material.envMap = this.envMap; material.combine = this.combine; material.reflectivity = this.reflectivity; material.refractionRatio = this.refractionRatio; material.fog = this.fog; material.shading = this.shading; material.wireframe = this.wireframe; material.wireframeLinewidth = this.wireframeLinewidth; material.wireframeLinecap = this.wireframeLinecap; material.wireframeLinejoin = this.wireframeLinejoin; material.vertexColors = this.vertexColors; material.skinning = this.skinning; material.morphTargets = this.morphTargets; material.morphNormals = this.morphNormals; return material; //返回克隆的MeshLambertMaterial对象 };
商域无疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句:商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、Html5、WEBGL、THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
以下代码是THREE.JS 源码文件中materials/MeshLambertMaterial.js文件的注释.
更多更新在 : https://github.com/omni360/three.js.sourcecode
three.js 源码注释(五十三)Material /MeshLambertMaterial.js
标签:web3d 图形 三维 three.js javascript
原文地址:http://blog.csdn.net/omni360/article/details/42218059