webgl 中 WebGL 源码的阅读过程

总体的思路（可能有的翻译不是很准确，主要看代码思维）

总体架构：

1. 申明变量，并且赋值canvas，3d各种值的默认值（默认值具体看canvas 3D  API,可以参考的网址: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext）

varREVISION ='88';
var MOUSE = {LEFT:0,MIDDLE:1,RIGHT:2};
var CullFaceNone =0;
var CullFaceBack =1;
var CullFaceFront =2;
var CullFaceFrontBack =3;
var FrontFaceDirectionCW =0;
var FrontFaceDirectionCCW =1;
var BasicShadowMap =0;
var PCFShadowMap =1;
var PCFSoftShadowMap =2;
var FrontSide =0;
var BackSide =1;
var DoubleSide =2;
var FlatShading =1;
var SmoothShading =2;
var NoColors =0;
var FaceColors =1;
var VertexColors =2;
var NoBlending =0;
var NormalBlending =1;
var AdditiveBlending =2;
var SubtractiveBlending =3;
var MultiplyBlending =4;
var CustomBlending =5;
var AddEquation =100;
var SubtractEquation =101;
var ReverseSubtractEquation =102;
var MinEquation =103;
var MaxEquation =104;
var ZeroFactor =200;
var OneFactor =201;
var SrcColorFactor =202;
var OneMinusSrcColorFactor =203;
var SrcAlphaFactor =204;
var OneMinusSrcAlphaFactor =205;
var DstAlphaFactor =206;
var OneMinusDstAlphaFactor =207;
var DstColorFactor =208;
var OneMinusDstColorFactor =209;
var SrcAlphaSaturateFactor =210;
var NeverDepth =0;
var AlwaysDepth =1;
var LessDepth =2;
var LessEqualDepth =3;
var EqualDepth =4;
var GreaterEqualDepth =5;
var GreaterDepth =6;
var NotEqualDepth =7;
var MultiplyOperation =0;
var MixOperation =1;
var AddOperation =2;
var NoToneMapping =0;
var LinearToneMapping =1;
var ReinhardToneMapping =2;
var Uncharted2ToneMapping =3;
var CineonToneMapping =4;
var UVMapping =300;
var CubeReflectionMapping =301;
var CubeRefractionMapping =302;
var EquirectangularReflectionMapping =303;
var EquirectangularRefractionMapping =304;
var SphericalReflectionMapping =305;
var CubeUVReflectionMapping =306;
var CubeUVRefractionMapping =307;
var RepeatWrapping =1000;
var ClampToEdgeWrapping =1001;
var MirroredRepeatWrapping =1002;
var NearestFilter =1003;
var NearestMipMapNearestFilter =1004;
var NearestMipMapLinearFilter =1005;
var LinearFilter =1006;
var LinearMipMapNearestFilter =1007;
var LinearMipMapLinearFilter =1008;
var UnsignedByteType =1009;
var ByteType =1010;
var ShortType =1011;
var UnsignedShortType =1012;
var IntType =1013;
var UnsignedIntType =1014;
var FloatType =1015;
var HalfFloatType =1016;
var UnsignedShort4444Type =1017;
var UnsignedShort5551Type =1018;
var UnsignedShort565Type =1019;
var UnsignedInt248Type =1020;
var AlphaFormat =1021;
var RGBFormat =1022;
var RGBAFormat =1023;
var LuminanceFormat =1024;
var LuminanceAlphaFormat =1025;
var RGBEFormat = RGBAFormat;
var DepthFormat =1026;
var DepthStencilFormat =1027;
var RGB_S3TC_DXT1_Format =2001;
var RGBA_S3TC_DXT1_Format =2002;
var RGBA_S3TC_DXT3_Format =2003;
var RGBA_S3TC_DXT5_Format =2004;
var RGB_PVRTC_4BPPV1_Format =2100;
var RGB_PVRTC_2BPPV1_Format =2101;
var RGBA_PVRTC_4BPPV1_Format =2102;
var RGBA_PVRTC_2BPPV1_Format =2103;
var RGB_ETC1_Format =2151;
var LoopOnce =2200;
var LoopRepeat =2201;
var LoopPingPong =2202;
var InterpolateDiscrete =2300;
var InterpolateLinear =2301;
var InterpolateSmooth =2302;
var ZeroCurvatureEnding =2400;
var ZeroSlopeEnding =2401;
var WrapAroundEnding =2402;
var TrianglesDrawMode =0;
var TriangleStripDrawMode =1;
var TriangleFanDrawMode =2;
var LinearEncoding =3000;
var sRGBEncoding =3001;
var GammaEncoding =3007;
var RGBEEncoding =3002;
var LogLuvEncoding =3003;
var RGBM7Encoding =3004;
var RGBM16Encoding =3005;
var RGBDEncoding =3006;
var BasicDepthPacking =3200;
var RGBADepthPacking =3201;

 2.  申明gezhon

