diff --git a/web/demo.html b/web/demo.html
index f92d9c6..b3ff17b 100644
--- a/web/demo.html
+++ b/web/demo.html
@@ -82,7 +82,7 @@
[rendergraph]
void RenderGraphMain()
{{
- Image img = GetImage(ivec2(128, 128), rgba8);
+ Image img = GetImage(uvec2(128, 128), rgba8);
ColorPass(
SliderFloat("R", 0.0f, 1.0f) + 0.5f,
SliderFloat("G", 0.0f, 1.0f),
diff --git a/web/demo.js b/web/demo.js
index 0d4d3aa..f6cc024 100644
--- a/web/demo.js
+++ b/web/demo.js
@@ -1,42 +1,38 @@
-
import Module from "./dist/LegitScriptWasm.js"
-Init(
- document.querySelector('#editor'),
- document.querySelector('results')
-)
+Init(document.querySelector("#editor"), document.querySelector("results"))
function CompileLegitScript(legitScriptCompiler, content, imControls) {
- const debugOutputEl = document.querySelector('results result.compilation pre')
+ const debugOutputEl = document.querySelector("results result.compilation pre")
try {
- const result = legitScriptCompiler.LegitScriptLoad(content, imControls)
+ const result = legitScriptCompiler.LegitScriptLoad(content)
debugOutputEl.innerText = result
if (result.includes('"error":')) {
- debugOutputEl.style = 'border:2px solid yellow'
+ debugOutputEl.style = "border:2px solid yellow"
} else {
- debugOutputEl.style = 'border:2px solid green'
+ debugOutputEl.style = "border:2px solid green"
}
return true
} catch (e) {
debugOutputEl.innerText = `${e.name} ${e.message}\n ${e.stack}`
- debugOutputEl.style = 'border:2px solid red'
+ debugOutputEl.style = "border:2px solid red"
return false
}
}
async function Init(editorEl, resultsEl) {
const initialContent = editorEl.value
- const legitScriptCompiler = await Module();
+ const legitScriptCompiler = await Module()
- const controlEl = document.querySelector('inputs controls')
- const TextualOutputName = '@@textualOutput'
+ const controlEl = document.querySelector("inputs controls")
+ const TextualOutputName = "@@textualOutput"
const imControlContext = {}
const imControls = {
floatSlider(name, value, lo, hi) {
- const step = 0.01;
+ const step = 0.01
if (!imControlContext[name]) {
- const el = document.createElement('p')
+ const el = document.createElement("p")
el.innerHTML = `
${name}
@@ -47,16 +43,16 @@ async function Init(editorEl, resultsEl) {
}
const el = imControlContext[name]
- const input = el.querySelector('input')
+ const input = el.querySelector("input")
value = parseFloat(input.value)
- el.querySelector('.value').innerText = value
+ el.querySelector(".value").innerText = value
return value
},
intSlider(name, value, lo, hi) {
- const step = 1;
+ const step = 1
if (!imControlContext[name]) {
- const el = document.createElement('p')
+ const el = document.createElement("p")
el.innerHTML = `
${name}
@@ -67,46 +63,78 @@ async function Init(editorEl, resultsEl) {
}
const el = imControlContext[name]
- const input = el.querySelector('input')
+ const input = el.querySelector("input")
value = parseInt(input.value)
- el.querySelector('.value').innerText = value
+ el.querySelector(".value").innerText = value
return value
},
- text(value) {
- if (!imControlContext[TextualOutputName]) {
- const el = document.createElement('pre')
- imControlContext[TextualOutputName] = el
+ text(name, value) {
+ if (!imControlContext[name]) {
+ const el = document.createElement("pre")
+ imControlContext[name] = el
controlEl.appendChild(el)
}
- const el = imControlContext[TextualOutputName]
- el.innerText += value + '\n'
- }
+ const el = imControlContext[name]
+ el.innerText = value + "\n"
+ },
}
- const compilationTimingEl = resultsEl.querySelector('.compilation .timings')
+ const compilationTimingEl = resultsEl.querySelector(".compilation .timings")
function Compile() {
const start = Date.now()
- CompileLegitScript(legitScriptCompiler, editorEl.value, imControls)
+ CompileLegitScript(legitScriptCompiler, editorEl.value)
compilationTimingEl.innerText = `${Date.now() - start}ms`
}
Compile()
- editorEl.addEventListener('keyup', Compile)
+ editorEl.addEventListener("keyup", Compile)
- const frameTimingEl = document.querySelector('results result.frame .timings')
- const frameOutputEl = document.querySelector('results result.frame pre')
+ const frameTimingEl = document.querySelector("results result.frame .timings")
+ const frameOutputEl = document.querySelector("results result.frame pre")
function Frame() {
const start = performance.now()
- // Special case, clear the textual output
- if (imControlContext[TextualOutputName]) {
- imControlContext[TextualOutputName].innerText = ''
+ const frameResult = legitScriptCompiler.LegitScriptFrame(
+ '[{"name": "@swapchain_size", "type": "uvec2", "value":{"x":512, "y":512}}]'
+ )
+
+ const result = JSON.parse(frameResult)
+ if (result.context_requests) {
+ const toRemove = new Set(Object.keys(imControlContext))
+ let textualIndex = 0
+ for (const request of result.context_requests) {
+ if (request.type === "FloatRequest") {
+ imControls.floatSlider(
+ request.name,
+ request.value,
+ request.lo,
+ request.hi
+ )
+ toRemove.delete(request.name)
+ } else if (request.type === "IntRequest") {
+ imControls.intSlider(
+ request.name,
+ request.value,
+ request.lo,
+ request.hi
+ )
+ toRemove.delete(request.name)
+ } else if (request.type === "TextRequest") {
+ const name = TextualOutputName + textualIndex++
+ imControls.text(name, request.text)
+ toRemove.delete(name)
+ }
+ }
+
+ for (const key of toRemove) {
+ controlEl.removeChild(imControlContext[key])
+ delete imControlContext[key]
+ }
}
- const frameResult = legitScriptCompiler.LegitScriptFrame('[{"name": "@swapchain_size", "type": "uvec2", "value":{"x":512, "y":512}}]')
frameTimingEl.innerText = `${(performance.now() - start).toFixed(2)}ms`
if (frameResult !== frameOutputEl.innerText) {
frameOutputEl.innerText = frameResult