1- <!DOCTYPE html> < html > < head > < title > gpgpu playground</ title > < link rel ="stylesheet " type ="text/css " media ="all " href ="/learn-gpgpu/styles/index.css "> < script type ="module " src ="/learn-gpgpu/_astro/hoisted.n3hzDFsx .js "> </ script >
1+ <!DOCTYPE html> < html > < head > < title > gpgpu playground</ title > < link rel ="stylesheet " type ="text/css " media ="all " href ="/learn-gpgpu/styles/index.css "> < script type ="module " src ="/learn-gpgpu/_astro/hoisted.LFeokraw .js "> </ script >
22< script type ="module " src ="/learn-gpgpu/_astro/page.BO5rBSqo.js "> </ script > </ head > < body > < nav > < ul > < li > < a href ="/learn-gpgpu/docs "> docs/</ a > </ li > </ ul > </ nav > < div id ="talvos " class ="vis-wip "> < div > < main > < textarea class ="module " autocorrect ="off " autocomplete ="off " autocapitalize ="off " spellcheck ="false " aria-label ="SPIR-V module assembly (spv_text format) " wrap ="off "> ; SPIR-V
33; Version: 1.5
44OpCapability Kernel
5858 disabled
5959 wrap="off">{tcfChunks[0]}</textarea
6060 >
61- </section> --> < output class ="stdio " style =" display: block; background-color: lightgray; white-space: pre; " > </ output > < hr > < section class ="buffers "> <!-- <figure>
61+ </section> --> < output class ="stdio "> </ output > < hr > < section class ="buffers "> <!-- <figure>
6262 <figcaption>Buffer</figcaption>
6363 <ul></ul>
6464 </figure> --> <!-- <textarea
7070 spellcheck="false"
7171 aria-label="Talvos commands (tcf format)"
7272 wrap="off">{tcfChunks[1]}</textarea
73- > --> </ section > </ aside > </ div > < div class ="controls "> < select id ="vis "> < option value ="v0 "> v0: control blocks; executor state colors</ option > < option value ="v1 " selected =""> v1 (wip): control "scrubber"; SSA results</ option > </ select > < button class ="validate exec "> validate</ button > < button class ="run exec "> run</ button > < button class ="debug exec "> debug</ button > < div hidden > < button class ="exception "> exception</ button > < button class ="assertion "> assertion</ button > < button class ="shrubbery "> shrubbery</ button > </ div > < div class ="debugger " hidden > < button class ="tick "> tick</ button > <!-- cf. PipelineExecutor::help --> < button class ="step "> step</ button > < button class ="switch "> switch</ button > < button class ="print "> print</ button > < button class ="continue "> continue</ button > < button class ="stop "> stop</ button > <!-- missing: [break, breakpoint, help, quit] --> </ div > </ div > <!-- TODO
73+ > --> </ section > </ aside > </ div > < div class ="controls "> < select id ="vis "> < option value ="v0 "> v0: control blocks; executor state colors</ option > < option value ="v1 " selected =""> v1 (wip): control "scrubber"; SSA results</ option > </ select > < button class ="validate exec "> validate</ button > < button class ="run exec "> run</ button > < button class ="debug exec "> debug</ button > < div hidden > < button class ="exception "> exception</ button > < button class ="assertion "> assertion</ button > < button class ="shrubbery "> shrubbery</ button > </ div > < div class ="debugger " hidden > < button class ="tick "> tick</ button > <!-- cf. PipelineExecutor::help --> < button class ="step "> step</ button > < button class ="switch " hidden > switch</ button > < button class ="print " hidden > print</ button > < button class ="continue "> continue</ button > < button class ="stop "> stop</ button > <!-- missing: [break, breakpoint, help, quit] --> </ div > </ div > <!-- TODO
7474 can we pull out just this one wodget into a "component"?
7575 it'd be nice to write some code for turning `102043253.21231222ms` into a human time
7676 --> < output class ="timing " style ="display: block; "> </ output > < output class ="error " style ="display: block; background-color: #fcebeb; "> </ output > < shadow-root class ="vis v0 hidden "> < svg xmlns ="http://www.w3.org/2000/svg " class ="vis0 " data-cores ="4 " data-lanes ="8 "> < style >
160160 <rect width="100%" height="100%" fill="url(#grid)"></rect> --> < defs > < filter id ="inset-shadow "> <!-- lol hates it --> <!-- <link
161161 href="https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/#aa-using-svg-filters"
162162 rel="help"
163- /> --> <!-- Shadow offset --> < feOffset dx ="0 " dy ="0 "> </ feOffset > <!-- Shadow blur --> < feGaussianBlur stdDeviation ="6 " result ="offset-blur "> </ feGaussianBlur > <!-- Invert drop shadow to make an inset shadow --> < feComposite operator ="out " in ="SourceGraphic " in2 ="offset-blur " result ="inverse "> </ feComposite > <!-- Cut color inside shadow --> < feFlood flood-color ="black " flood-opacity =".95 " result ="color "> </ feFlood > < feComposite operator ="in " in ="color " in2 ="inverse " result ="shadow "> </ feComposite > <!-- Placing shadow over element --> < feComposite operator ="over " in ="shadow " in2 ="SourceGraphic "> </ feComposite > </ filter > </ defs > < g class ="core " transform ="translate(0, 0) "> < rect class ="ctrl " x ="3.75 " width ="22.5 " height ="15 "> </ rect > < rect x ="32 " width ="15 " height ="15 " data-phy-coords ="{ 0, 0 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="48 " width ="15 " height ="15 " data-phy-coords ="{ 0, 1 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="64 " width ="15 " height ="15 " data-phy-coords ="{ 0, 2 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="80 " width ="15 " height ="15 " data-phy-coords ="{ 0, 3 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="96 " width ="15 " height ="15 " data-phy-coords ="{ 0, 4 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="112 " width ="15 " height ="15 " data-phy-coords ="{ 0, 5 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="128 " width ="15 " height ="15 " data-phy-coords ="{ 0, 6 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="144 " width ="15 " height ="15 " data-phy-coords ="{ 0, 7 } " class ="lane " data-state ="inactive "> </ rect > </ g > < g class ="core " transform ="translate(0, 16) "> < rect class ="ctrl " x ="3.75 " width ="22.5 " height ="15 "> </ rect > < rect x ="32 " width ="15 " height ="15 " data-phy-coords ="{ 1, 0 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="48 " width ="15 " height ="15 " data-phy-coords ="{ 1, 1 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="64 " width ="15 " height ="15 " data-phy-coords ="{ 1, 2 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="80 " width ="15 " height ="15 " data-phy-coords ="{ 1, 3 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="96 " width ="15 " height ="15 " data-phy-coords ="{ 1, 4 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="112 " width ="15 " height ="15 " data-phy-coords ="{ 1, 5 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="128 " width ="15 " height ="15 " data-phy-coords ="{ 1, 6 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="144 " width ="15 " height ="15 " data-phy-coords ="{ 1, 7 } " class ="lane " data-state ="inactive "> </ rect > </ g > < g class ="core " transform ="translate(0, 32) "> < rect class ="ctrl " x ="3.75 " width ="22.5 " height ="15 "> </ rect > < rect x ="32 " width ="15 " height ="15 " data-phy-coords ="{ 2, 0 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="48 " width ="15 " height ="15 " data-phy-coords ="{ 2, 1 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="64 " width ="15 " height ="15 " data-phy-coords ="{ 2, 2 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="80 " width ="15 " height ="15 " data-phy-coords ="{ 2, 3 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="96 " width ="15 " height ="15 " data-phy-coords ="{ 2, 4 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="112 " width ="15 " height ="15 " data-phy-coords ="{ 2, 5 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="128 " width ="15 " height ="15 " data-phy-coords ="{ 2, 6 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="144 " width ="15 " height ="15 " data-phy-coords ="{ 2, 7 } " class ="lane " data-state ="inactive "> </ rect > </ g > < g class ="core " transform ="translate(0, 48) "> < rect class ="ctrl " x ="3.75 " width ="22.5 " height ="15 "> </ rect > < rect x ="32 " width ="15 " height ="15 " data-phy-coords ="{ 3, 0 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="48 " width ="15 " height ="15 " data-phy-coords ="{ 3, 1 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="64 " width ="15 " height ="15 " data-phy-coords ="{ 3, 2 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="80 " width ="15 " height ="15 " data-phy-coords ="{ 3, 3 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="96 " width ="15 " height ="15 " data-phy-coords ="{ 3, 4 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="112 " width ="15 " height ="15 " data-phy-coords ="{ 3, 5 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="128 " width ="15 " height ="15 " data-phy-coords ="{ 3, 6 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="144 " width ="15 " height ="15 " data-phy-coords ="{ 3, 7 } " class ="lane " data-state ="inactive "> </ rect > </ g > <!-- could put this above, if we knew how tall an em was (or translated negatively?) --> < text y ="65 "> < tspan x ="0 " dy ="1em "> physical {core, SIMT lane}:</ tspan > < tspan class ="physical "> N/A</ tspan > < tspan x ="0 " dy ="1.2em "> logical {workgroup, invocation}:</ tspan > < tspan class ="logical "> N/A</ tspan > </ text > </ svg > </ shadow-root > < div class ="controls vis v1 " hidden > < button class ="vis reset "> reset</ button > < button class ="vis step0 "> step (vis)</ button > < button class ="vis step1 "> step (op)</ button > </ div > < shadow-root class ="vis v1 "> < svg xmlns ="http://www.w3.org/2000/svg " viewBox ="0 0 240 240 " height ="240px " class ="vis1 " data-cores ="TODO " data-lanes ="4 "> < style >
163+ /> --> <!-- Shadow offset --> < feOffset dx ="0 " dy ="0 "> </ feOffset > <!-- Shadow blur --> < feGaussianBlur stdDeviation ="6 " result ="offset-blur "> </ feGaussianBlur > <!-- Invert drop shadow to make an inset shadow --> < feComposite operator ="out " in ="SourceGraphic " in2 ="offset-blur " result ="inverse "> </ feComposite > <!-- Cut color inside shadow --> < feFlood flood-color ="black " flood-opacity =".95 " result ="color "> </ feFlood > < feComposite operator ="in " in ="color " in2 ="inverse " result ="shadow "> </ feComposite > <!-- Placing shadow over element --> < feComposite operator ="over " in ="shadow " in2 ="SourceGraphic "> </ feComposite > </ filter > </ defs > < g class ="core " transform ="translate(0, 0) "> < rect class ="ctrl " x ="3.75 " width ="22.5 " height ="15 "> </ rect > < rect x ="32 " width ="15 " height ="15 " data-phy-coords ="{ 0, 0 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="48 " width ="15 " height ="15 " data-phy-coords ="{ 0, 1 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="64 " width ="15 " height ="15 " data-phy-coords ="{ 0, 2 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="80 " width ="15 " height ="15 " data-phy-coords ="{ 0, 3 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="96 " width ="15 " height ="15 " data-phy-coords ="{ 0, 4 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="112 " width ="15 " height ="15 " data-phy-coords ="{ 0, 5 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="128 " width ="15 " height ="15 " data-phy-coords ="{ 0, 6 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="144 " width ="15 " height ="15 " data-phy-coords ="{ 0, 7 } " class ="lane " data-state ="inactive "> </ rect > </ g > < g class ="core " transform ="translate(0, 16) "> < rect class ="ctrl " x ="3.75 " width ="22.5 " height ="15 "> </ rect > < rect x ="32 " width ="15 " height ="15 " data-phy-coords ="{ 1, 0 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="48 " width ="15 " height ="15 " data-phy-coords ="{ 1, 1 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="64 " width ="15 " height ="15 " data-phy-coords ="{ 1, 2 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="80 " width ="15 " height ="15 " data-phy-coords ="{ 1, 3 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="96 " width ="15 " height ="15 " data-phy-coords ="{ 1, 4 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="112 " width ="15 " height ="15 " data-phy-coords ="{ 1, 5 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="128 " width ="15 " height ="15 " data-phy-coords ="{ 1, 6 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="144 " width ="15 " height ="15 " data-phy-coords ="{ 1, 7 } " class ="lane " data-state ="inactive "> </ rect > </ g > < g class ="core " transform ="translate(0, 32) "> < rect class ="ctrl " x ="3.75 " width ="22.5 " height ="15 "> </ rect > < rect x ="32 " width ="15 " height ="15 " data-phy-coords ="{ 2, 0 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="48 " width ="15 " height ="15 " data-phy-coords ="{ 2, 1 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="64 " width ="15 " height ="15 " data-phy-coords ="{ 2, 2 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="80 " width ="15 " height ="15 " data-phy-coords ="{ 2, 3 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="96 " width ="15 " height ="15 " data-phy-coords ="{ 2, 4 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="112 " width ="15 " height ="15 " data-phy-coords ="{ 2, 5 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="128 " width ="15 " height ="15 " data-phy-coords ="{ 2, 6 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="144 " width ="15 " height ="15 " data-phy-coords ="{ 2, 7 } " class ="lane " data-state ="inactive "> </ rect > </ g > < g class ="core " transform ="translate(0, 48) "> < rect class ="ctrl " x ="3.75 " width ="22.5 " height ="15 "> </ rect > < rect x ="32 " width ="15 " height ="15 " data-phy-coords ="{ 3, 0 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="48 " width ="15 " height ="15 " data-phy-coords ="{ 3, 1 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="64 " width ="15 " height ="15 " data-phy-coords ="{ 3, 2 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="80 " width ="15 " height ="15 " data-phy-coords ="{ 3, 3 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="96 " width ="15 " height ="15 " data-phy-coords ="{ 3, 4 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="112 " width ="15 " height ="15 " data-phy-coords ="{ 3, 5 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="128 " width ="15 " height ="15 " data-phy-coords ="{ 3, 6 } " class ="lane " data-state ="inactive "> </ rect > < rect x ="144 " width ="15 " height ="15 " data-phy-coords ="{ 3, 7 } " class ="lane " data-state ="inactive "> </ rect > </ g > <!-- could put this above, if we knew how tall an em was (or translated negatively?) --> < text y ="65 "> < tspan x ="0 " dy ="1em "> physical {core, SIMT lane}:</ tspan > < tspan class ="physical "> N/A</ tspan > < tspan x ="0 " dy ="1.2em "> logical {workgroup, invocation}:</ tspan > < tspan class ="logical "> N/A</ tspan > </ text > </ svg > </ shadow-root > < div class ="controls vis v1 " hidden > < button class ="vis reset "> reset</ button > < button class ="vis step0 "> step (vis)</ button > < button class ="vis step1 "> step (op)</ button > </ div > < shadow-root class ="vis v1 "> <!-- TODO: viewBox based on size of computation --> < svg xmlns ="http://www.w3.org/2000/svg " viewBox ="0 0 300 240 " height ="240px " class ="vis1 " data-cores ="TODO " data-lanes ="4 "> < style >
164164 .result {
165165 fill-opacity : 0 ;
166166 stroke : black;
204204 .vertical .centerline {
205205 stroke : none;
206206 }
207- </ style > < defs > < symbol id ="handle " width ="30 " height ="30 " viewBox ="0 0 25 30 " preserveAspectRatio ="none "> < polygon points ="5 0,25 0,25 20,15 30,5 20 "> </ polygon > </ symbol > </ defs > <!-- < use href="#handle" style="fill-opacity: 0; stroke:black;" x="12"></use> -- > < rect x ="0 " y ="30 " height ="200 " width ="60 "> </ rect > <!-- 40x30 at (10 40); centerline: 30 --> < rect x ="10 " y ="40 " height ="30 " width ="40 " class ="core "> </ rect > </ svg > < line x1 ="30 " y1 ="0 " x2 ="30 " y2 ="100% " stroke ="grey " class ="vertical centerline "> </ line > </ defs > </ svg > </ shadow-root > </ div > </ body > </ html >
207+ </ style > < defs > < symbol id ="handle " width ="30 " height ="30 " viewBox ="0 0 25 30 " preserveAspectRatio ="none "> < polygon points ="5 0,25 0,25 20,15 30,5 20 "> </ polygon > </ symbol > </ defs > < use href ="#handle " style ="fill-opacity: 0; stroke:black; " x ="12 "> </ use > < rect x ="0 " y ="30 " height ="200 " width ="60 "> </ rect > <!-- 40x30 at (10 40); centerline: 30 --> < rect x ="10 " y ="40 " height ="30 " width ="40 " class ="core "> </ rect > </ svg > < line x1 ="30 " y1 ="0 " x2 ="30 " y2 ="100% " stroke ="grey " class ="vertical centerline "> </ line > </ defs > </ svg > </ shadow-root > </ div > </ body > </ html >
0 commit comments