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