Three.js Source Note (57) Material/shadermaterial.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 materials/shadermaterial.js file in the three.js source file.

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

/** * @author alteredq/http://alteredqualia.com/* * Parameters = {* Defines: {"label": "Value"}, * Uniforms: {"P Arameter1 ": {type:" F ", value:1.0}," Parameter2 ": {type:" I "value2:2}}, * * Fragmentshader: <string>, * ve Rtexshader: <string>, * * shading:three. Smoothshading, * blending:three. normalblending, * depthtest: <bool>, * depthwrite: &LT;BOOL&GT;, * * wireframe: <boolean>, * wireframeline Width: <float>, * * lights: <bool>, * * vertexcolors:three. Nocolors/three. Vertexcolors/three. Facecolors, * * skinning: <bool>, * morphtargets: <bool>, * morphnormals: <bool>, * *fog: <bool&gt ; *} The *//*///shadermaterial method creates a material type for a custom shader based on the parameter parameters, which allows the user to expand the material type with infinite possibilities. The format of the///parameters parameter is shown above. The function of the Shadermaterial object is implemented by defining the function prototype object constructed. Most attribute methods inherit from the base class of the material material.//////example:///var material = new three. Shadermaterial ({///uniforms: {///time:{type: "F", value:new three. Vector2 ()}///},///vertexshader:documenT.getelementbyid (' VertexShader '). Textcontent,///fragmentshader:document.getelementbyid (' FragmentShader '). textcontent///});///*////<summary>shadermaterial</summary>///<param name = "Parameters" Type= " String ">string type JSON format material attribute parameter </param>///<returns type=" Shadermaterial "> Returns shadermaterial, Creates a material type </returns>three for a custom shader. shadermaterial = 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 shadermaterial to use. This.defines = {};// User-defined defines variable this.uniforms = {};//user-defined uniforms variable this.attributes = null;//user-defined attribute variable, The default is initialized to Nullthis.vertexshader = ' void Main () {\n\tgl_position = ProjectionMatrix * Modelviewmatrix * VEC4 (Position, 1.0); \ n} ';//custom vertex shader written by glsl This.fragmentshader = ' void Main () {\n\tgl_fragcolor = VEC4 (1.0, 0.0, 0.0, 1.0); \ n} ';//custom written by GLSL Element shader//shading//shading/********************* Coloring mode **************************************************************** Coloring mode The vast majority of 3D objects are composed of polygons (polygon), they 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 the vertex of each polygon, and then according to the interpolation method, calculate the light and shadow value of the pixel on the vertex, then use the linear interpolation processing again, calculate all the other pixels of the high-color in the sampling calculation, only to each multilateral        The shadow effect of the shape vertex, but the complementary color will calculate all the points in it.        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 different objects.Interactions, such as reflection, absorption, refraction, etc. 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: A color is used for a point, line, or polygon to draw, and the color of the entire entity is the color of any one of its points. This.linewidth = 1;//Line Width property, default initialized to 1//todo: What does this linewidth property do? this.wireframe = false;// Renders geometry as wireframe. Default = Falsethis.wireframelinewidth = 1;//width of the wireframe, default initialized to 1.this.fog = false; Set to use scene fog//whether to turn on fog effect, default off this.lights = false; Set to use scene lights//whether the light in the scene is used, default is initialized to Falsethis.vertexcolors = three. Nocolors; Set to use "color" attribute stream//vertex color, default initialized to Three.nocolors. Of course, there are three. Vertexcolors/three. Facecolors and other options, this shows the flexibility of JavaScript. This.skinning = false; Set to use skinning attribute streams//defines if the material is skinned, default initialized to Falsethis.morphtargets = false; Set to use Morph targets//defines whether the material sets the target warp animation, the default is Falsethis.morphnormals = false; Set to use Morph Normals//defines whether to invert (transform) normals, default is false//when rendered geometry doesn ' t include these attributes but the mate Rial does,//Use these default values in WebGL. This avoids errors when the buffer data is missing.//the rendered geometry does not contain these properties, but the material contains, using these default values in WebGL, You can avoid errors in cache data loss. This.defaultattributevalues = {' Color ': [1, 1, 1], ' UV ': [0, 0], ' uv2 ': [0, 0]};//The default property value in WebGL. this.in Dex0attributename = undefined;//This index0attributename property, which is used to receive the property name with index 0.//todo: Wait until you see my WebGL renderer and come back here. This.setvalues (parameters);//Call the Setvalues method of the material class to assign the parameter parameters to the properties of the current shadermaterial material.};/ The following is the method property definition for the Shadermaterial object, inherited from the material******* /three. Shadermaterial.prototype = Object.create (three. Material.prototype);/*Clone method///clone Method Clones Shadermaterial object, *////<summary>clone</summary>///<param name = "Material" type= " Shadermaterial ">shadermaterial object, optional. </param>///<returns type=" Shadermaterial "> Returns the cloned Shadermaterial object </returns>three. ShaderMaterial.prototype.clone = function () {//The following is a copy of the properties of the material, var material = new three. Shadermaterial (); Three. Material.prototype.clone.call (this, Material); material.fragmentshader = This.fragmentshader;material.vertexshader = This.vertexshader;material.uniforms = three. Uniformsutils.clone (this.uniforms); material.attributes = This.attributes;material.defines = This.defines; material.shading = This.shading;material.wireframe = This.wireframe;material.wireframelinewidth = This.wireframelinewidth;material.fog = This.fog;material.lights = This.lights;material.vertexcolors = this.vertexcolors;material.skinning = This.skinning;material.morphtargets = This.morphtargets; Material.morphnormals = This.morphnormals;return material;//returns the cloned shadermateRial 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 materials/shadermaterial.js file in the three.js source file.

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

Three.js Source Note (57) Material/shadermaterial.js