WebGLProgram.js 14 KB

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