Skip to content

Commit

Permalink
Merge pull request #295 from 06wj/master
Browse files Browse the repository at this point in the history
Add option to toggle GLSL preprocess
  • Loading branch information
sebavan authored Jan 2, 2024
2 parents 77da612 + 6fb9107 commit 8250ccd
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 5 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 5 additions & 0 deletions src/embeddedFrontend/resultView/resultView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
32 changes: 27 additions & 5 deletions src/embeddedFrontend/resultView/sourceCode/sourceCodeComponent.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -8,6 +10,7 @@ export interface ISourceCodeState extends ISourceCodeChangeEvent {
translated: boolean;
editable: boolean;
beautify: boolean;
preprocessed: boolean;
}

// Declare Ace types here.
Expand Down Expand Up @@ -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;

Expand All @@ -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) {
Expand Down Expand Up @@ -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>`;
Expand Down

0 comments on commit 8250ccd

Please sign in to comment.