WebGLProgram.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671
  1. THREE.WebGLProgram = ( function () {
  2. var programIdCount = 0;
  3. // TODO: Combine the regex
  4. var structRe = /^([\w\d_]+)\.([\w\d_]+)$/;
  5. var arrayStructRe = /^([\w\d_]+)\[(\d+)\]\.([\w\d_]+)$/;
  6. var arrayRe = /^([\w\d_]+)\[0\]$/;
  7. function getTexelDecodingFunction( functionName, encoding ) {
  8. var code = "vec4 " + functionName + "( vec4 value ) { return ";
  9. switch( encoding ) {
  10. case THREE.LinearEncoding:
  11. code += "value";
  12. break;
  13. case THREE.sRGBEncoding:
  14. code += "sRGBToLinear( value )";
  15. break;
  16. case THREE.RGBEEncoding:
  17. code += "RGBEToLinear( value )";
  18. break;
  19. case THREE.RGBM7Encoding:
  20. code += "RGBMToLinear( value, 7.0 )";
  21. break;
  22. case THREE.RGBM16Encoding:
  23. code += "RGBMToLinear( value, 16.0 )";
  24. break;
  25. case THREE.RGBDEncoding:
  26. code += "RGBDToLinear( value, 256.0 )";
  27. break;
  28. case THREE.GammaEncoding:
  29. code += "GammaToLinear( value, float( GAMMA_FACTOR ) )";
  30. break;
  31. default:
  32. throw new Error( "unsupported encoding: " + encoding );
  33. }
  34. code += "; }";
  35. return code;
  36. }
  37. function generateExtensions( extensions, parameters, rendererExtensions ) {
  38. extensions = extensions || {};
  39. var chunks = [
  40. ( extensions.derivatives || parameters.bumpMap || parameters.normalMap || parameters.flatShading ) ? '#extension GL_OES_standard_derivatives : enable' : '',
  41. ( extensions.fragDepth || parameters.logarithmicDepthBuffer ) && rendererExtensions.get( 'EXT_frag_depth' ) ? '#extension GL_EXT_frag_depth : enable' : '',
  42. ( extensions.drawBuffers ) && rendererExtensions.get( 'WEBGL_draw_buffers' ) ? '#extension GL_EXT_draw_buffers : require' : '',
  43. ( extensions.shaderTextureLOD || parameters.envMap ) && rendererExtensions.get( 'EXT_shader_texture_lod' ) ? '#extension GL_EXT_shader_texture_lod : enable' : '',
  44. ];
  45. return chunks.filter( filterEmptyLine ).join( '\n' );
  46. }
  47. function generateDefines( defines ) {
  48. var chunks = [];
  49. for ( var name in defines ) {
  50. var value = defines[ name ];
  51. if ( value === false ) continue;
  52. chunks.push( '#define ' + name + ' ' + value );
  53. }
  54. return chunks.join( '\n' );
  55. }
  56. function fetchUniformLocations( gl, program, identifiers ) {
  57. var uniforms = {};
  58. var n = gl.getProgramParameter( program, gl.ACTIVE_UNIFORMS );
  59. for ( var i = 0; i < n; i ++ ) {
  60. var info = gl.getActiveUniform( program, i );
  61. var name = info.name;
  62. var location = gl.getUniformLocation( program, name );
  63. //console.log("THREE.WebGLProgram: ACTIVE UNIFORM:", name);
  64. var matches = structRe.exec( name );
  65. if ( matches ) {
  66. var structName = matches[ 1 ];
  67. var structProperty = matches[ 2 ];
  68. var uniformsStruct = uniforms[ structName ];
  69. if ( ! uniformsStruct ) {
  70. uniformsStruct = uniforms[ structName ] = {};
  71. }
  72. uniformsStruct[ structProperty ] = location;
  73. continue;
  74. }
  75. matches = arrayStructRe.exec( name );
  76. if ( matches ) {
  77. var arrayName = matches[ 1 ];
  78. var arrayIndex = matches[ 2 ];
  79. var arrayProperty = matches[ 3 ];
  80. var uniformsArray = uniforms[ arrayName ];
  81. if ( ! uniformsArray ) {
  82. uniformsArray = uniforms[ arrayName ] = [];
  83. }
  84. var uniformsArrayIndex = uniformsArray[ arrayIndex ];
  85. if ( ! uniformsArrayIndex ) {
  86. uniformsArrayIndex = uniformsArray[ arrayIndex ] = {};
  87. }
  88. uniformsArrayIndex[ arrayProperty ] = location;
  89. continue;
  90. }
  91. matches = arrayRe.exec( name );
  92. if ( matches ) {
  93. var arrayName = matches[ 1 ];
  94. uniforms[ arrayName ] = location;
  95. continue;
  96. }
  97. uniforms[ name ] = location;
  98. }
  99. return uniforms;
  100. }
  101. function fetchAttributeLocations( gl, program, identifiers ) {
  102. var attributes = {};
  103. var n = gl.getProgramParameter( program, gl.ACTIVE_ATTRIBUTES );
  104. for ( var i = 0; i < n; i ++ ) {
  105. var info = gl.getActiveAttrib( program, i );
  106. var name = info.name;
  107. // console.log("THREE.WebGLProgram: ACTIVE VERTEX ATTRIBUTE:", name, i );
  108. attributes[ name ] = gl.getAttribLocation( program, name );
  109. }
  110. return attributes;
  111. }
  112. function filterEmptyLine( string ) {
  113. return string !== '';
  114. }
  115. function replaceLightNums( string, parameters ) {
  116. return string
  117. .replace( /NUM_DIR_LIGHTS/g, parameters.numDirLights )
  118. .replace( /NUM_SPOT_LIGHTS/g, parameters.numSpotLights )
  119. .replace( /NUM_POINT_LIGHTS/g, parameters.numPointLights )
  120. .replace( /NUM_HEMI_LIGHTS/g, parameters.numHemiLights );
  121. }
  122. function parseIncludes( string ) {
  123. var pattern = /#include[ \t]+<([\w\d.]+)>/g;
  124. function replace( match, include ) {
  125. return parseIncludes( THREE.ShaderChunk[ include ] );
  126. }
  127. return string.replace( pattern, replace );
  128. }
  129. function unrollLoops( string ) {
  130. var pattern = /for \( int i \= (\d+)\; i < (\d+)\; i \+\+ \) \{([\s\S]+?)(?=\})\}/g;
  131. function replace( match, start, end, snippet ) {
  132. var unroll = '';
  133. for ( var i = parseInt( start ); i < parseInt( end ); i ++ ) {
  134. unroll += snippet.replace( /\[ i \]/g, '[ ' + i + ' ]' );
  135. }
  136. return unroll;
  137. }
  138. return string.replace( pattern, replace );
  139. }
  140. return function WebGLProgram( renderer, code, material, parameters ) {
  141. var gl = renderer.context;
  142. var extensions = material.extensions;
  143. var defines = material.defines;
  144. var vertexShader = material.__webglShader.vertexShader;
  145. var fragmentShader = material.__webglShader.fragmentShader;
  146. var shadowMapTypeDefine = 'SHADOWMAP_TYPE_BASIC';
  147. if ( parameters.shadowMapType === THREE.PCFShadowMap ) {
  148. shadowMapTypeDefine = 'SHADOWMAP_TYPE_PCF';
  149. } else if ( parameters.shadowMapType === THREE.PCFSoftShadowMap ) {
  150. shadowMapTypeDefine = 'SHADOWMAP_TYPE_PCF_SOFT';
  151. }
  152. var envMapTypeDefine = 'ENVMAP_TYPE_CUBE';
  153. var envMapModeDefine = 'ENVMAP_MODE_REFLECTION';
  154. var envMapBlendingDefine = 'ENVMAP_BLENDING_MULTIPLY';
  155. if ( parameters.envMap ) {
  156. switch ( material.envMap.mapping ) {
  157. case THREE.CubeReflectionMapping:
  158. case THREE.CubeRefractionMapping:
  159. envMapTypeDefine = 'ENVMAP_TYPE_CUBE';
  160. break;
  161. case THREE.EquirectangularReflectionMapping:
  162. case THREE.EquirectangularRefractionMapping:
  163. envMapTypeDefine = 'ENVMAP_TYPE_EQUIREC';
  164. break;
  165. case THREE.SphericalReflectionMapping:
  166. envMapTypeDefine = 'ENVMAP_TYPE_SPHERE';
  167. break;
  168. }
  169. switch ( material.envMap.mapping ) {
  170. case THREE.CubeRefractionMapping:
  171. case THREE.EquirectangularRefractionMapping:
  172. envMapModeDefine = 'ENVMAP_MODE_REFRACTION';
  173. break;
  174. }
  175. switch ( material.combine ) {
  176. case THREE.MultiplyOperation:
  177. envMapBlendingDefine = 'ENVMAP_BLENDING_MULTIPLY';
  178. break;
  179. case THREE.MixOperation:
  180. envMapBlendingDefine = 'ENVMAP_BLENDING_MIX';
  181. break;
  182. case THREE.AddOperation:
  183. envMapBlendingDefine = 'ENVMAP_BLENDING_ADD';
  184. break;
  185. }
  186. }
  187. var gammaFactorDefine = ( renderer.gammaFactor > 0 ) ? renderer.gammaFactor : 1.0;
  188. // console.log( 'building new program ' );
  189. //
  190. var customExtensions = generateExtensions( extensions, parameters, renderer.extensions );
  191. var customDefines = generateDefines( defines );
  192. //
  193. var program = gl.createProgram();
  194. var prefixVertex, prefixFragment;
  195. if ( material instanceof THREE.RawShaderMaterial ) {
  196. prefixVertex = '';
  197. prefixFragment = '';
  198. } else {
  199. prefixVertex = [
  200. 'precision ' + parameters.precision + ' float;',
  201. 'precision ' + parameters.precision + ' int;',
  202. '#define SHADER_NAME ' + material.__webglShader.name,
  203. customDefines,
  204. parameters.supportsVertexTextures ? '#define VERTEX_TEXTURES' : '',
  205. renderer.gammaInput ? '#define GAMMA_INPUT' : '',
  206. renderer.gammaOutput ? '#define GAMMA_OUTPUT' : '',
  207. '#define GAMMA_FACTOR ' + gammaFactorDefine,
  208. '#define MAX_BONES ' + parameters.maxBones,
  209. parameters.map ? '#define USE_MAP' : '',
  210. parameters.envMap ? '#define USE_ENVMAP' : '',
  211. parameters.envMap ? '#define ' + envMapModeDefine : '',
  212. parameters.lightMap ? '#define USE_LIGHTMAP' : '',
  213. parameters.aoMap ? '#define USE_AOMAP' : '',
  214. parameters.emissiveMap ? '#define USE_EMISSIVEMAP' : '',
  215. parameters.bumpMap ? '#define USE_BUMPMAP' : '',
  216. parameters.normalMap ? '#define USE_NORMALMAP' : '',
  217. parameters.displacementMap && parameters.supportsVertexTextures ? '#define USE_DISPLACEMENTMAP' : '',
  218. parameters.specularMap ? '#define USE_SPECULARMAP' : '',
  219. parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
  220. parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
  221. parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
  222. parameters.vertexColors ? '#define USE_COLOR' : '',
  223. parameters.flatShading ? '#define FLAT_SHADED' : '',
  224. parameters.skinning ? '#define USE_SKINNING' : '',
  225. parameters.useVertexTexture ? '#define BONE_TEXTURE' : '',
  226. parameters.morphTargets ? '#define USE_MORPHTARGETS' : '',
  227. parameters.morphNormals && parameters.flatShading === false ? '#define USE_MORPHNORMALS' : '',
  228. parameters.doubleSided ? '#define DOUBLE_SIDED' : '',
  229. parameters.flipSided ? '#define FLIP_SIDED' : '',
  230. parameters.shadowMapEnabled ? '#define USE_SHADOWMAP' : '',
  231. parameters.shadowMapEnabled ? '#define ' + shadowMapTypeDefine : '',
  232. parameters.pointLightShadows > 0 ? '#define POINT_LIGHT_SHADOWS' : '',
  233. parameters.sizeAttenuation ? '#define USE_SIZEATTENUATION' : '',
  234. parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
  235. parameters.logarithmicDepthBuffer && renderer.extensions.get( 'EXT_frag_depth' ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
  236. 'uniform mat4 modelMatrix;',
  237. 'uniform mat4 modelViewMatrix;',
  238. 'uniform mat4 projectionMatrix;',
  239. 'uniform mat4 viewMatrix;',
  240. 'uniform mat3 normalMatrix;',
  241. 'uniform vec3 cameraPosition;',
  242. 'attribute vec3 position;',
  243. 'attribute vec3 normal;',
  244. 'attribute vec2 uv;',
  245. '#ifdef USE_COLOR',
  246. ' attribute vec3 color;',
  247. '#endif',
  248. '#ifdef USE_MORPHTARGETS',
  249. ' attribute vec3 morphTarget0;',
  250. ' attribute vec3 morphTarget1;',
  251. ' attribute vec3 morphTarget2;',
  252. ' attribute vec3 morphTarget3;',
  253. ' #ifdef USE_MORPHNORMALS',
  254. ' attribute vec3 morphNormal0;',
  255. ' attribute vec3 morphNormal1;',
  256. ' attribute vec3 morphNormal2;',
  257. ' attribute vec3 morphNormal3;',
  258. ' #else',
  259. ' attribute vec3 morphTarget4;',
  260. ' attribute vec3 morphTarget5;',
  261. ' attribute vec3 morphTarget6;',
  262. ' attribute vec3 morphTarget7;',
  263. ' #endif',
  264. '#endif',
  265. '#ifdef USE_SKINNING',
  266. ' attribute vec4 skinIndex;',
  267. ' attribute vec4 skinWeight;',
  268. '#endif',
  269. '\n'
  270. ].filter( filterEmptyLine ).join( '\n' );
  271. prefixFragment = [
  272. customExtensions,
  273. 'precision ' + parameters.precision + ' float;',
  274. 'precision ' + parameters.precision + ' int;',
  275. '#define SHADER_NAME ' + material.__webglShader.name,
  276. customDefines,
  277. parameters.alphaTest ? '#define ALPHATEST ' + parameters.alphaTest : '',
  278. renderer.gammaInput ? '#define GAMMA_INPUT' : '',
  279. renderer.gammaOutput ? '#define GAMMA_OUTPUT' : '',
  280. '#define GAMMA_FACTOR ' + gammaFactorDefine,
  281. ( parameters.useFog && parameters.fog ) ? '#define USE_FOG' : '',
  282. ( parameters.useFog && parameters.fogExp ) ? '#define FOG_EXP2' : '',
  283. parameters.map ? '#define USE_MAP' : '',
  284. parameters.mapEncoding ? getTexelDecodingFunction( "mapTexelToLinear", material.map.encoding ) : '',
  285. parameters.envMap ? '#define USE_ENVMAP' : '',
  286. parameters.envMap ? '#define ' + envMapTypeDefine : '',
  287. parameters.envMap ? '#define ' + envMapModeDefine : '',
  288. parameters.envMap ? '#define ' + envMapBlendingDefine : '',
  289. parameters.lightMap ? '#define USE_LIGHTMAP' : '',
  290. parameters.envMapEncoding ? getTexelDecodingFunction( "envMapTexelToLinear", material.envMap.encoding ) : '',
  291. parameters.aoMap ? '#define USE_AOMAP' : '',
  292. parameters.emissiveMap ? '#define USE_EMISSIVEMAP' : '',
  293. parameters.emissiveMapEncoding ? getTexelDecodingFunction( "emissiveMapTexelToLinear", material.emissiveMap.encoding ) : '',
  294. parameters.bumpMap ? '#define USE_BUMPMAP' : '',
  295. parameters.normalMap ? '#define USE_NORMALMAP' : '',
  296. parameters.specularMap ? '#define USE_SPECULARMAP' : '',
  297. parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
  298. parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
  299. parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
  300. parameters.vertexColors ? '#define USE_COLOR' : '',
  301. parameters.flatShading ? '#define FLAT_SHADED' : '',
  302. parameters.doubleSided ? '#define DOUBLE_SIDED' : '',
  303. parameters.flipSided ? '#define FLIP_SIDED' : '',
  304. parameters.shadowMapEnabled ? '#define USE_SHADOWMAP' : '',
  305. parameters.shadowMapEnabled ? '#define ' + shadowMapTypeDefine : '',
  306. parameters.pointLightShadows > 0 ? '#define POINT_LIGHT_SHADOWS' : '',
  307. parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
  308. parameters.logarithmicDepthBuffer && renderer.extensions.get( 'EXT_frag_depth' ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
  309. parameters.envMap && renderer.extensions.get( 'EXT_shader_texture_lod' ) ? '#define TEXTURE_LOD_EXT' : '',
  310. 'uniform mat4 viewMatrix;',
  311. 'uniform vec3 cameraPosition;',
  312. '\n'
  313. ].filter( filterEmptyLine ).join( '\n' );
  314. }
  315. vertexShader = parseIncludes( vertexShader, parameters );
  316. vertexShader = replaceLightNums( vertexShader, parameters );
  317. fragmentShader = parseIncludes( fragmentShader, parameters );
  318. fragmentShader = replaceLightNums( fragmentShader, parameters );
  319. if ( material instanceof THREE.ShaderMaterial === false ) {
  320. vertexShader = unrollLoops( vertexShader );
  321. fragmentShader = unrollLoops( fragmentShader );
  322. }
  323. var vertexGlsl = prefixVertex + vertexShader;
  324. var fragmentGlsl = prefixFragment + fragmentShader;
  325. // console.log( '*VERTEX*', vertexGlsl );
  326. // console.log( '*FRAGMENT*', fragmentGlsl );
  327. var glVertexShader = THREE.WebGLShader( gl, gl.VERTEX_SHADER, vertexGlsl );
  328. var glFragmentShader = THREE.WebGLShader( gl, gl.FRAGMENT_SHADER, fragmentGlsl );
  329. gl.attachShader( program, glVertexShader );
  330. gl.attachShader( program, glFragmentShader );
  331. // Force a particular attribute to index 0.
  332. if ( material.index0AttributeName !== undefined ) {
  333. gl.bindAttribLocation( program, 0, material.index0AttributeName );
  334. } else if ( parameters.morphTargets === true ) {
  335. // programs with morphTargets displace position out of attribute 0
  336. gl.bindAttribLocation( program, 0, 'position' );
  337. }
  338. gl.linkProgram( program );
  339. var programLog = gl.getProgramInfoLog( program );
  340. var vertexLog = gl.getShaderInfoLog( glVertexShader );
  341. var fragmentLog = gl.getShaderInfoLog( glFragmentShader );
  342. var runnable = true;
  343. var haveDiagnostics = true;
  344. // console.log( '**VERTEX**', gl.getExtension( 'WEBGL_debug_shaders' ).getTranslatedShaderSource( glVertexShader ) );
  345. // console.log( '**FRAGMENT**', gl.getExtension( 'WEBGL_debug_shaders' ).getTranslatedShaderSource( glFragmentShader ) );
  346. if ( gl.getProgramParameter( program, gl.LINK_STATUS ) === false ) {
  347. runnable = false;
  348. console.error( 'THREE.WebGLProgram: shader error: ', gl.getError(), 'gl.VALIDATE_STATUS', gl.getProgramParameter( program, gl.VALIDATE_STATUS ), 'gl.getProgramInfoLog', programLog, vertexLog, fragmentLog );
  349. } else if ( programLog !== '' ) {
  350. console.warn( 'THREE.WebGLProgram: gl.getProgramInfoLog()', programLog );
  351. } else if ( vertexLog === '' || fragmentLog === '' ) {
  352. haveDiagnostics = false;
  353. }
  354. if ( haveDiagnostics ) {
  355. this.diagnostics = {
  356. runnable: runnable,
  357. material: material,
  358. programLog: programLog,
  359. vertexShader: {
  360. log: vertexLog,
  361. prefix: prefixVertex
  362. },
  363. fragmentShader: {
  364. log: fragmentLog,
  365. prefix: prefixFragment
  366. }
  367. };
  368. }
  369. // clean up
  370. gl.deleteShader( glVertexShader );
  371. gl.deleteShader( glFragmentShader );
  372. // set up caching for uniform locations
  373. var cachedUniforms;
  374. this.getUniforms = function() {
  375. if ( cachedUniforms === undefined ) {
  376. cachedUniforms = fetchUniformLocations( gl, program );
  377. }
  378. return cachedUniforms;
  379. };
  380. // set up caching for attribute locations
  381. var cachedAttributes;
  382. this.getAttributes = function() {
  383. if ( cachedAttributes === undefined ) {
  384. cachedAttributes = fetchAttributeLocations( gl, program );
  385. }
  386. return cachedAttributes;
  387. };
  388. // free resource
  389. this.destroy = function() {
  390. gl.deleteProgram( program );
  391. this.program = undefined;
  392. };
  393. // DEPRECATED
  394. Object.defineProperties( this, {
  395. uniforms: {
  396. get: function() {
  397. console.warn( 'THREE.WebGLProgram: .uniforms is now .getUniforms().' );
  398. return this.getUniforms();
  399. }
  400. },
  401. attributes: {
  402. get: function() {
  403. console.warn( 'THREE.WebGLProgram: .attributes is now .getAttributes().' );
  404. return this.getAttributes();
  405. }
  406. }
  407. } );
  408. //
  409. this.id = programIdCount ++;
  410. this.code = code;
  411. this.usedTimes = 1;
  412. this.program = program;
  413. this.vertexShader = glVertexShader;
  414. this.fragmentShader = glFragmentShader;
  415. return this;
  416. };
  417. } )();
粤ICP备19079148号