WebGLProgram.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  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 generateDefines( defines ) {
  8. var chunks = [];
  9. for ( var name in defines ) {
  10. var value = defines[ name ];
  11. if ( value === false ) continue;
  12. chunks.push( '#define ' + name + ' ' + value );
  13. }
  14. return chunks.join( '\n' );
  15. }
  16. function fetchUniformLocations( gl, program, identifiers ) {
  17. var uniforms = {};
  18. var n = gl.getProgramParameter( program, gl.ACTIVE_UNIFORMS );
  19. for ( var i = 0; i < n; i ++ ) {
  20. var info = gl.getActiveUniform( program, i );
  21. var name = info.name;
  22. var location = gl.getUniformLocation( program, name );
  23. //console.log("THREE.WebGLProgram: ACTIVE UNIFORM:", name);
  24. var matches = structRe.exec(name);
  25. if( matches ) {
  26. var structName = matches[1];
  27. var structProperty = matches[2];
  28. var uniformsStruct = uniforms[ structName ];
  29. if( ! uniformsStruct ) {
  30. uniformsStruct = uniforms[ structName ] = {};
  31. }
  32. uniformsStruct[ structProperty ] = location;
  33. continue;
  34. }
  35. matches = arrayStructRe.exec(name);
  36. if( matches ) {
  37. var arrayName = matches[1];
  38. var arrayIndex = matches[2];
  39. var arrayProperty = matches[3];
  40. var uniformsArray = uniforms[ arrayName ];
  41. if( ! uniformsArray ) {
  42. uniformsArray = uniforms[ arrayName ] = [];
  43. }
  44. var uniformsArrayIndex = uniformsArray[ arrayIndex ];
  45. if( ! uniformsArrayIndex ) {
  46. uniformsArrayIndex = uniformsArray[ arrayIndex ] = {};
  47. }
  48. uniformsArrayIndex[ arrayProperty ] = location;
  49. continue;
  50. }
  51. matches = arrayRe.exec(name)
  52. if( matches ) {
  53. var arrayName = matches[1];
  54. uniforms[ arrayName ] = location;
  55. continue;
  56. }
  57. uniforms[ name ] = location;
  58. }
  59. return uniforms;
  60. }
  61. function fetchAttributeLocations( gl, program, identifiers ) {
  62. var attributes = {};
  63. var n = gl.getProgramParameter( program, gl.ACTIVE_ATTRIBUTES );
  64. for ( var i = 0; i < n; i ++ ) {
  65. var info = gl.getActiveAttrib( program, i );
  66. var name = info.name;
  67. // console.log("THREE.WebGLProgram: ACTIVE VERTEX ATTRIBUTE:", name, i );
  68. attributes[ name ] = gl.getAttribLocation( program, name );
  69. }
  70. return attributes;
  71. }
  72. function filterEmptyLine( string ) {
  73. return string !== '';
  74. }
  75. return function WebGLProgram( renderer, code, material, parameters ) {
  76. var gl = renderer.context;
  77. var defines = material.defines;
  78. var vertexShader = material.__webglShader.vertexShader;
  79. var fragmentShader = material.__webglShader.fragmentShader;
  80. var shadowMapTypeDefine = 'SHADOWMAP_TYPE_BASIC';
  81. if ( parameters.shadowMapType === THREE.PCFShadowMap ) {
  82. shadowMapTypeDefine = 'SHADOWMAP_TYPE_PCF';
  83. } else if ( parameters.shadowMapType === THREE.PCFSoftShadowMap ) {
  84. shadowMapTypeDefine = 'SHADOWMAP_TYPE_PCF_SOFT';
  85. }
  86. var envMapTypeDefine = 'ENVMAP_TYPE_CUBE';
  87. var envMapModeDefine = 'ENVMAP_MODE_REFLECTION';
  88. var envMapBlendingDefine = 'ENVMAP_BLENDING_MULTIPLY';
  89. if ( parameters.envMap ) {
  90. switch ( material.envMap.mapping ) {
  91. case THREE.CubeReflectionMapping:
  92. case THREE.CubeRefractionMapping:
  93. envMapTypeDefine = 'ENVMAP_TYPE_CUBE';
  94. break;
  95. case THREE.EquirectangularReflectionMapping:
  96. case THREE.EquirectangularRefractionMapping:
  97. envMapTypeDefine = 'ENVMAP_TYPE_EQUIREC';
  98. break;
  99. case THREE.SphericalReflectionMapping:
  100. envMapTypeDefine = 'ENVMAP_TYPE_SPHERE';
  101. break;
  102. }
  103. switch ( material.envMap.mapping ) {
  104. case THREE.CubeRefractionMapping:
  105. case THREE.EquirectangularRefractionMapping:
  106. envMapModeDefine = 'ENVMAP_MODE_REFRACTION';
  107. break;
  108. }
  109. switch ( material.combine ) {
  110. case THREE.MultiplyOperation:
  111. envMapBlendingDefine = 'ENVMAP_BLENDING_MULTIPLY';
  112. break;
  113. case THREE.MixOperation:
  114. envMapBlendingDefine = 'ENVMAP_BLENDING_MIX';
  115. break;
  116. case THREE.AddOperation:
  117. envMapBlendingDefine = 'ENVMAP_BLENDING_ADD';
  118. break;
  119. }
  120. }
  121. var gammaFactorDefine = ( renderer.gammaFactor > 0 ) ? renderer.gammaFactor : 1.0;
  122. // console.log( 'building new program ' );
  123. //
  124. var customDefines = generateDefines( defines );
  125. //
  126. var program = gl.createProgram();
  127. var prefixVertex, prefixFragment;
  128. if ( material instanceof THREE.RawShaderMaterial ) {
  129. prefixVertex = '';
  130. prefixFragment = '';
  131. } else {
  132. prefixVertex = [
  133. 'precision ' + parameters.precision + ' float;',
  134. 'precision ' + parameters.precision + ' int;',
  135. '#define SHADER_NAME ' + material.__webglShader.name,
  136. customDefines,
  137. parameters.supportsVertexTextures ? '#define VERTEX_TEXTURES' : '',
  138. renderer.gammaInput ? '#define GAMMA_INPUT' : '',
  139. renderer.gammaOutput ? '#define GAMMA_OUTPUT' : '',
  140. '#define GAMMA_FACTOR ' + gammaFactorDefine,
  141. '#define MAX_DIR_LIGHTS ' + parameters.maxDirLights,
  142. '#define MAX_POINT_LIGHTS ' + parameters.maxPointLights,
  143. '#define MAX_SPOT_LIGHTS ' + parameters.maxSpotLights,
  144. '#define MAX_HEMI_LIGHTS ' + parameters.maxHemiLights,
  145. '#define MAX_SHADOWS ' + parameters.maxShadows,
  146. '#define MAX_BONES ' + parameters.maxBones,
  147. parameters.map ? '#define USE_MAP' : '',
  148. parameters.envMap ? '#define USE_ENVMAP' : '',
  149. parameters.envMap ? '#define ' + envMapModeDefine : '',
  150. parameters.lightMap ? '#define USE_LIGHTMAP' : '',
  151. parameters.aoMap ? '#define USE_AOMAP' : '',
  152. parameters.emissiveMap ? '#define USE_EMISSIVEMAP' : '',
  153. parameters.bumpMap ? '#define USE_BUMPMAP' : '',
  154. parameters.normalMap ? '#define USE_NORMALMAP' : '',
  155. parameters.displacementMap && parameters.supportsVertexTextures ? '#define USE_DISPLACEMENTMAP' : '',
  156. parameters.specularMap ? '#define USE_SPECULARMAP' : '',
  157. parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
  158. parameters.reflectivityMap ? '#define USE_REFLECTIVITYMAP' : '',
  159. parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
  160. parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
  161. parameters.vertexColors ? '#define USE_COLOR' : '',
  162. parameters.flatShading ? '#define FLAT_SHADED' : '',
  163. parameters.skinning ? '#define USE_SKINNING' : '',
  164. parameters.useVertexTexture ? '#define BONE_TEXTURE' : '',
  165. parameters.morphTargets ? '#define USE_MORPHTARGETS' : '',
  166. parameters.morphNormals && parameters.flatShading === false ? '#define USE_MORPHNORMALS' : '',
  167. parameters.doubleSided ? '#define DOUBLE_SIDED' : '',
  168. parameters.flipSided ? '#define FLIP_SIDED' : '',
  169. parameters.shadowMapEnabled ? '#define USE_SHADOWMAP' : '',
  170. parameters.shadowMapEnabled ? '#define ' + shadowMapTypeDefine : '',
  171. parameters.shadowMapDebug ? '#define SHADOWMAP_DEBUG' : '',
  172. parameters.pointLightShadows > 0 ? '#define POINT_LIGHT_SHADOWS' : '',
  173. parameters.sizeAttenuation ? '#define USE_SIZEATTENUATION' : '',
  174. parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
  175. parameters.logarithmicDepthBuffer && renderer.extensions.get( 'EXT_frag_depth' ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
  176. 'uniform mat4 modelMatrix;',
  177. 'uniform mat4 modelViewMatrix;',
  178. 'uniform mat4 projectionMatrix;',
  179. 'uniform mat4 viewMatrix;',
  180. 'uniform mat3 normalMatrix;',
  181. 'uniform vec3 cameraPosition;',
  182. 'attribute vec3 position;',
  183. 'attribute vec3 normal;',
  184. 'attribute vec2 uv;',
  185. '#ifdef USE_COLOR',
  186. ' attribute vec3 color;',
  187. '#endif',
  188. '#ifdef USE_MORPHTARGETS',
  189. ' attribute vec3 morphTarget0;',
  190. ' attribute vec3 morphTarget1;',
  191. ' attribute vec3 morphTarget2;',
  192. ' attribute vec3 morphTarget3;',
  193. ' #ifdef USE_MORPHNORMALS',
  194. ' attribute vec3 morphNormal0;',
  195. ' attribute vec3 morphNormal1;',
  196. ' attribute vec3 morphNormal2;',
  197. ' attribute vec3 morphNormal3;',
  198. ' #else',
  199. ' attribute vec3 morphTarget4;',
  200. ' attribute vec3 morphTarget5;',
  201. ' attribute vec3 morphTarget6;',
  202. ' attribute vec3 morphTarget7;',
  203. ' #endif',
  204. '#endif',
  205. '#ifdef USE_SKINNING',
  206. ' attribute vec4 skinIndex;',
  207. ' attribute vec4 skinWeight;',
  208. '#endif',
  209. '\n'
  210. ].filter( filterEmptyLine ).join( '\n' );
  211. prefixFragment = [
  212. parameters.bumpMap || parameters.normalMap || parameters.flatShading || material.derivatives ? '#extension GL_OES_standard_derivatives : enable' : '',
  213. parameters.logarithmicDepthBuffer && renderer.extensions.get( 'EXT_frag_depth' ) ? '#extension GL_EXT_frag_depth : enable' : '',
  214. parameters.envMap && renderer.extensions.get( 'EXT_shader_texture_lod' ) ? '#extension GL_EXT_shader_texture_lod : enable' : '',
  215. 'precision ' + parameters.precision + ' float;',
  216. 'precision ' + parameters.precision + ' int;',
  217. '#define SHADER_NAME ' + material.__webglShader.name,
  218. customDefines,
  219. '#define MAX_DIR_LIGHTS ' + parameters.maxDirLights,
  220. '#define MAX_POINT_LIGHTS ' + parameters.maxPointLights,
  221. '#define MAX_SPOT_LIGHTS ' + parameters.maxSpotLights,
  222. '#define MAX_HEMI_LIGHTS ' + parameters.maxHemiLights,
  223. '#define MAX_SHADOWS ' + parameters.maxShadows,
  224. parameters.alphaTest ? '#define ALPHATEST ' + parameters.alphaTest : '',
  225. renderer.gammaInput ? '#define GAMMA_INPUT' : '',
  226. renderer.gammaOutput ? '#define GAMMA_OUTPUT' : '',
  227. '#define GAMMA_FACTOR ' + gammaFactorDefine,
  228. ( parameters.useFog && parameters.fog ) ? '#define USE_FOG' : '',
  229. ( parameters.useFog && parameters.fogExp ) ? '#define FOG_EXP2' : '',
  230. parameters.map ? '#define USE_MAP' : '',
  231. parameters.envMap ? '#define USE_ENVMAP' : '',
  232. parameters.envMap ? '#define ' + envMapTypeDefine : '',
  233. parameters.envMap ? '#define ' + envMapModeDefine : '',
  234. parameters.envMap ? '#define ' + envMapBlendingDefine : '',
  235. parameters.lightMap ? '#define USE_LIGHTMAP' : '',
  236. parameters.aoMap ? '#define USE_AOMAP' : '',
  237. parameters.emissiveMap ? '#define USE_EMISSIVEMAP' : '',
  238. parameters.bumpMap ? '#define USE_BUMPMAP' : '',
  239. parameters.normalMap ? '#define USE_NORMALMAP' : '',
  240. parameters.specularMap ? '#define USE_SPECULARMAP' : '',
  241. parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
  242. parameters.reflectivityMap ? '#define USE_REFLECTIVITYMAP' : '',
  243. parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
  244. parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
  245. parameters.vertexColors ? '#define USE_COLOR' : '',
  246. parameters.flatShading ? '#define FLAT_SHADED' : '',
  247. parameters.metal ? '#define METAL' : '',
  248. parameters.doubleSided ? '#define DOUBLE_SIDED' : '',
  249. parameters.flipSided ? '#define FLIP_SIDED' : '',
  250. parameters.shadowMapEnabled ? '#define USE_SHADOWMAP' : '',
  251. parameters.shadowMapEnabled ? '#define ' + shadowMapTypeDefine : '',
  252. parameters.shadowMapDebug ? '#define SHADOWMAP_DEBUG' : '',
  253. parameters.pointLightShadows > 0 ? '#define POINT_LIGHT_SHADOWS' : '',
  254. parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
  255. parameters.logarithmicDepthBuffer && renderer.extensions.get( 'EXT_frag_depth' ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
  256. parameters.envMap && renderer.extensions.get( 'EXT_shader_texture_lod' ) ? '#define TEXTURE_CUBE_LOD_EXT' : '',
  257. 'uniform mat4 viewMatrix;',
  258. 'uniform vec3 cameraPosition;',
  259. '\n'
  260. ].filter( filterEmptyLine ).join( '\n' );
  261. }
  262. var vertexGlsl = prefixVertex + vertexShader;
  263. var fragmentGlsl = prefixFragment + fragmentShader;
  264. var glVertexShader = THREE.WebGLShader( gl, gl.VERTEX_SHADER, vertexGlsl );
  265. var glFragmentShader = THREE.WebGLShader( gl, gl.FRAGMENT_SHADER, fragmentGlsl );
  266. gl.attachShader( program, glVertexShader );
  267. gl.attachShader( program, glFragmentShader );
  268. // Force a particular attribute to index 0.
  269. if ( material.index0AttributeName !== undefined ) {
  270. gl.bindAttribLocation( program, 0, material.index0AttributeName );
  271. } else if ( parameters.morphTargets === true ) {
  272. // programs with morphTargets displace position out of attribute 0
  273. gl.bindAttribLocation( program, 0, 'position' );
  274. }
  275. gl.linkProgram( program );
  276. var programLog = gl.getProgramInfoLog( program );
  277. var vertexLog = gl.getShaderInfoLog( glVertexShader );
  278. var fragmentLog = gl.getShaderInfoLog( glFragmentShader );
  279. var runnable = true;
  280. var haveDiagnostics = true;
  281. if ( gl.getProgramParameter( program, gl.LINK_STATUS ) === false ) {
  282. runnable = false;
  283. console.error( 'THREE.WebGLProgram: shader error: ', gl.getError(), 'gl.VALIDATE_STATUS', gl.getProgramParameter( program, gl.VALIDATE_STATUS ), 'gl.getProgramInfoLog', programLog, vertexLog, fragmentLog );
  284. } else if ( programLog !== '' ) {
  285. console.warn( 'THREE.WebGLProgram: gl.getProgramInfoLog()', programLog );
  286. } else if ( vertexLog === '' || fragmentLog === '' ) {
  287. haveDiagnostics = false;
  288. }
  289. if ( haveDiagnostics ) {
  290. this.diagnostics = {
  291. runnable: runnable,
  292. material: material,
  293. programLog: programLog,
  294. vertexShader: {
  295. log: vertexLog,
  296. prefix: prefixVertex
  297. },
  298. fragmentShader: {
  299. log: fragmentLog,
  300. prefix: prefixFragment
  301. }
  302. };
  303. }
  304. // clean up
  305. gl.deleteShader( glVertexShader );
  306. gl.deleteShader( glFragmentShader );
  307. // set up caching for uniform locations
  308. var cachedUniforms;
  309. this.getUniforms = function() {
  310. if ( cachedUniforms === undefined ) {
  311. cachedUniforms = fetchUniformLocations( gl, program );
  312. }
  313. return cachedUniforms;
  314. };
  315. // set up caching for attribute locations
  316. var cachedAttributes;
  317. this.getAttributes = function() {
  318. if ( cachedAttributes === undefined ) {
  319. cachedAttributes = fetchAttributeLocations( gl, program );
  320. }
  321. return cachedAttributes;
  322. };
  323. // free resource
  324. this.destroy = function() {
  325. gl.deleteProgram( program );
  326. this.program = undefined;
  327. };
  328. // DEPRECATED
  329. Object.defineProperties( this, {
  330. uniforms: {
  331. get: function() {
  332. console.warn( 'THREE.WebGLProgram: .uniforms is now .getUniforms().' );
  333. return this.getUniforms();
  334. }
  335. },
  336. attributes: {
  337. get: function() {
  338. console.warn( 'THREE.WebGLProgram: .attributes is now .getAttributes().' );
  339. return this.getAttributes();
  340. }
  341. }
  342. } );
  343. //
  344. this.id = programIdCount ++;
  345. this.code = code;
  346. this.usedTimes = 1;
  347. this.program = program;
  348. this.vertexShader = glVertexShader;
  349. this.fragmentShader = glFragmentShader;
  350. return this;
  351. };
  352. } )();