Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	WebGPU Transpiler
ID	6153912226332672
Created	8 months ago, 1715287984165
Updated	7 months ago, 1715872335652
Code	<!DOCTYPE html> <!-- There are three types of shaders that may be compiled: vertex, fragment, and compute Each shader must have "void main" as the entry point. The different types of shaders have different accessable keywords, most of which are prefixed with "GPU". For example, in a vertex shader, "GPUPosition" / "GPUVertexIndex" The supported structures are: //Structs struct identifier{ int x; int y; }; //Function declarations float average(float x, float y){ return (x + y) / 2.0; } //Variable declarations vec2 positions; //Arrays float array[] = {0.0, 1.0, 3.141, 6.282}; --> <html> <head> <meta charset="utf-8"> <title>WebGPU Transpiler</title> <style> { margin: 0px; padding: 0px; } .container{ width: 100vw; height: 100vh; display: flex; flex-direction: column; } .labels{ display: flex; flex-basis: 10%; flex-grow: 0; } .labels div{ flex-grow: 1; text-align: center; } .editors{ display: flex; flex-basis: 90%; flex-grow: 0; height: 20px; padding: 10px; } #input, #output{ width: 100%; height: 100%; } #input{ margin-right: 5px; } #output{ margin-left: 5px; } </style> </head> <body> <script type='module'> console.clear(); window.log = function(value){ console.log(value); }; </script> <!-- HTML --> <div class='container'> <div class='labels'> <div>Input</div> <div>Output</div> </div> <div class='editors'> <div id='input'></div> <div id='output'></div> </div> </div> <!-- Editor creation --> <script type='module'> const stylesheet = document.createElement('style'); document.head.appendChild(stylesheet); stylesheet.type = 'text/css'; stylesheet.appendChild(document.createTextNode(` .editor-container { padding: 0px; margin: 0px; } .editor-container ::-webkit-scrollbar{ width: 0px; height: 0px; } .editor-container{ font-family: monospace; display: flex; } .editor-lines{ background-color: rgb(100, 100, 100); color: rgb(255, 255, 255); border-right: 1px solid rgb(150, 150, 150); overflow: auto; flex-basis: 2em; display: flex; flex-direction: column; text-align: right; padding-right: 2px; user-select: none; } .editor-text{ background-color: rgb(90, 90, 90); color: rgb(255, 255, 255); overflow: auto; white-space: nowrap; tab-size: 3; padding-left: 2px; flex-grow: 1; resize: none; } .editor-text:focus{ outline: none; } `)); window.createEditor = function(container, settings){ const editor = {}; //Elements editor.container = container; editor.container.classList.add('editor-container'); editor.lines = document.createElement('div'); editor.lines.classList.add('editor-lines'); container.appendChild(editor.lines); editor.text = document.createElement('textarea'); editor.text.classList.add('editor-text'); container.appendChild(editor.text); //Logic editor.text.spellcheck = false; editor.lines.onscroll = function(){ editor.text.scrollTop = editor.lines.scrollTop; }; editor.text.onscroll = function(){ editor.lines.scrollTop = editor.text.scrollTop; }; const lineMatch = /\n/g; editor.lineCount = 0; (editor.text.oninput = function(){ const text = editor.text.value; const count = 1 + (text.match(lineMatch) \|\| []).length; const difference = count - editor.lineCount; if (difference > 0){ for (let i = 1; i <= difference; i++){ const element = '<div>' + (editor.lineCount + i) + '</div>'; editor.lines.insertAdjacentHTML('beforeend', element); } } else if (difference < 0){ const n = -difference; for (let i = 0; i < n; i++){ editor.lines.removeChild(editor.lines.lastChild); } } editor.lineCount = count; })(); editor.text.onkeydown = function(event){ if (event.key === 'Tab'){ event.preventDefault(); document.execCommand('insertText', false, '\t'); } }; //Interface editor.size = function(width, height){ editor.container.style.width = width + 'px'; editor.container.style.height = height + 'px'; }; editor.value = function(source){ this.text.value = source; this.text.oninput(); }; return editor; } </script> <!-- Compiler --> <script type='module'> function Enum(array){ const obj = {}; array.forEach(function(name){ obj[name] = name; }); return obj; } const Class = Enum([ 'Token', 'Node' ]); const TokenType = Enum([ 'Identifier', 'Keyword', 'Boolean', 'Float', 'Int', 'Operator', 'Grammar' ]); const NodeType = Enum([ 'FunctionDeclarationArgument', 'FunctionDeclaration', 'FunctionCall', 'VariableDeclaration', 'StructDeclarationVariable', 'StructDeclaration', 'LiteralIndexed', 'LiteralOperation', 'ReturnStatement' ]); function isLiteralToken(token){ if (token.class !== Class.Token){ return false; } var type = token.type; return type === TokenType.Boolean \|\| type === TokenType.Float \|\| type === TokenType.Int; } const tokenizer = (function(){ const keywords = [ 'struct', 'return' ]; const operators = [ '+','-','','/','=' ]; const grammar = [ '(', ')', '{', '}', '[', ']', ';', ',', '.' ]; const spaceRegex = /\s/; const numberRegex = /\d/; const charRegex = /[a-zA-Z]/; function tokenize(string){ let index = 0; const end = string.length; const tokens = []; function current(){ return string[index]; } function consume(){ if (index >= end){ return ''; } return string[index++]; } function bounds(){ return index < end; } while(bounds()){ const start = consume(); //Skip space and comments if (spaceRegex.test(start) === true){ continue; } else if (start == '/'){ if (current() == '/'){ consume(); while(bounds()){ if (consume() == '\n'){ break; } } continue; } else if (current() == ''){ consume(); while(bounds()){ if (consume() == '' && consume() == '/'){ break; } } continue; } } const token = { class: Class.Token, type: null, value: start }; //Identifier / Keyword / Boolean if (charRegex.test(start) === true){ while(bounds()){ const next = current(); if (charRegex.test(next) \|\| numberRegex.test(next)){ token.value += consume(); } else{ break; } } token.type = TokenType.Identifier; if (token.value === 'true' \|\| token.value === 'false'){ token.type = TokenType.Boolean; } else if (keywords.includes(token.value) === true){ token.type = TokenType.Keyword; } } //Float / Int else if (numberRegex.test(start) === true \|\| start === '.'){ token.type = (start === '.') ? (TokenType.Float) : (TokenType.Int); while(bounds()){ const next = current(); if (numberRegex.test(next) === true){ token.value += consume(); } else if (next === '.'){ if (token.type === TokenType.Float){ throw "Double-decimal number not allowed"; } token.type = TokenType.FLOAT; token.value += consume(); } else{ break; } } } //Operator else if (operators.includes(start) === true){ token.type = TokenType.Operator; } //Grammar else if (grammar.includes(start) === true){ token.type = TokenType.Grammar; } if (token.type === null){ throw "Invalid character " + '"' + start + '"'; } tokens.push(token); } return tokens; } return function(source){ try{ return tokenize(source); } catch(error){ throw 'Lexer Error: ' + error; } }; })(); const parser = (function(){ function createNode(type){ return { class: Class.Node, type: type }; } const methods = { parseFunctionArgs: function(parser){ parser.expectValue('('); const args = []; while(!parser.tryValue(')')){ if (args.length !== 0){ parser.expectValue(','); } const node = createNode(NodeType.FunctionDeclarationArgument); node.datatype = parser.expectType(TokenType.Identifier); node.identifier = parser.expectType(TokenType.Identifier) args.push(node); } return args; }, parseBlock: function(parser){ parser.expectValue('{'); const block = []; while(!parser.tryValue('}')){ parser.parse(block); } return block; }, parseSSEval: function(parser){ const start = parser.consume(); //abc[index] if (parser.tryValue('[')){ const value = methods.parseEval(parser); parser.expectValue(']'); const node = createNode(NodeType.LiteralIndexed); node.identifier = start; node.index = value; return node; } //3.141 / 256 / true if (isLiteralToken(start)){ return start; } //abc if (start.type === TokenType.Identifier){ //abc(arg0, arg1...) if (parser.tryValue('(')){ const args = []; while (!parser.tryValue(')')){ if (args.length !== 0){ parser.expectValue(','); } args.push(methods.parseEval(parser)); } const node = createNode(NodeType.FunctionCall); node.identifier = start; node.arguments = args; return node; } //abc return start; } }, parseEval: function(parser){ const o1 = parser.tryType(TokenType.Operator); if (o1 !== null){ const node = createNode(NodeType.LiteralOperation); node.right = methods.parseSSEval(parser); node.operator = o1; return node; } else{ const left = methods.parseSSEval(parser); const operator = parser.tryType(TokenType.Operator); if (operator !== null){ const node = createNode(NodeType.LiteralOperation); node.left = left; node.right = methods.parseSSEval(parser); node.operator = operator; return node; } return left; } }, parseArray: function(parser){ parser.expectValue('{'); const array = []; while(!parser.tryValue('}')){ if (array.length !== 0){ parser.expectValue(','); } array.push(methods.parseEval(parser)); } return array; }, parseReturnStatement: function(parser){ const value = methods.parseEval(parser); parser.expectValue(';'); const node = createNode(NodeType.ReturnStatement); node.value = value; return node; }, parseStructVariable: function(parser){ const datatype = parser.expectType(TokenType.Identifier); const identifier = parser.expectType(TokenType.Identifier); parser.expectValue(';'); const node = createNode(NodeType.StructDeclarationVariable); node.datatype = datatype; node.identifier = identifier; return node; }, parseStructDeclaration: function(parser){ const identifier = parser.expectType(TokenType.Identifier); const left = parser.expectValue('{'); const declarations = []; while(!parser.tryValue('}')){ declarations.push(methods.parseStructVariable(parser)); } parser.expectValue(';'); const node = createNode(NodeType.StructDeclaration); node.identifier = identifier; node.declarations = declarations; return node; } }; const entry = { identifier: function(parser){ //Start by testing for operation const branch = methods.parseEval(parser); if (branch.class === Class.Node){ parser.expectValue(';'); return branch; } //Test for f(...) int f = ... if (branch.type === TokenType.Identifier){ //Either int f() or int x; const datatype = branch; const identifier = parser.expectType(TokenType.Identifier); //Function call if (parser.current().value == '('){ const args = methods.parseFunctionArgs(parser); const block = methods.parseBlock(parser); const node = createNode(NodeType.FunctionDeclaration); node.datatype = datatype; node.identifier = identifier; node.arguments = args; node.code = block; return node; } //Variable declaration else{ let isArray = false; if (parser.tryValue('[')){ parser.expectValue(']'); isArray = true; } const node = createNode(NodeType.VariableDeclaration); node.isArray = isArray; node.datatype = datatype; node.identifier = identifier; node.value = null; if (parser.tryValue(';')){ return node; } parser.expectValue('='); if (isArray === true){ node.value = methods.parseArray(parser); } else{ node.value = methods.parseEval(parser); } parser.expectValue(';'); return node; } } }, keyword: function(parser){ const keyword = parser.expectType(TokenType.Keyword); switch(keyword.value){ case 'return': return methods.parseReturnStatement(parser); case 'struct': return methods.parseStructDeclaration(parser); } } }; //Parsing function parse(tokens){ //Traversal let index = 0; const end = tokens.length; function bounds(){ return index < end; } function current(){ return tokens[index]; } function consume(){ return tokens[index++]; } function parse(block){ const start = current(); if (start.type == TokenType.Identifier){ block.push(entry.identifier(parser)); return; } if (start.type == TokenType.Keyword){ block.push(entry.keyword(parser)); return; } throw 'Unexpected sequence'; } const parser = { parse: parse, bounds: bounds, consume: consume, current: current, expectType: function(type){ const token = consume(); if (token.type !== type){ throw 'Expected token with type ' + type; } return token; }, expectValue: function(value){ const token = consume(); if (token.value !== value){ throw 'Expected token with value ' + value; } return token; }, tryType: function(type){ const token = current(); if (token.type === type){ return consume(); } return null; }, tryValue: function(value){ const token = current(); if (token.value === value){ return consume(); } return null; } }; //Entry const program = []; while(bounds()){ parse(program); } return program; } return function(tokens){ try{ return JSON.stringify(parse(tokens), 0, 3); } catch(error){ throw 'Parser Error: ' + error; } }; })(); window.compile = function(code, successHandler, errorHandler){ try{ successHandler(parser(tokenizer(code))); } catch(error){ errorHandler(error); } }; </script> <!-- Main --> <script type='module'> const input = createEditor(document.getElementById('input')); const output = createEditor(document.getElementById('output')); input.value( ` struct vertex{ vec3 position; vec2 uv; }; void main(){ vec2 positions[] = { vec2(0, 0), vec2(0, 0), vec2(0, 0) }; GPUPosition = vec4(positions[GPUIndex], 0, 1); } `); function update(){ compile( input.text.value, function(value){ //log(value); output.value(value); }, function(value){ //log(value); output.value(value); } ); } update(); input.text.addEventListener('input', update); </script> </body> </html>
Folds	33,760
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOvBtZ73Cgw
Votes	1
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Hurtin
Author Name	Hurtin
Author ID	kaid_567782721025930693177898
Author Profile Access	COACH

Archive Data

Added	7 months ago, 1715872425914
Updated	7 months ago, 1715872425914
Source Deleted	unknown