babylon.effect.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  1. module BABYLON {
  2. export class EffectFallbacks {
  3. private _defines = {};
  4. private _currentRank = 32;
  5. private _maxRank = -1;
  6. public addFallback(rank: number, define: string): void {
  7. if (!this._defines[rank]) {
  8. if (rank < this._currentRank) {
  9. this._currentRank = rank;
  10. }
  11. if (rank > this._maxRank) {
  12. this._maxRank = rank;
  13. }
  14. this._defines[rank] = new Array<String>();
  15. }
  16. this._defines[rank].push(define);
  17. }
  18. public get isMoreFallbacks(): boolean {
  19. return this._currentRank <= this._maxRank;
  20. }
  21. public reduce(currentDefines: string): string {
  22. var currentFallbacks = this._defines[this._currentRank];
  23. for (var index = 0; index < currentFallbacks.length; index++) {
  24. currentDefines = currentDefines.replace("#define " + currentFallbacks[index], "");
  25. }
  26. this._currentRank++;
  27. return currentDefines;
  28. }
  29. }
  30. export class Effect {
  31. public name: any;
  32. public defines: string;
  33. public onCompiled: (effect: Effect) => void;
  34. public onError: (effect: Effect, errors: string) => void;
  35. public onBind: (effect: Effect) => void;
  36. private _engine: Engine;
  37. private _uniformsNames: string[];
  38. private _samplers: string[];
  39. private _isReady = false;
  40. private _compilationError = "";
  41. private _attributesNames: string[];
  42. private _attributes: number[];
  43. private _uniforms: WebGLUniformLocation[];
  44. public _key: string;
  45. private _program: WebGLProgram;
  46. private _valueCache = [];
  47. constructor(baseName: any, attributesNames: string[], uniformsNames: string[], samplers: string[], engine, defines?: string, fallbacks?: EffectFallbacks, onCompiled?: (effect: Effect) => void, onError?: (effect: Effect, errors: string) => void) {
  48. this._engine = engine;
  49. this.name = baseName;
  50. this.defines = defines;
  51. this._uniformsNames = uniformsNames.concat(samplers);
  52. this._samplers = samplers;
  53. this._attributesNames = attributesNames;
  54. this.onError = onError;
  55. this.onCompiled = onCompiled;
  56. var vertexSource;
  57. var fragmentSource;
  58. if (baseName.vertexElement) {
  59. vertexSource = document.getElementById(baseName.vertexElement);
  60. if (!vertexSource) {
  61. vertexSource = baseName.vertexElement;
  62. }
  63. } else {
  64. vertexSource = baseName.vertex || baseName;
  65. }
  66. if (baseName.fragmentElement) {
  67. fragmentSource = document.getElementById(baseName.fragmentElement);
  68. if (!fragmentSource) {
  69. fragmentSource = baseName.fragmentElement;
  70. }
  71. } else {
  72. fragmentSource = baseName.fragment || baseName;
  73. }
  74. this._loadVertexShader(vertexSource, vertexCode => {
  75. this._loadFragmentShader(fragmentSource, (fragmentCode) => {
  76. this._prepareEffect(vertexCode, fragmentCode, attributesNames, defines, fallbacks);
  77. });
  78. });
  79. }
  80. // Properties
  81. public isReady(): boolean {
  82. return this._isReady;
  83. }
  84. public getProgram(): WebGLProgram {
  85. return this._program;
  86. }
  87. public getAttributesNames(): string[] {
  88. return this._attributesNames;
  89. }
  90. public getAttributeLocation(index: number): number {
  91. return this._attributes[index];
  92. }
  93. public getAttributeLocationByName(name: string): number {
  94. var index = this._attributesNames.indexOf(name);
  95. return this._attributes[index];
  96. }
  97. public getAttributesCount(): number {
  98. return this._attributes.length;
  99. }
  100. public getUniformIndex(uniformName: string): number {
  101. return this._uniformsNames.indexOf(uniformName);
  102. }
  103. public getUniform(uniformName: string): WebGLUniformLocation {
  104. return this._uniforms[this._uniformsNames.indexOf(uniformName)];
  105. }
  106. public getSamplers(): string[] {
  107. return this._samplers;
  108. }
  109. public getCompilationError(): string {
  110. return this._compilationError;
  111. }
  112. // Methods
  113. public _loadVertexShader(vertex: any, callback: (data: any) => void): void {
  114. // DOM element ?
  115. if (vertex instanceof HTMLElement) {
  116. var vertexCode = Tools.GetDOMTextContent(vertex);
  117. callback(vertexCode);
  118. return;
  119. }
  120. // Is in local store ?
  121. if (Effect.ShadersStore[vertex + "VertexShader"]) {
  122. callback(Effect.ShadersStore[vertex + "VertexShader"]);
  123. return;
  124. }
  125. var vertexShaderUrl;
  126. if (vertex[0] === ".") {
  127. vertexShaderUrl = vertex;
  128. } else {
  129. vertexShaderUrl = Engine.ShadersRepository + vertex;
  130. }
  131. // Vertex shader
  132. Tools.LoadFile(vertexShaderUrl + ".vertex.fx", callback);
  133. }
  134. public _loadFragmentShader(fragment: any, callback: (data: any) => void): void {
  135. // DOM element ?
  136. if (fragment instanceof HTMLElement) {
  137. var fragmentCode = Tools.GetDOMTextContent(fragment);
  138. callback(fragmentCode);
  139. return;
  140. }
  141. // Is in local store ?
  142. if (Effect.ShadersStore[fragment + "PixelShader"]) {
  143. callback(Effect.ShadersStore[fragment + "PixelShader"]);
  144. return;
  145. }
  146. if (Effect.ShadersStore[fragment + "FragmentShader"]) {
  147. callback(Effect.ShadersStore[fragment + "FragmentShader"]);
  148. return;
  149. }
  150. var fragmentShaderUrl;
  151. if (fragment[0] === ".") {
  152. fragmentShaderUrl = fragment;
  153. } else {
  154. fragmentShaderUrl = Engine.ShadersRepository + fragment;
  155. }
  156. // Fragment shader
  157. Tools.LoadFile(fragmentShaderUrl + ".fragment.fx", callback);
  158. }
  159. private _prepareEffect(vertexSourceCode: string, fragmentSourceCode: string, attributesNames: string[], defines: string, fallbacks?: EffectFallbacks): void {
  160. try {
  161. var engine = this._engine;
  162. this._program = engine.createShaderProgram(vertexSourceCode, fragmentSourceCode, defines);
  163. this._uniforms = engine.getUniforms(this._program, this._uniformsNames);
  164. this._attributes = engine.getAttributes(this._program, attributesNames);
  165. for (var index = 0; index < this._samplers.length; index++) {
  166. var sampler = this.getUniform(this._samplers[index]);
  167. if (sampler == null) {
  168. this._samplers.splice(index, 1);
  169. index--;
  170. }
  171. }
  172. engine.bindSamplers(this);
  173. this._isReady = true;
  174. if (this.onCompiled) {
  175. this.onCompiled(this);
  176. }
  177. } catch (e) {
  178. // Is it a problem with precision?
  179. if (e.message.indexOf("highp") !== -1) {
  180. vertexSourceCode = vertexSourceCode.replace("precision highp float", "precision mediump float");
  181. fragmentSourceCode = fragmentSourceCode.replace("precision highp float", "precision mediump float");
  182. this._prepareEffect(vertexSourceCode, fragmentSourceCode, attributesNames, defines, fallbacks);
  183. return;
  184. }
  185. // Let's go through fallbacks then
  186. if (fallbacks && fallbacks.isMoreFallbacks) {
  187. defines = fallbacks.reduce(defines);
  188. this._prepareEffect(vertexSourceCode, fragmentSourceCode, attributesNames, defines, fallbacks);
  189. } else { // Sorry we did everything we can
  190. Tools.Error("Unable to compile effect: " + this.name);
  191. Tools.Error("Defines: " + defines);
  192. Tools.Error("Error: " + e.message);
  193. this._compilationError = e.message;
  194. if (this.onError) {
  195. this.onError(this, this._compilationError);
  196. }
  197. }
  198. }
  199. }
  200. public _bindTexture(channel: string, texture: WebGLTexture): void {
  201. this._engine._bindTexture(this._samplers.indexOf(channel), texture);
  202. }
  203. public setTexture(channel: string, texture: BaseTexture): void {
  204. this._engine.setTexture(this._samplers.indexOf(channel), texture);
  205. }
  206. public setTextureFromPostProcess(channel: string, postProcess: PostProcess): void {
  207. this._engine.setTextureFromPostProcess(this._samplers.indexOf(channel), postProcess);
  208. }
  209. //public _cacheMatrix(uniformName, matrix) {
  210. // if (!this._valueCache[uniformName]) {
  211. // this._valueCache[uniformName] = new BABYLON.Matrix();
  212. // }
  213. // for (var index = 0; index < 16; index++) {
  214. // this._valueCache[uniformName].m[index] = matrix.m[index];
  215. // }
  216. //};
  217. public _cacheFloat2(uniformName: string, x: number, y: number): void {
  218. if (!this._valueCache[uniformName]) {
  219. this._valueCache[uniformName] = [x, y];
  220. return;
  221. }
  222. this._valueCache[uniformName][0] = x;
  223. this._valueCache[uniformName][1] = y;
  224. }
  225. public _cacheFloat3(uniformName: string, x: number, y: number, z: number): void {
  226. if (!this._valueCache[uniformName]) {
  227. this._valueCache[uniformName] = [x, y, z];
  228. return;
  229. }
  230. this._valueCache[uniformName][0] = x;
  231. this._valueCache[uniformName][1] = y;
  232. this._valueCache[uniformName][2] = z;
  233. }
  234. public _cacheFloat4(uniformName: string, x: number, y: number, z: number, w: number): void {
  235. if (!this._valueCache[uniformName]) {
  236. this._valueCache[uniformName] = [x, y, z, w];
  237. return;
  238. }
  239. this._valueCache[uniformName][0] = x;
  240. this._valueCache[uniformName][1] = y;
  241. this._valueCache[uniformName][2] = z;
  242. this._valueCache[uniformName][3] = w;
  243. }
  244. public setArray(uniformName: string, array: number[]): Effect {
  245. this._engine.setArray(this.getUniform(uniformName), array);
  246. return this;
  247. }
  248. public setArray2(uniformName: string, array: number[]): Effect {
  249. this._engine.setArray2(this.getUniform(uniformName), array);
  250. return this;
  251. }
  252. public setArray3(uniformName: string, array: number[]): Effect {
  253. this._engine.setArray3(this.getUniform(uniformName), array);
  254. return this;
  255. }
  256. public setArray4(uniformName: string, array: number[]): Effect {
  257. this._engine.setArray4(this.getUniform(uniformName), array);
  258. return this;
  259. }
  260. public setMatrices(uniformName: string, matrices: Float32Array): Effect {
  261. this._engine.setMatrices(this.getUniform(uniformName), matrices);
  262. return this;
  263. }
  264. public setMatrix(uniformName: string, matrix: Matrix): Effect {
  265. //if (this._valueCache[uniformName] && this._valueCache[uniformName].equals(matrix))
  266. // return;
  267. //this._cacheMatrix(uniformName, matrix);
  268. this._engine.setMatrix(this.getUniform(uniformName), matrix);
  269. return this;
  270. }
  271. public setFloat(uniformName: string, value: number): Effect {
  272. if (this._valueCache[uniformName] && this._valueCache[uniformName] === value)
  273. return this;
  274. this._valueCache[uniformName] = value;
  275. this._engine.setFloat(this.getUniform(uniformName), value);
  276. return this;
  277. }
  278. public setBool(uniformName: string, bool: boolean): Effect {
  279. if (this._valueCache[uniformName] && this._valueCache[uniformName] === bool)
  280. return this;
  281. this._valueCache[uniformName] = bool;
  282. this._engine.setBool(this.getUniform(uniformName), bool ? 1 : 0);
  283. return this;
  284. }
  285. public setVector2(uniformName: string, vector2: Vector2): Effect {
  286. if (this._valueCache[uniformName] && this._valueCache[uniformName][0] === vector2.x && this._valueCache[uniformName][1] === vector2.y)
  287. return this;
  288. this._cacheFloat2(uniformName, vector2.x, vector2.y);
  289. this._engine.setFloat2(this.getUniform(uniformName), vector2.x, vector2.y);
  290. return this;
  291. }
  292. public setFloat2(uniformName: string, x: number, y: number): Effect {
  293. if (this._valueCache[uniformName] && this._valueCache[uniformName][0] === x && this._valueCache[uniformName][1] === y)
  294. return this;
  295. this._cacheFloat2(uniformName, x, y);
  296. this._engine.setFloat2(this.getUniform(uniformName), x, y);
  297. return this;
  298. }
  299. public setVector3(uniformName: string, vector3: Vector3): Effect {
  300. if (this._valueCache[uniformName] && this._valueCache[uniformName][0] === vector3.x && this._valueCache[uniformName][1] === vector3.y && this._valueCache[uniformName][2] === vector3.z)
  301. return this;
  302. this._cacheFloat3(uniformName, vector3.x, vector3.y, vector3.z);
  303. this._engine.setFloat3(this.getUniform(uniformName), vector3.x, vector3.y, vector3.z);
  304. return this;
  305. }
  306. public setFloat3(uniformName: string, x: number, y: number, z: number): Effect {
  307. if (this._valueCache[uniformName] && this._valueCache[uniformName][0] === x && this._valueCache[uniformName][1] === y && this._valueCache[uniformName][2] === z)
  308. return this;
  309. this._cacheFloat3(uniformName, x, y, z);
  310. this._engine.setFloat3(this.getUniform(uniformName), x, y, z);
  311. return this;
  312. }
  313. public setFloat4(uniformName: string, x: number, y: number, z: number, w: number): Effect {
  314. if (this._valueCache[uniformName] && this._valueCache[uniformName][0] === x && this._valueCache[uniformName][1] === y && this._valueCache[uniformName][2] === z && this._valueCache[uniformName][3] === w)
  315. return this;
  316. this._cacheFloat4(uniformName, x, y, z, w);
  317. this._engine.setFloat4(this.getUniform(uniformName), x, y, z, w);
  318. return this;
  319. }
  320. public setColor3(uniformName: string, color3: Color3): Effect {
  321. if (this._valueCache[uniformName] && this._valueCache[uniformName][0] === color3.r && this._valueCache[uniformName][1] === color3.g && this._valueCache[uniformName][2] === color3.b)
  322. return this;
  323. this._cacheFloat3(uniformName, color3.r, color3.g, color3.b);
  324. this._engine.setColor3(this.getUniform(uniformName), color3);
  325. return this;
  326. }
  327. public setColor4(uniformName: string, color3: Color3, alpha: number): Effect {
  328. if (this._valueCache[uniformName] && this._valueCache[uniformName][0] === color3.r && this._valueCache[uniformName][1] === color3.g && this._valueCache[uniformName][2] === color3.b && this._valueCache[uniformName][3] === alpha)
  329. return this;
  330. this._cacheFloat4(uniformName, color3.r, color3.g, color3.b, alpha);
  331. this._engine.setColor4(this.getUniform(uniformName), color3, alpha);
  332. return this;
  333. }
  334. // Statics
  335. public static ShadersStore = {};
  336. }
  337. }