WebGLProgram.js 15 KB

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