Translated Shaders

Author: sebavan

dist/spector.bundle.js

@@ -5,6 +5,7 @@
 Please, find below the per release summary of the contribution added to the project per version. Each of the listed versions is having its corresponding tag in the repo.
 
 ## v0.9.19
+* Add Support for [translated shaders](https://github.com/BabylonJS/Spector.js/issues/175) in the extension.
 
 ## v0.9.18
 * Add Toggle for [fullscreen textures](https://github.com/BabylonJS/Spector.js/issues/145) in the extension.

documentation/changeLogs.md

@@ -34,6 +34,8 @@ export class ReadProgramHelper {
 
     private static readShaderFromContext(context: WebGLRenderingContexts, shader: WebGLShader): IShaderCapture {
         const source = context.getShaderSource(shader);
+        const ext = context.getExtension("WEBGL_debug_shaders");
+        const translatedSource = ext ? ext.getTranslatedShaderSource(shader) : null;
 
         const shaderTypeValue = context.getShaderParameter(shader, WebGlConstants.SHADER_TYPE.value);
         const isFragment = shaderTypeValue === WebGlConstants.FRAGMENT_SHADER.value;
@@ -52,6 +54,7 @@ export class ReadProgramHelper {
             fragment: isFragment,
             name,
             source,
+            translatedSource,
         };
     }
 

extensions/spector.bundle.func.js

@@ -28,6 +28,8 @@ import { MDNCommandLinkHelper } from "./commandList/mdnCommandLinkHelper";
 export interface ISourceCodeChangeEvent {
     sourceVertex: string;
     sourceFragment: string;
+    translatedSourceVertex: string;
+    translatedSourceFragment: string;
     programId: number;
 }
 
@@ -146,21 +148,37 @@ export class ResultView {
         this.sourceCodeComponent.onSourceCodeCloseClicked.add(() => {
             this.displayCurrentCapture();
         });
+        this.sourceCodeComponent.onTranslatedVertexSourceClicked.add((sourceCodeState) => {
+            const state = this.mvx.getGenericState<ISourceCodeState>(this.sourceCodeComponentStateId);
+            state.fragment = false;
+            state.translated = true;
+            this.mvx.updateState(this.sourceCodeComponentStateId, state);
+        });
+        this.sourceCodeComponent.onTranslatedFragmentSourceClicked.add((sourceCodeState) => {
+            const state = this.mvx.getGenericState<ISourceCodeState>(this.sourceCodeComponentStateId);
+            state.fragment = true;
+            state.translated = true;
+            this.mvx.updateState(this.sourceCodeComponentStateId, state);
+        });
         this.sourceCodeComponent.onVertexSourceClicked.add((sourceCodeState) => {
             const state = this.mvx.getGenericState<ISourceCodeState>(this.sourceCodeComponentStateId);
             state.fragment = false;
+            state.translated = false;
             this.mvx.updateState(this.sourceCodeComponentStateId, state);
         });
         this.sourceCodeComponent.onFragmentSourceClicked.add((sourceCodeState) => {
             const state = this.mvx.getGenericState<ISourceCodeState>(this.sourceCodeComponentStateId);
             state.fragment = true;
+            state.translated = false;
             this.mvx.updateState(this.sourceCodeComponentStateId, state);
         });
         this.sourceCodeComponent.onSourceCodeChanged.add((sourceCodeState) => {
             this.onSourceCodeChanged.trigger({
                 programId: sourceCodeState.state.programId,
                 sourceFragment: sourceCodeState.state.sourceFragment,
                 sourceVertex: sourceCodeState.state.sourceVertex,
+                translatedSourceFragment: sourceCodeState.state.translatedSourceFragment,
+                translatedSourceVertex: sourceCodeState.state.translatedSourceVertex,
             });
         });
 
@@ -263,7 +281,10 @@ export class ResultView {
             nameFragment: commandState.capture.DrawCall.shaders[1].name,
             sourceVertex: commandState.capture.DrawCall.shaders[0].source,
             sourceFragment: commandState.capture.DrawCall.shaders[1].source,
+            translatedSourceVertex: commandState.capture.DrawCall.shaders[0].translatedSource,
+            translatedSourceFragment: commandState.capture.DrawCall.shaders[1].translatedSource,
             fragment,
+            translated: false,
             editable: commandState.capture.DrawCall.programStatus.RECOMPILABLE,
         }, this.sourceCodeComponent);
 

extensions/spector.bundle.js

@@ -5,6 +5,7 @@ export interface ISourceCodeState extends ISourceCodeChangeEvent {
     nameVertex: string;
     nameFragment: string;
     fragment: boolean;
+    translated: boolean;
     editable: boolean;
 }
 
@@ -34,6 +35,8 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
     private static readonly closeCurlyReplacementKey = "[[[closeCurlyReplacementKey]]]";
     private static readonly closeCurlyReplacementKeyRegex = new RegExp("\\[\\[\\[closeCurlyReplacementKey\\]\\]\\]", "g");
 
+    public onTranslatedVertexSourceClicked: IStateEvent<ISourceCodeState>;
+    public onTranslatedFragmentSourceClicked: IStateEvent<ISourceCodeState>;
     public onVertexSourceClicked: IStateEvent<ISourceCodeState>;
     public onFragmentSourceClicked: IStateEvent<ISourceCodeState>;
     public onSourceCodeCloseClicked: IStateEvent<ISourceCodeState>;
@@ -43,6 +46,8 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
 
     constructor() {
         super();
+        this.onTranslatedVertexSourceClicked = this.createEvent("onTranslatedVertexSourceClicked");
+        this.onTranslatedFragmentSourceClicked = this.createEvent("onTranslatedFragmentSourceClicked");
         this.onVertexSourceClicked = this.createEvent("onVertexSourceClicked");
         this.onFragmentSourceClicked = this.createEvent("onFragmentSourceClicked");
         this.onSourceCodeCloseClicked = this.createEvent("onSourceCodeCloseClicked");
@@ -77,14 +82,23 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
 
     public render(state: ISourceCodeState, stateId: number): Element {
         const source = state.fragment ? state.sourceFragment : state.sourceVertex;
-        const formattedShader = source ? this._indentIfdef(this._beautify(source)) : "";
+        let formattedShader: string;
+        // tslint:disable-next-line:prefer-conditional-expression
+        if (state.translated) {
+            formattedShader = state.fragment ? state.translatedSourceFragment : state.translatedSourceVertex;
+        }
+        else {
+            formattedShader = source ? this._indentIfdef(this._beautify(source)) : "";
+        }
 
         const htmlString = this.htmlTemplate`
         <div class="sourceCodeComponentContainer">
             <div class="sourceCodeMenuComponentContainer">
                 <ul class="sourceCodeMenuComponent">
-                    <li><a class="${state.fragment ? "" : "active"}" href="#" role="button" commandName="onVertexSourceClicked">Vertex</a></li>
-                    <li><a class="${state.fragment ? "active" : ""}" href="#" role="button" commandName="onFragmentSourceClicked">Fragment</a></li>
+                    ${ state.translatedSourceVertex ? this.htmlTemplate`<li><a class="${!state.fragment && state.translated ? "active" : ""}" href="#" role="button" commandName="onTranslatedVertexSourceClicked">Translated Vertex</a></li>` : "" }
+                    ${ state.translatedSourceFragment ? this.htmlTemplate`<li><a class="${state.fragment && state.translated ? "active" : ""}" href="#" role="button" commandName="onTranslatedFragmentSourceClicked">Translated Fragment</a></li>` : "" }
+                    <li><a class="${!state.fragment && !state.translated ? "active" : ""}" href="#" role="button" commandName="onVertexSourceClicked">Vertex</a></li>
+                    <li><a class="${state.fragment && !state.translated ? "active" : ""}" href="#" role="button" commandName="onFragmentSourceClicked">Fragment</a></li>
                     <li><a href="#" role="button" commandName="onSourceCodeCloseClicked">Close</a></li>
                 </ul>
             </div>

src/backend/utils/readProgramHelper.ts

@@ -3,6 +3,7 @@ export interface IShaderCapture {
     fragment: boolean;
     name: string;
     source: string;
+    translatedSource: string;
 }
 
 export interface IProgramStatus {