//事件触发类
function EventDispatcher() {}
Object.assign(EventDispatcher.prototype,{} )

// vector4对象

functionVector4( x,y,z,w ){}

Object.assign(Vector4.prototype,{} );

 

// Math对象
var _Math ={};

 

// 视椎体对象

functionFrustum( p0,p1,p2,p3,p4,p5 ) {}

Object.assign(Frustum.prototype,{})

 

//  剪裁对象
function WebGLClipping(){}

 

// 矩阵Matrix4
function Matrix4(){}

Object.assign(Matrix4.prototype,{})

 

// vector3
function Vector3( x,y,z ){}

Object.assign(Vector3.prototype,{})

 

// Sphere 对象
function Sphere( center,radius ){}

Object.assign(Sphere.prototype,{})

 

//plane 对象

functionPlane( normal,constant ){} 

Object.assign(Plane.prototype,{}) 

 

//Quaternion
function Quaternion( x,y,z,w){};

Object.assign(Quaternion,{});

Object.assign(Quaternion.prototype,{});

Object.assign(Quaternion.prototype,

{})

 

// box3 盒子范围
function Box3( min,max ){}

Object.assign(Box3.prototype,{})

 

// Matrxix3 矩阵

functionMatrix3(){}

Object.assign(Matrix3.prototype,{})

 

// WebGLExtensions  对 webgl进行扩展
function WebGLExtensions(){};

 

//   webgl 工具扩展
function WebGLUtils( gl,extensions ){}

 

//   webgl状态扩展
function WebGLState( gl,extensions,utils ){}

 

//   webgl viewport设置类
function WebVRManager( renderer ){}

 

//  shadowMap 阴影投射类
function WebGLShadowMap( _renderer,_objects,maxTextureSize ){}

 

//   透视相机类
function PerspectiveCamera( fov,aspect,near,far ){};

 

PerspectiveCamera.prototype= Object.assign( Object.create(Camera.prototype,),{});

 

//普通相机类
function Camera(){}

Camera.prototype= Object.assign( Object.create(Object3D.prototype),{})

 

// object3d  对象
var object3DId =0;
function Object3D(){}

Object3D.DefaultUp=newVector3(0,1,0);
Object3D.DefaultMatrixAutoUpdate=true;
Object.assign(Object3D.prototype,EventDispatcher.prototype,{})

 

// 欧拉角
function Euler( x,y,z,order ){}

 

Euler.RotationOrders= ['XYZ','YZX','ZXY','XZY','YXZ','ZYX'];
Euler.DefaultOrder='XYZ';
Object.defineProperties(Euler.prototype,{})

Object.assign(Euler.prototype,{})

 

 //  图层
function Layers(){}

Object.assign(Layers.prototype,{})

 

// ArrayCamera  相机的应用方法
function ArrayCamera( array ){}

 

ArrayCamera.prototype= Object.assign( Object.create(PerspectiveCamera.prototype),{})

 

//  Vector2 类
function Vector2( x,y ){}

Object.defineProperties(Vector2.prototype,{})

Object.assign(Vector2.prototype,{})

 

//  深度材质类
function MeshDepthMaterial( parameters ){}

MeshDepthMaterial.prototype= Object.create(Material.prototype);
MeshDepthMaterial.prototype.constructor=MeshDepthMaterial;
MeshDepthMaterial.prototype.isMeshDepthMaterial=true;
MeshDepthMaterial.prototype.copy=function( source ){}

 

// 材质类
var materialId =0;
function Material(){}

Object.assign(Material.prototype,EventDispatcher.prototype,{})

 

//  方向材质类
function MeshDistanceMaterial( parameters ){}

MeshDistanceMaterial.prototype= Object.create(Material.prototype);
MeshDistanceMaterial.prototype.constructor=MeshDistanceMaterial;
MeshDistanceMaterial.prototype.isMeshDistanceMaterial=true;
MeshDistanceMaterial.prototype.copy=function( source ){}

 

//webGl对象类

functionWebGLRenderer( parameters ){}

Object.assign(WebGLRenderer.prototype,{})

Object.defineProperties(WebGLRenderer.prototype,{})

这就是整体的架构，后面我们会一个类一个类学习，解析，可以能力有限，希望对大家有利！！！下一节 ：EventDispatcher