Deploy 0.9.30

documentation/changeLogs.md

@@ -11,9 +11,11 @@ Please, find below the per release summary of the contribution added to the proj
 * Fix [Multidraw spy](https://github.com/BabylonJS/Spector.js/issues/253)
 * Fix [Preprocessor beautify](https://github.com/BabylonJS/Spector.js/pull/272)
 * Fix [Float buffer capture](https://github.com/BabylonJS/Spector.js/pull/276)
-* Add [Beautifier Toggle](https://github.com/BabylonJS/Spector.js/pull/282)
+* Add [GLSL Beautifier Toggle](https://github.com/BabylonJS/Spector.js/pull/282)
+* Add [GLSL Prepocessor Toggle](https://github.com/BabylonJS/Spector.js/pull/295)
 * Fix [BaseVertexBaseInstance Capture](https://github.com/BabylonJS/Spector.js/pull/284)
 * Fix [XR spy on firefox](https://github.com/BabylonJS/Spector.js/pull/285)
+* Fix [Frame Buffer visual state](https://github.com/BabylonJS/Spector.js/pull/292)
 
 ## v0.9.29
 * Add [WebXR tracking capabilities](https://github.com/BabylonJS/Spector.js/pull/257)

package.json

@@ -33,6 +33,9 @@
     "build": "run-s build:tslint build:bundle build:copybuild:copy:bundle build:concatBundleFunc -n",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "dependencies": {
+    "@shaderfrog/glsl-parser": "^2.0.1"
+  },
   "devDependencies": {
     "@types/webxr": "^0.5.1",
     "concat-cli": "^4.0.0",

src/backend/commands/drawArrays.ts

@@ -11,7 +11,7 @@ export class DrawArrays extends BaseCommand {
     protected stringifyArgs(args: IArguments): string[] {
         const stringified = [];
         stringified.push(WebGlConstants.stringifyWebGlConstant(args[0], "drawArrays"));
-        stringified.push(args[1]);
+        stringified.push(args[1] + " indices");
         stringified.push(args[2]);
 
         return stringified;

src/backend/commands/drawElements.ts

@@ -11,7 +11,7 @@ export class DrawElements extends BaseCommand {
     protected stringifyArgs(args: IArguments): string[] {
         const stringified = [];
         stringified.push(WebGlConstants.stringifyWebGlConstant(args[0], "drawElements"));
-        stringified.push(args[1]);
+        stringified.push(args[1] + " indices");
         stringified.push(WebGlConstants.stringifyWebGlConstant(args[2], "drawElements"));
         stringified.push(args[3]);
 

src/backend/commands/drawElementsInstanced.ts

@@ -11,7 +11,7 @@ export class DrawElementsInstanced extends BaseCommand {
     protected stringifyArgs(args: IArguments): string[] {
         const stringified = [];
         stringified.push(WebGlConstants.stringifyWebGlConstant(args[0], "drawElementsInstanced"));
-        stringified.push(args[1]);
+        stringified.push(args[1] + " indices");
         stringified.push(WebGlConstants.stringifyWebGlConstant(args[2], "drawElementsInstanced"));
         stringified.push(args[3]);
         stringified.push(args[4]);

src/backend/commands/drawElementsInstancedAngle.ts

@@ -11,7 +11,7 @@ export class DrawElementsInstancedAngle extends BaseCommand {
     protected stringifyArgs(args: IArguments): string[] {
         const stringified = [];
         stringified.push(WebGlConstants.stringifyWebGlConstant(args[0], "drawElementsInstancedANGLE"));
-        stringified.push(args[1]);
+        stringified.push(args[1] + " indices");
         stringified.push(WebGlConstants.stringifyWebGlConstant(args[2], "drawElementsInstancedANGLE"));
         stringified.push(args[3]);
         stringified.push(args[4]);

src/backend/commands/drawElementsInstancedBaseVertexBaseInstanceWEBGL.ts

@@ -11,7 +11,7 @@ export class DrawElementsInstancedBaseVertexBaseInstanceWEBGL extends BaseComman
     protected stringifyArgs(args: IArguments): string[] {
         const stringified = [];
         stringified.push(WebGlConstants.stringifyWebGlConstant(args[0], "drawElementsInstanced"));
-        stringified.push(args[1]);
+        stringified.push(args[1] + " indices");
         stringified.push(WebGlConstants.stringifyWebGlConstant(args[2], "drawElementsInstanced"));
         stringified.push(args[3]);
         stringified.push(args[4]);

src/backend/states/context/visualState.ts

@@ -207,7 +207,9 @@ export class VisualState extends BaseState {
             const info = storage.__SPECTOR_Object_CustomData as ITextureRecorderData;
             width = info.width;
             height = info.height;
-            textureType = info.type;
+            if (info.type !== undefined) {
+                textureType = info.type;
+            }
             knownAsTextureArray = info.target === WebGlConstants.TEXTURE_2D_ARRAY.name;
             if (!ReadPixelsHelper.isSupportedCombination(info.type, info.format, info.internalFormat)) {
                 return;

src/embeddedFrontend/resultView/resultView.ts

@@ -186,6 +186,11 @@ export class ResultView {
             state.beautify = (sourceCodeState.sender as HTMLInputElement).checked;
             this.mvx.updateState(this.sourceCodeComponentStateId, state);
         });
+        this.sourceCodeComponent.onPreprocessChanged.add((sourceCodeState) => {
+            const state = this.mvx.getGenericState<ISourceCodeState>(this.sourceCodeComponentStateId);
+            state.preprocessed = (sourceCodeState.sender as HTMLInputElement).checked;
+            this.mvx.updateState(this.sourceCodeComponentStateId, state);
+        });
 
 
         this.updateViewState();

src/embeddedFrontend/resultView/sourceCode/sourceCodeComponent.ts

@@ -1,5 +1,7 @@
+import preprocess from "@shaderfrog/glsl-parser/preprocessor"; // tslint:disable-line:no-submodule-imports
 import { BaseComponent, IStateEvent } from "../../mvx/baseComponent";
 import { ISourceCodeChangeEvent } from "../resultView";
+import { Logger } from "../../../shared/utils/logger";
 
 export interface ISourceCodeState extends ISourceCodeChangeEvent {
     nameVertex: string;
@@ -8,6 +10,7 @@ export interface ISourceCodeState extends ISourceCodeChangeEvent {
     translated: boolean;
     editable: boolean;
     beautify: boolean;
+    preprocessed: boolean;
 }
 
 // Declare Ace types here.
@@ -43,6 +46,7 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
     public onSourceCodeCloseClicked: IStateEvent<ISourceCodeState>;
     public onSourceCodeChanged: IStateEvent<ISourceCodeState>;
     public onBeautifyChanged: IStateEvent<ISourceCodeState>;
+    public onPreprocessChanged: IStateEvent<ISourceCodeState>;
 
     private editor: IAceEditor;
 
@@ -55,6 +59,7 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
         this.onSourceCodeCloseClicked = this.createEvent("onSourceCodeCloseClicked");
         this.onSourceCodeChanged = this.createEvent("onSourceCodeChanged");
         this.onBeautifyChanged = this.createEvent("onBeautifyChanged");
+        this.onPreprocessChanged = this.createEvent("onPreprocessChanged");
     }
 
     public showError(errorMessage: string) {
@@ -86,33 +91,50 @@ export class SourceCodeComponent extends BaseComponent<ISourceCodeState> {
     public render(state: ISourceCodeState, stateId: number): Element {
         const source = state.fragment ? state.sourceFragment : state.sourceVertex;
         let originalShader: string;
+        let preprocessed = state.preprocessed;
+
         // tslint:disable-next-line:prefer-conditional-expression
         if (state.translated) {
             originalShader = state.fragment ? state.translatedSourceFragment : state.translatedSourceVertex;
+            preprocessed = false;
         }
         else {
             originalShader = source ?? "";
         }
 
-        const displayedShader = state.beautify ? this._indentIfdef(this._beautify(originalShader)) : originalShader;
+        let displayedShader = originalShader;
+        if (preprocessed) {
+            try {
+                displayedShader = preprocess(displayedShader, {
+                    preserveComments: false,
+                    stopOnError: true
+                });
+            } catch (e) {
+                Logger.error("shader preprocess failed", e);
+            }
+        }
+
+        if (state.beautify) {
+            displayedShader = this._indentIfdef(this._beautify(displayedShader));
+        }
 
         const htmlString = this.htmlTemplate`
         <div class="sourceCodeComponentContainer">
             <div class="sourceCodeMenuComponentContainer">
                 <ul class="sourceCodeMenuComponent">
-                    $${ 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>` : "" }
+                    $${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>
-            $${
-            this.htmlTemplate`<div class="sourceCodeComponent">${displayedShader}</div>`
+            $${this.htmlTemplate`<div class="sourceCodeComponent">${displayedShader}</div>`
             }
             <div class="sourceCodeMenuComponentFooter">
                 <p>
                     <label><input type="checkbox" commandName="onBeautifyChanged" ${state.beautify ? "checked" : ""} /> Beautify</label>
+                    <label><input type="checkbox" commandName="onPreprocessChanged" ${state.preprocessed ? "checked" : ""} /> Preprocess</label>
                 </p>
             </div>
         </div>`;