diff --git a/Source/blockly/patches/GEN_GLSL.js b/Source/blockly/patches/GEN_GLSL.js index cd02a3f..3062aad 100644 --- a/Source/blockly/patches/GEN_GLSL.js +++ b/Source/blockly/patches/GEN_GLSL.js @@ -118,6 +118,7 @@ function updateGLSL(event) { if (type == "matrix_2x") type = "mat2"; if (type == "matrix_3x") type = "mat3"; if (type == "matrix_4x") type = "mat4"; + if (type == "texture3d") type = "sampler3D"; let appendance = ""; @@ -147,7 +148,6 @@ function updateGLSL(event) { penPlus.Generated_GLSL = penPlus.monacoEditor.getValue(); penPlus.dispatchEvent("onMainScriptCompiled"); } - penPlus.Generated_Frag = ""; penPlus.Generated_Vert = ""; diff --git a/Source/blockly/patches/extensionFormat.js b/Source/blockly/patches/extensionFormat.js index 31c2791..3ce3d3b 100644 --- a/Source/blockly/patches/extensionFormat.js +++ b/Source/blockly/patches/extensionFormat.js @@ -258,6 +258,7 @@ penPlus.penPlusExtension = class { if (type == "matrix_2x") type = "mat2"; if (type == "matrix_3x") type = "mat3"; if (type == "matrix_4x") type = "mat4"; + if (type == "texture3d") type = "sampler3D"; let scope = variable.name.split(" ")[0]; if (scope != "hat") return; @@ -265,7 +266,7 @@ penPlus.penPlusExtension = class { if (!variable.name.split(" ")[1]) return; //Types that don't have precision - if (variable.type == "texture" || variable.type == "cubemap" || variable.type == "int") returnedGLSL += `${type} ${variable.name.split(" ")[1]} = ${type}(1);\n`; + if (variable.type == "texture" || variable.type == "cubemap" || variable.type == "int" || variable.type == "sampler3D") returnedGLSL += `${type} ${variable.name.split(" ")[1]} = ${type}(1);\n`; else returnedGLSL += `highp ${type} ${variable.name.split(" ")[1]} = ${type}(1);\n`; }); diff --git a/Source/blocks/looks.js b/Source/blocks/looks.js index 5665d3a..690e9ba 100644 --- a/Source/blocks/looks.js +++ b/Source/blocks/looks.js @@ -5,7 +5,7 @@ getInfo() { penPlus.addBlockColorSet("texture_blocks", "#b464e7", "#a755cf", "#9a48c4"); penPlus.addBlockColorSet("cubemap_blocks", "#8672ff", "#7465d6", "#6657cb"); - penPlus.addBlockColorSet("3DTexture_blocks", "#967FD7", "#8771C4", "#7760B5"); + penPlus.addBlockColorSet("texture3d_blocks", "#967FD7", "#8771C4", "#7760B5"); return { name: "Looks", id: "looks", diff --git a/Source/blocks/variables.js b/Source/blocks/variables.js index 61ded5f..47a36c5 100644 --- a/Source/blocks/variables.js +++ b/Source/blocks/variables.js @@ -417,11 +417,7 @@ const variable = block.getFieldValue("VAR"); const variableName = variable.split(" ")[1]; - const variableType = variable.split(" ")[2]; - - if (variableType == "matrix_2x") variableType = "mat2"; - if (variableType == "matrix_3x") variableType = "mat3"; - if (variableType == "matrix_4x") variableType = "mat4"; + let variableType = variable.split(" ")[2]; const value = generator.valueToCode(block, "VALUE", Order.ATOMIC); @@ -431,6 +427,10 @@ block.setStyle(__colorVariableBlock(variableType)); + if (variableType == "matrix_2x") variableType = "mat2"; + if (variableType == "matrix_3x") variableType = "mat3"; + if (variableType == "matrix_4x") variableType = "mat4"; + return `${variableName} = ${variableType}(${value});\n` + nextBlockToCode(block, generator); } @@ -641,8 +641,8 @@ ${(penPlus.is300Version && penPlus.experimental) ? ` -
-
+
+

3D Texture

@@ -780,9 +780,9 @@ }; if ((penPlus.is300Version && penPlus.experimental)) { - variableTypeChangers.texture3D = document.getElementById("texture3D"); - variableTypeChangers.texture3D.onclick = () => { - cycleVariable("texture3D"); + variableTypeChangers.texture3d = document.getElementById("texture3d"); + variableTypeChangers.texture3d.onclick = () => { + cycleVariable("texture3d"); setScopeVisibilities(false, true, false, false, false); } } diff --git a/Source/css/syntaxHighlighting.css b/Source/css/syntaxHighlighting.css index f3f45f6..9571c49 100644 --- a/Source/css/syntaxHighlighting.css +++ b/Source/css/syntaxHighlighting.css @@ -30,6 +30,10 @@ color: var(--texture_blocks); } +.texture3d_Highlight { + color: var(--texture3d_blocks); +} + .cubemap_Highlight { color: var(--cubemap_blocks); } diff --git a/Source/editor/buttons/settings.js b/Source/editor/buttons/settings.js index b63cbc5..91b68c7 100644 --- a/Source/editor/buttons/settings.js +++ b/Source/editor/buttons/settings.js @@ -313,6 +313,14 @@
+
+
+ +
+
`); @@ -388,6 +396,7 @@ matrix: document.getElementById("matrixColor"), texture: document.getElementById("textureColor"), + texture3d: document.getElementById("texture3dColor"), cubemap: document.getElementById("cubemapColor"), }; diff --git a/Source/editor/compileTime/shaders.js b/Source/editor/compileTime/shaders.js index 536afe9..c483d43 100644 --- a/Source/editor/compileTime/shaders.js +++ b/Source/editor/compileTime/shaders.js @@ -137,6 +137,31 @@ function getTypedInput(type, name, index) { return input; + case "sampler3D": + keys = Object.keys(penPlus.textures3d); + + input = document.createElement("select"); + input.style.width = "75%"; + input.className = "scratchStyledInput"; + + //Loop through textures to add them to the list + options = ""; + keys.forEach((key) => { + options += ``; + }); + + input.innerHTML = options; + + if (penPlus.previousVariableStates[name]) input.value = penPlus.previousVariableStates[name]; + gl.shaders.editorShader.uniforms[name].value = penPlus.previousVariableStates[name] ? penPlus.previousVariableStates[name] : penPlus.textures3d[input.value]; + + input.addEventListener("change", () => { + gl.shaders.editorShader.uniforms[name].value = penPlus.textures3d[input.value]; + penPlus.previousVariableStates[name] = input.value; + }); + + return input; + case "float": input = document.createElement("input"); input.style.width = "75%"; @@ -768,10 +793,10 @@ function genProgram() { } return; } - //Handle non arrays if (!refreshedPoints) gl.shaders["editorShader"].setupUniform(attribute.name, attribute.type); + //Remove pen+ uniforms that are static if (attribute.name != "u_timer" && attribute.name != "u_res" && attribute.name != "u_transform") { let divElement = document.createElement("div"); diff --git a/Source/editor/lib/glslHighlight.js b/Source/editor/lib/glslHighlight.js index 958adea..6f5b10d 100644 --- a/Source/editor/lib/glslHighlight.js +++ b/Source/editor/lib/glslHighlight.js @@ -1,58 +1,94 @@ penPlus.setupMonacoTheme = () => { monaco.languages.register({ id: "glsl" }); - + const mainTypes = [ + [/(\/\/.*)/, "comment"], + [/\/\*/, 'comment', '@comment'], + + [/(float+)/, "variable"], + [/(int+)/, "int"], + + [/(vec2+)/, "vec-two"], + [/(vec3+)/, "vec-three"], + [/(vec4+)/, "vec-four"], + + [/(mat2+)/, "matrix"], + [/(mat3+)/, "matrix"], + [/(mat4+)/, "matrix"], + + [/(lowp+)/, "precision"], + [/(mediump+)/, "precision"], + [/(highp+)/, "precision"], + ]; + const inFunctions = [ + [/([\{])/, "controls", "@controls"], + + [/(>=+)/, "operator"], + [/(<=+)/, "operator"], + [/(>>+)/, "operator"], + [/(<<+)/, "operator"], + [/(<+)/, "operator"], + [/(>+)/, "operator"], + [/(==+)/, "operator"], + [/(!=+)/, "operator"], + [/(=+)/, "operator"], + + [/(\+=+)/, "operator"], + [/(\/=+)/, "operator"], + [/(\-=+)/, "operator"], + [/(\*=+)/, "operator"], + + [/(\/+)/, "operator"], + [/(\*+)/, "operator"], + [/(\++)/, "operator"], + [/(\-+)/, "operator"], + + [/(\|\|+)/, "operator"], + [/(\&\&+)/, "operator"], + [/(\^\^+)/, "operator"], + + [/(\|+)/, "operator"], + [/(\&+)/, "operator"], + [/(\^+)/, "operator"], + ...mainTypes, + + [/return/, "my-blocks"], + [/discard/, "my-blocks"], + [/((?:^|\W)if(?:$|\W))/, "controls"], + [/((?:^|\W)else(?:$|\W))/, "controls"], + [/((?:^|\W)switch(?:$|\W))/, "controls"], + [/((?:^|\W)case(?:$|\W))/, "controls"], + [/((?:^|\W)for(?:$|\W))/, "controls"], + [/((?:^|\W)while(?:$|\W))/, "controls"], + [/((?:^|\W)do(?:$|\W))/, "controls"], + [/(break+)/, "controls"], + [/(continue+)/, "controls"], + [/\(/, "my-blocks"], + [/\)/, "my-blocks"], + ] + monaco.languages.setLanguageConfiguration("glsl", { + autoClosingPairs: [ + { open: '{', close: '}' }, + { open: '[', close: ']' }, + { open: '(', close: ')' }, + ], + folding: { + markers: { + start: /{/, + end: /}/ + } + } + }) monaco.languages.setMonarchTokensProvider("glsl", { tokenizer: { root: [ - [/(\/\/.*)/, "comment"], - [/\/\*/, 'comment', '@comment'], [/layout.*\(.*location.*=.*\d\)/,"operator"], - - [/(float+)/, "variable"], - [/(int+)/, "int"], - - [/(vec2+)/, "vec-two"], - [/(vec3+)/, "vec-three"], - [/(vec4+)/, "vec-four"], - - [/(mat2+)/, "matrix"], - [/(mat3+)/, "matrix"], - [/(mat4+)/, "matrix"], + ...mainTypes, [/(sampler2D+)/, "texture"], + [/(sampler3D+)/, "texture3d"], [/(samplerCube+)/, "cubemap"], - [/([\{\}])/, "controls"], - - [/(>=+)/, "operator"], - [/(<=+)/, "operator"], - [/(>>+)/, "operator"], - [/(<<+)/, "operator"], - [/(<+)/, "operator"], - [/(>+)/, "operator"], - [/(==+)/, "operator"], - [/(!=+)/, "operator"], - [/(=+)/, "operator"], - - [/(\+=+)/, "operator"], - [/(\/=+)/, "operator"], - [/(\-=+)/, "operator"], - [/(\*=+)/, "operator"], - - [/(\/+)/, "operator"], - [/(\*+)/, "operator"], - [/(\++)/, "operator"], - [/(\-+)/, "operator"], - - [/(\|\|+)/, "operator"], - [/(\&\&+)/, "operator"], - [/(\^\^+)/, "operator"], - - [/(\|+)/, "operator"], - [/(\&+)/, "operator"], - [/(\^+)/, "operator"], - [/(\d+\.\d+)/, "operator"], [/(\d+\.)/, "operator"], [/(\.\d+)/, "operator"], @@ -61,35 +97,39 @@ penPlus.setupMonacoTheme = () => { [/(true+)/, "operator"], [/(false+)/, "operator"], - [/(lowp+)/, "precision"], - [/(mediump+)/, "precision"], - [/(highp+)/, "precision"], + ...mainTypes, [/(varying+)/, "precision"], [/(attribute+)/, "precision"], [/(uniform+)/, "precision"], - [/((?:^|\W)if(?:$|\W))/, "controls"], - [/((?:^|\W)else(?:$|\W))/, "controls"], - [/((?:^|\W)switch(?:$|\W))/, "controls"], - [/((?:^|\W)case(?:$|\W))/, "controls"], - [/((?:^|\W)for(?:$|\W))/, "controls"], - [/((?:^|\W)while(?:$|\W))/, "controls"], - [/((?:^|\W)do(?:$|\W))/, "controls"], [/([\w_]*\s*)\(/, "my-blocks"], [/\)/, "my-blocks"], - [/(return+)/, "my-blocks"], - [/(discard+)/, "my-blocks"], - [/(break+)/, "my-blocks"], - [/(continue+)/, "my-blocks"], - [/(void+)/, "my-blocks"], + [/void/, "my-blocks"], + [/struct/, "struct", "@struct"], + [/{/,"my-blocks", "@myblock"], + ], + struct: [ + ...mainTypes, + + [/{/, 'struct'], + [/}/, 'struct', '@pop'], + ], + myblock: [ + [/}/, 'my-blocks', '@pop'], + ...inFunctions, + ], + controls: [ + [/}/, 'controls', '@pop'], + ...inFunctions, + ] + , + comment: [ + [/[^\/*]+/, 'comment'], + ['\\*/', 'comment', '@pop'], + [/[\/*]/, 'comment'] ], - comment: [ - [/[^\/*]+/, 'comment'], - ['\\*/', 'comment', '@pop'], - [/[\/*]/, 'comment'] - ], }, }); @@ -109,6 +149,7 @@ penPlus.setupMonacoTheme = () => { token: "variable", foreground: penPlus.penPlusTheme.blockStyles["variables_blocks"].colourPrimary, }, + { token: "int", foreground: penPlus.penPlusTheme.blockStyles["int_blocks"].colourPrimary, @@ -136,6 +177,10 @@ penPlus.setupMonacoTheme = () => { token: "texture", foreground: penPlus.penPlusTheme.blockStyles["texture_blocks"].colourPrimary, }, + { + token: "texture3d", + foreground: penPlus.penPlusTheme.blockStyles["texture3d_blocks"].colourPrimary, + }, { token: "cubemap", foreground: penPlus.penPlusTheme.blockStyles["cubemap_blocks"].colourPrimary, @@ -162,12 +207,17 @@ penPlus.setupMonacoTheme = () => { token: "precision", foreground: penPlus.penPlusTheme.blockStyles["colors_blocks"].colourPrimary, }, + + { + token: "struct", + foreground: penPlus.experimental?penPlus.penPlusTheme.blockStyles["structs_blocks"].colourPrimary:'#ffffff', + }, ], colors: { "editor.foreground": penPlus.editorTheme == "dark" ? "#efefef" : "#1f1f1f", }, }); } - + penPlus.updateMonacoTheme(); }; diff --git a/Source/media/Textures.json b/Source/media/Textures.json index 3d4ef9d..22ce220 100644 --- a/Source/media/Textures.json +++ b/Source/media/Textures.json @@ -1,14 +1,29 @@ [ - { - "name": "Checkerboard", - "src": "media/images/textures/Checkerboard.png" - }, - { - "name": "MANDRILL", - "src": "media/images/textures/Mandrill.png" - }, - { - "name": "Pepper", - "src": "media/images/textures/Peppers.png" - } + { + "name": "Checkerboard", + "src": "media/images/textures/Checkerboard.png", + "type": "texture" + }, + { + "name": "MANDRILL", + "src": "media/images/textures/Mandrill.png", + "type": "texture" + }, + { + "name": "Pepper", + "src": "media/images/textures/Peppers.png", + "type": "texture" + }, + { + "name": "grid", + "src": "media/images/3dimages/grid3d.png", + "type": "3d", + "dimensions": [8, 8, 8] + }, + { + "name": "torus", + "src": "media/images/3dimages/torus.png", + "type": "3d", + "dimensions": [16, 16, 16] + } ] \ No newline at end of file diff --git a/Source/media/images/3dimages/grid3d.png b/Source/media/images/3dimages/grid3d.png new file mode 100644 index 0000000..017c909 Binary files /dev/null and b/Source/media/images/3dimages/grid3d.png differ diff --git a/Source/media/images/3dimages/torus.png b/Source/media/images/3dimages/torus.png new file mode 100644 index 0000000..2647abd Binary files /dev/null and b/Source/media/images/3dimages/torus.png differ diff --git a/Source/previewStuff/previewTexture.js b/Source/previewStuff/previewTexture.js index 5efd864..68740dc 100644 --- a/Source/previewStuff/previewTexture.js +++ b/Source/previewStuff/previewTexture.js @@ -2,6 +2,7 @@ penPlus.shaderParams = penPlus.shaderParams || {}; penPlus.textures = {}; + penPlus.textures3d = {}; fetch("media/Textures.json").then(request => request.json()).then(json => { penPlus.shaderParams.sampleTextures = json; @@ -10,19 +11,35 @@ for (let keyID = 0; keyID < textureKeys.length; keyID++) { const textureData = penPlus.shaderParams.sampleTextures[textureKeys[keyID]]; - penPlus.textures[textureData.name] = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, penPlus.textures[textureData.name]); + if (textureData.type == "texture") { + penPlus.textures[textureData.name] = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, penPlus.textures[textureData.name]); - const image = new Image(); - image.src = textureData.src; + const image = new Image(); + image.src = textureData.src; - image.onload = () => { - gl.bindTexture(gl.TEXTURE_2D, penPlus.textures[textureData.name]); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); + image.onload = () => { + gl.bindTexture(gl.TEXTURE_2D, penPlus.textures[textureData.name]); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); + + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + }; + } else { + penPlus.textures3d[textureData.name] = gl.createTexture(); + //gl.bindTexture(gl.TEXTURE_3D, penPlus.textures3d[textureData.name]); + + const image = new Image(); + image.src = textureData.src; + + image.onload = () => { + gl.bindTexture(gl.TEXTURE_3D, penPlus.textures3d[textureData.name]); + gl.texImage3D(gl.TEXTURE_3D, 0, gl.RGBA, ...textureData.dimensions, 0, gl.RGBA, gl.UNSIGNED_BYTE, image); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); - }; + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + }; + } } }); })(); diff --git a/Source/render/DAVE_SHADE.js b/Source/render/DAVE_SHADE.js index ddf9fea..365e0bd 100644 --- a/Source/render/DAVE_SHADE.js +++ b/Source/render/DAVE_SHADE.js @@ -138,6 +138,14 @@ GL.uniform1i(GL.shaders[name].uniforms[uniformName].location, GL.shaders[name].uniforms[uniformName].textureID); break; + case "sampler3D": + if (!val || typeof val != "object") return; + + GL.activeTexture(GL[`TEXTURE${GL.shaders[name].uniforms[uniformName].textureID}`]); + + GL.bindTexture(GL.TEXTURE_3D, val); + GL.uniform1i(GL.shaders[name].uniforms[uniformName].location, GL.shaders[name].uniforms[uniformName].textureID); + break; default: if (!val || typeof val != "object") return; @@ -192,6 +200,11 @@ GL.shaders[name].uniforms[uniformName].textureID = Number(GL.shaders[name].textureID); GL.shaders[name].textureID += 1; break; + + case "sampler3D": + GL.shaders[name].uniforms[uniformName].textureID = Number(GL.shaders[name].textureID); + GL.shaders[name].textureID += 1; + break; case "samplerCube": GL.shaders[name].uniforms[uniformName].textureID = Number(GL.shaders[name].textureID); diff --git a/Source/render/defaultShader.js b/Source/render/defaultShader.js index 6e18de7..20166c3 100644 --- a/Source/render/defaultShader.js +++ b/Source/render/defaultShader.js @@ -6,6 +6,9 @@ //These functions are here and are written for the GLSL 3.0 specification. //You can revert it to GLSL 1.0 by removing the version number +precision highp float; +// defualt precision for floats + //our output for color out highp vec4 fragColor;\n` : "") + `//Base Variables @@ -31,37 +34,37 @@ highp float log10(highp float a) { } highp float eulernum(highp float a) { - return 2.718 * a; + return 2.718 * a; } //Psuedorandomness highp vec4 pcg4d(highp vec4 v) { - v = v * 1664525.0 + 1013904223.0; - - v.x += v.y*v.w; - v.y += v.z*v.x; - v.z += v.x*v.y; - v.w += v.y*v.z; - - v.x += v.z*v.w; - v.y += v.y*v.x; - v.z += v.x*v.w; - v.w += v.y*v.x; - - return vec4(v); + v = v * 1664525.0 + 1013904223.0; + + v.x += v.y*v.w; + v.y += v.z*v.x; + v.z += v.x*v.y; + v.w += v.y*v.z; + + v.x += v.z*v.w; + v.y += v.y*v.x; + v.z += v.x*v.w; + v.w += v.y*v.x; + + return vec4(v); } highp vec4 daveRandomRange(highp float lowR, highp float highR) { - lowp float r = (gl_FragCoord.x * 50.25313532) + (gl_FragCoord.y * 21.5453) + u_timer; - highp float randomizer = r*r/u_timer/5398932.234523; - return clamp(vec4( - fract(sin(mod(randomizer*(91.3458), 1440.0)) * 47453.5453), - fract(sin(mod(randomizer*(80.3458), 1440.0)) * 48456.5453), - fract(sin(mod(randomizer*(95.3458), 1440.0)) * 42457.5453), - fract(sin(mod(randomizer*(85.3458), 1440.0)) * 47553.5453) - ), lowR, highR); + lowp float r = (gl_FragCoord.x * 50.25313532) + (gl_FragCoord.y * 21.5453) + u_timer; + highp float randomizer = r*r/u_timer/5398932.234523; + return clamp(vec4( + fract(sin(mod(randomizer*(91.3458), 1440.0)) * 47453.5453), + fract(sin(mod(randomizer*(80.3458), 1440.0)) * 48456.5453), + fract(sin(mod(randomizer*(95.3458), 1440.0)) * 42457.5453), + fract(sin(mod(randomizer*(85.3458), 1440.0)) * 47553.5453) + ), lowR, highR); } highp vec4 HSVToRGB(highp float hue, highp float saturation, highp float value, highp float a) {