WebGLProgram.js 17 KB

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