Three.js Source Note (48) Material/meshbasicmaterial.js

Commercial Territory (http://blog.csdn.net/omni360/)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Business Domain-this blog focuses on Agile development and mobile and IoT device research: Data visualization, Golang, HTML5, WEBGL, three. JS, Otherwise, from this blog article refused to reprint or reprint, thank you for your cooperation.

I was just beginning to learn, a lot of things are definitely wrong and please forgive me.

The following code is a comment for the material/meshbasicmaterial.js file in the three.js source file.

More updates in: Https://github.com/omni360/three.js.sourcecode

/** * @author mrdoob/http://mrdoob.com/* @author alteredq/http://alteredqualia.com/* * parameters = {* Color: < 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: &LT;FLOAT&GT;, * * shading:three. Smoothshading, * blending:three. normalblending, * depthtest: <bool>, * depthwrite: &LT;BOOL&GT;, * * wireframe: <boolean>, * wireframeline Width: <float>, * * vertexcolors:three. Nocolors/three. Vertexcolors/three. Facecolors, * * skinning: <bool>, * morphtargets: &LT;BOOL&GT;, * * Fog: <bool> *} *//*///meshbasicmateria The L method creates the base material type of mesh (mesh) According to the parameter parameters, and parameters The format of the parameter to see above. function functions of Meshbasicmaterial objects are constructed using///definitionThe function prototype object to implement. Most property methods inherit from the base class of the material material.*////<summary>meshbasicmaterial</summary>///<param name = " Parameters "Type=" String ">string type JSON format material property parameters </param>///<returns type=" Meshbasicmaterial "> Returns meshbasicmaterial, segment material. </returns>three. meshbasicmaterial = function (parameters) {three. Material.call (this);//Call method of the Material object is called, the method that originally belongs to Material is given to the current object meshbasicmaterial to use. This.color = new three. Color (0XFFFFFF); emissive//color attribute, self-luminous color, color value with hexadecimal value, default is 0xffffffthis.map = null;//normal map map, default is null/********************************* Why use lightmapping************************************************************************** Reference:/http Blog.sina.com.cn/s/blog_5b6cb9500101cplo.html1. Why use lightmapping? Simply put, real-time light calculations are time consuming, and as more light sources multiply, the calculation takes time. Using Lightmap to simulate the effect of light, you do not have to calculate the light, will bring a significant performance improvement. Of course, you do not have the lighting effect is also no problem, specific or look at the project needs. The simplest is to bake the vertex color of the map directly in 3dmas or Maya. *************************************************************************************************************** /this.lightmap = null;//Illumination map,Default = Nullthis.specularmap = null;//Specular map, default is Nullthis.alphamap = null;//transparent channel, default is Nullthis.envmap = null;//environment map, default is NULL TEXTURE constants//Texture constants, used to set the material blending mode, have//three. Multiplyoperation, multiply, blend the layers in Photoshop into a multiply//three. Mixoperation,//Mixed mode//three. Addoperation,//Add mode//reference: http://avnpc.com/pages/photoshop-layer-blending-algorithm//reference://todo: Is it possible to implement more modes?// Normal mode//dissolve dissolve mode//Dancing dissolve dynamic Dissolve mode//darken darken mode//multiply multiply mode//Linear burn linear burn mode//color burn color Plus Deep mode//Classic color burn for compatible with early version of color burn mode//Add Add mode//lighten lighten mode//Screen mode//Linear Dodge Linear Dodge Mode//Overlay overlay mode Soft light Soft mode//hard light Glare mode//Liner light linear mode//Vivid light Clear Mode//Din light resistive Mode//hard mix strong light Mixed Mode//differ ence differential Mode//Classic difference compatible with the old version of the differential mode//exclusion exclusion mode//Hue mode//saturation saturation mode//Color color mode//luminosity height mode. The layer pattern listed above is influenced by the mixing of the color channels in the upper and lower layers, while the underlying layer pattern affects the mixed change through the alpha channel of the layer. Stencil alpha:alpha Channel mode//stencil Luma: Brightness mode//Slihouette Alpha:alpha Channel profile//Slihouette LuMA: Brightness profile//Alpha Add:alpha Add//luminescent Premul: Cold light mode. /**************** Mixed Mode formula **************************************************************************************** Photoshop layer Blending mode calculation formula all about Photoshop layer blending mode, everyone must be very familiar with, I here to the various mixed-mode formulas are described in detail, Hope to be able to understand the layer of the mixed mode of help, write haste, shortcomings please criticize. Blending mode allows you to combine the color values of two layers to create a large number of effects. Behind these effects is the fact that some simple mathematical formulas are in effect. Below I will describe the mathematical formulas for all the blending modes in Photoshop CS2. The opacity is also described. The formulas described below apply only to RGB images. For lab color images, these formulas will no longer apply. Opacity opacity c=d*a+ (1-d) *b relative to opacity, its inverse is transparency. The relationship between the two terms is similar to the relationship between positive and negative: 100% of the opacity is 0% transparency. This blending mode is relatively straightforward, and in this blending mode, if the stacking order of two layers is different, the result is not the same (except 50% transparency, of course). In this formula, a represents the color value of the layer pixel above (a= pixel value/255), D represents the transparency of the layer, B represents the color value of the layer pixels below (b= pixel value/255), and C represents the color value of the mixed pixel (the actual result pixel value should be 255*c). The formula is also applied to the layer mask, in which case D represents the luminance of the pixel in a given position in the mask layer, which is no longer described. Darken Darken B<=a:c=bb>=a:c=a This mode compares the upper and lower pixels with relatively darker pixels as output, noting that each pixel of a different color channel is independently compared, with a relatively small color value as the result of the output, The lower level indicates that the stacking order is located on the layer below, and the upper layer indicates that the stacking order is on the top, and is no longer described. Lighten lighten b<=a:c=ab>a:c=b The pattern is similar to the previous pattern, and the difference is that the color value is larger (that is, brighter) as the output result. Multiply Multiply c=a*b The effect will be two-layer pixels of the standard color value (based on 0. 1) After multiplying the output, the effect can beDescribed as: Two slides stacked together and then screened, the transmitted light needs to pass through the two slides, thus being weakened two times. Screen filter c=1-(1-a) * (1-b) can also be written 1-c= (1-a) * (1-b) This mode is the opposite of the previous mode, the standard color values of the upper and lower pixels are reversed and then multiplied after the output, The output will be brighter than the values of both pixels (as if two projectors were projecting one of the layers, and then projected onto the same screen). As we can see from the second formula, if the two layers are reversed, then the multiply pattern is mixed, then the reversed phase is exactly the same as for the two layers with screen mode. Color Dodge c=b/(1-a) in this mode, the brightness of the upper layer determines the level of exposure to the underlying. If the upper layer is brighter, the lower layer gets more light, which is brighter. If the upper layer is pure black, i.e. there is no brightness, it will not affect the lower layer at all. If the upper layer is pure white, the lower layer is exposed, except where the pixels are 255, and all other places are white (i.e. 255, not exposed). The darker the result is not lower than the underlying pixel value. Color Burn c=1-(1-b)/a The mode is the opposite of the previous mode. If the upper layer is darker, the lower layer gets less light, and if the upper layer is full black, the lower layer is darker, and if the upper layer is full white, it will not affect the lower layer at all. The brightest place in the result is no higher than the underlying pixel value. Linear Dodge Linear Dodge C=a+b adds the color values of the upper and lower layers. The result will be brighter. Linear Burn Linear Deepening c=a+b-1 if the upper and lower pixel values are less than 255, the output will be pure black. If the upper layer is reversed, the result will be purely mathematical subtraction. Overlay Overlay b<=0.5:c=2*a*bb>0.5:c=1-2* (1-a) * (1-b) Depending on the underlying color values, this mode may be multiply or screen mode. The upper layer determines the intensity of the lower intermediate hue offset. If the upper layer is 50% gray, the result is completely the value of the underlying pixel. If the upper layer is darker than 50%, then the midtones of the lower layer will be shifted to the dark place, and if the upper layer is lighter than 50%, then the midtones in the lower layer will be shifted to the bright place. For the upper layer than 50% gray, the lower middle tone below the color band narrowed (originally 0~2*0.4*0.5, now 0~2*0.3*0.5), the middle tone above the color band widened (originally 2*0.4*0.5~1, now 2*0.3*0.5~1). Vice versa. Hard Light Glare a<=0.5:c=2*a*ba>0.5:c=1-2* (1-a) * (1-b) This mode is completely relative to overlay mode,Two layers in order to exchange the case. If the color above the upper layer is more than 50% Gray, the lighter the lower layer, the darker the reverse. Soft Light Soft a<=0.5:c= (2*a-1) * (b-b*b) +ba>0.5:c= (2*a-1) * (sqrt (B)-B) +b This mode is similar to the upper layer to modulate the lower-level color values in the range of gamma values from 2.0 to 0.5. The result will be a very soft combination. Vivid Light a<=0.5:c=1-(1-b)/2*aa>0.5:c=b/(1-a) This mode increases the contrast very strongly, especially in the highlights and shadows. It can be considered that the color burn is applied in the shade and the color Dodge is applied at the highlight. Linear Light linear c=b+2*a-1 The pattern increases in contrast to the previous mode. It is similar to linear Burn, but only to deepen the influence of the upper layer. Pin Light spot B<2*a-1: C=2*a-12*a-1<b<2*a:c=bb>2*a:c=2*a The result of this pattern is that the middle tune is almost constant, but both sides are a combination of the darken and lighte-year patterns. Hard mix solid Color hybrid a<1-b: c=0a>1-b: c=1 This mode causes the final result to contain only 6 basic colors, each of which is either 0 or 255. Difference Difference Value c=| A-b| the absolute value of the top and bottom tones. This mode is primarily used to compare two different versions of a picture. If the two are exactly the same, the result is All black. Exclusion excluding the c=a+b-2*a*b bright image area will result in another layer of inversion, and a very dark area will cause the other layer to be completely unchanged. Hue Hue Hcscyc =hasbyb The output image has a hue of the upper layer, and the saturation and brightness remain below the lower level. For the gray upper layer, the result is a de-colored lower layer. The saturation of the saturation saturation hcscyc =hbsayb output image is the upper level, and the hue and brightness remain lower. Color HCSCYC The brightness of the =hasayb output image is lower, and the hue and saturation remains the upper level. Luminosity brightness hcscyc =hbsbya The output image is the upper level, and the hue and saturation remains lower. Dissolve dissolve the pattern is not really dissolved at all, so it is not suitable for dissolve, which behaves just like normal. It randomly extracts some pixels from the upper layer as transparent so that it can see the lower layer, with the lower the opacity of the upper layer, the more the lower area can be seen. If the upperCompletely opaque, the effect will not be any different from normal. Mixed Mode Formula *************************************************************************** /this.combine = three. multiplyoperation;//Mixed Mode this.reflectivity = 1;//reflectivity, default = 1this.refractionratio = 0.98;//Refractive index, default = 0.98this.fog = true;// Fog effect, default on//shading//shading/********************* Coloring mode **************************************************************         Coloring mode The vast majority of 3D objects are made up of polygons (polygon), which must undergo certain shading procedures before they are displayed in a line structure (wireframe).        These coloring processing methods are poor to good, in turn, mainly divided into flatshading, gouraudshading, phoneshading, Scanlinerenderer, ray-traced. Flatshading (planar coloring) is also called "constant coloring," and flat shading is the simplest and fastest method of coloring, and each polygon is assigned a single, unchanged color.        This method, while producing unreal results, is ideal for fast imaging and other occasions where it requires more speed than detail, such as generating preview animations. Gouraudshading (Gourard coloring/high-coloring) This coloring is much better and is also the most widely used coloring method in the game.        It can smooth and dissolve the color of each vertex of 3D model, assign each point on each polygon to a set of tonal values, and make its appearance have more intense real-time sense and stereoscopic dynamic, but its coloring speed is much slower than the plane coloring. Phoneshading (complementary coloring) first, find out each polygon vertex, and then according to the interpolation method, calculate the topThe light and shadow values of the pixels on the line are counted, and then the linear interpolation is used to calculate all the other pixels in the sampling calculation, and the shadow effect of each polygon vertex is absorbed by the color, while the complementary coloring will calculate all the points.        Scanlinerenderer (scan line coloring) This is the default rendering for 3ds Max, which is a shading method based on a continuous set of horizontal lines, because it renders faster and is generally used in preview scenarios. Ray-traced (Ray tracing shading) Ray tracing is the real color algorithm that the real value of every pixel is projected on the object according to the incident path of the physical illumination Ray, and because of its accurate calculation, the image effect is high quality, so making CG must be        To use this option. Radiosity (radiation coloring) This is a ray-traced effect. It calculates the lighting effect from the observer to the light source by making a source of light in the scene and depending on the position and reflection of the object.        On this line, light is affected by the interaction of different objects, such as reflection, absorption, refraction and other conditions are counted.            The shading models that Glshademodel (Glenum mode) can set are: Gl_smooth and Gl_flat Gl_flat constant coloring: A color for points, lines, or polygons, and the color of the entire entity is the color of any point. Gl_smooth smooth shading: Draws with multiple colors, each vertex being processed separately, with uniform interpolation between vertices and elements. Coloring mode **************************************************************************/ This.shading = three. smoothshading;//coloring Way, three. Smoothshading smooth shading: Draws with multiple colors, each vertex being processed separately, with uniform interpolation between vertices and elements.    There are several three.noshading = 0; No coloring???? Three.  flatshading = 1; GL_FLAT constant coloring: For points, lines, or polygons are drawn in one color, and the color of the entire entity is the color of any point of it.。 This.wireframe = false;//Renders the geometry as wireframe. The default is Falsethis.wireframelinewidth = 1;//the width of the wireframe. This.wireframelinecap = ' round ';// The style of the end of the line segment ends with the default of round, as well as the "butt", "round", "square" this.wireframelinejoin = ' round ' in the canvas of the HTML, and/or the type of corner of the line frame, When the two lines meet, the default is round, and the HTML canvas is the same as the properties of the "round", "bevel", "miter"//todo: To set the wireframe style what to do? this.vertexcolors = three. nocolors;//vertex color, default initialized to Three.nocolors. Of course there are three.nocolors/three. Vertexcolors/three. Facecolors and other options, this shows the flexibility of javascript. This.skinning = false;//Defines whether a material uses skinning, default is initialized to Falsethis.morphtargets = false;// Defines whether the material sets the target warp animation, which defaults to falsethis.setvalues (parameters);//calls the Setvalues method of the material class, Assigns the parameter parameters to the properties of the current linebasicmaterial material.};/ The following is the method property definition for the Meshbasicmaterial object, inherited from the material**** /three. Meshbasicmaterial.prototype = Object.create (three. Material.prototype);/*clone method///clone Method Clone Meshbasicmaterial Object,*////<summary>clone</summary>///< param NAME ="Material" type= "meshbasicmaterial" >meshbasicmaterial object, optional. </param>///<returns type= " Meshbasicmaterial "> returns the cloned Meshbasicmaterial object </returns>three. MeshBasicMaterial.prototype.clone = function () {//The following is a copy of the properties of the material, var material = new three. Meshbasicmaterial (); Three. Material.prototype.clone.call (this, Material); Material.color.copy (this.color); 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;return material;//Returns the cloned Meshbasicmaterial object}; 

Commercial Territory (http://blog.csdn.net/omni360/)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Business Domain-this blog focuses on Agile development and mobile and IoT device research: Data visualization, Golang, HTML5, WEBGL, three. JS, Otherwise, from this blog article refused to reprint or reprint, thank you for your cooperation.

The following code is a comment for the material/meshbasicmaterial.js file in the three.js source file.

More updates in: Https://github.com/omni360/three.js.sourcecode

Three.js Source Note (48) Material/meshbasicmaterial.js