├── demos
    ├── .vscode
    │   └── settings.json
    ├── common
    │   ├── math-common.glsl
    │   └── blobby.glsl
    ├── horizon.jpg
    ├── outfoxing.mp3
    ├── cubemap
    │   ├── yokohama_d.jpg
    │   ├── yokohama_e.jpg
    │   ├── yokohama_n.jpg
    │   ├── yokohama_s.jpg
    │   ├── yokohama_u.jpg
    │   ├── yokohama_w.jpg
    │   └── readme.txt
    ├── raymarcher_88.glsl
    ├── glslify.glsl
    ├── uv-warp.glsl
    ├── multipass.glsl
    ├── duck.glsl
    ├── blending.glsl
    ├── swirl_spin.glsl
    ├── bouncing.glsl
    ├── frame.glsl
    ├── plasma1.glsl
    ├── mouse.glsl
    ├── volume_points_0.glsl
    ├── blobby.glsl
    ├── feedback.glsl
    ├── buffer_a.glsl
    ├── audio.glsl
    ├── digital.glsl
    ├── volume_points_1.glsl
    ├── volume_points_common.glsl
    ├── cubemap.glsl
    ├── keyboard.glsl
    ├── fly_controls.glsl
    └── metaballs.glsl
├── .gitignore
├── images
    ├── example.png
    ├── example2.png
    └── example3.png
├── resources
    ├── play.png
    ├── pause.png
    ├── record.png
    ├── reload.png
    ├── screen.png
    ├── thumb.png
    ├── stop_rec.png
    └── stats.min.js
├── .vscode
    ├── .browse.VC.db
    ├── .browse.VC.db-wal
    ├── extensions.json
    ├── tasks.json
    ├── settings.json
    └── launch.json
├── src
    ├── extensions
    │   ├── webview_extension.ts
    │   ├── textures
    │   │   ├── texture_extension_extension.ts
    │   │   └── textures_init_extension.ts
    │   ├── audio
    │   │   ├── audio_pause_extension.ts
    │   │   ├── audio_resume_extension.ts
    │   │   ├── no_audio_extension.ts
    │   │   ├── audio_update_extension.ts
    │   │   └── audio_init_extension.ts
    │   ├── pause_whole_render_extension.ts
    │   ├── user_interface
    │   │   ├── reload_button_extension.ts
    │   │   ├── record_button_extension.ts
    │   │   ├── screenshot_button_extension.ts
    │   │   ├── pause_button_extension.ts
    │   │   ├── record_video_codec_extension.ts
    │   │   ├── record_max_duration_extension.ts
    │   │   ├── record_target_framerate_extension.ts
    │   │   ├── record_video_bit_rate_extension.ts
    │   │   ├── record_offline_format_extension.ts
    │   │   ├── record_offline_quality_extension.ts
    │   │   ├── record_video_container_extension.ts
    │   │   ├── screenshot_button_style_extension.ts
    │   │   ├── error_display
    │   │   │   ├── glslify_errors_extension.ts
    │   │   │   ├── default_errors_extension.ts
    │   │   │   └── diagnostics_errors_extension.ts
    │   │   ├── reload_button_style_extension.ts
    │   │   ├── record_button_style_extension.ts
    │   │   └── pause_button_style_extension.ts
    │   ├── initial_time_extension.ts
    │   ├── initial_paused_extension.ts
    │   ├── forced_aspect_extension.ts
    │   ├── advance_time_extension.ts
    │   ├── buffers
    │   │   ├── includes_test_compile_extension.ts
    │   │   ├── includes_init_extension.ts
    │   │   ├── includes_extension.ts
    │   │   ├── shaders_extension.ts
    │   │   └── buffers_init_extension.ts
    │   ├── initial_fly_control_position_extension.ts
    │   ├── initial_fly_control_rotation_extension.ts
    │   ├── forced_screenshot_resolution_extension.ts
    │   ├── initial_normalized_mouse_extension.ts
    │   ├── initial_mouse_extension.ts
    │   ├── advance_time_if_not_paused_extension.ts
    │   ├── packages
    │   │   ├── three_extension.ts
    │   │   ├── jquery_extension.ts
    │   │   ├── dat_gui_extension.ts
    │   │   ├── ccapture_extension.ts
    │   │   ├── stats_extension.ts
    │   │   └── three_flycontrols.ts
    │   ├── keyboard
    │   │   ├── keyboard_update_extension.ts
    │   │   ├── keyboard_init_extension.ts
    │   │   ├── keyboard_callbacks_extension.ts
    │   │   └── keyboard_shader_extension.ts
    │   ├── uniforms
    │   │   ├── uniforms_preamble_extension.ts
    │   │   ├── uniforms_update_extension.ts
    │   │   └── uniforms_init_extension.ts
    │   └── preamble_extension.ts
    ├── utility.ts
    ├── webviewcontent.ts
    ├── typenames.ts
    ├── webviewcontentassembler.ts
    ├── shaderstream.ts
    ├── extension.ts
    ├── context.ts
    ├── shaderlexer.ts
    └── shadertoymanager.ts
├── .vscodeignore
├── test
    ├── run_tests.ts
    └── index.ts
├── tsconfig.json
├── .eslintrc.json
├── webpack.config.js
├── .github
    └── workflows
    │   ├── Publish.yml
    │   └── BuildAndTest.yml
├── LICENSE.md
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
└── package.json


/demos/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/demos/common/math-common.glsl:
--------------------------------------------------------------------------------
1 | const float PI = 3.14159;


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | out
2 | node_modules
3 | *.browse.VC.db*
4 | .vscode-test
5 | dist
6 | *.vsix
7 | 


--------------------------------------------------------------------------------
/demos/horizon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/demos/horizon.jpg


--------------------------------------------------------------------------------
/images/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/images/example.png


--------------------------------------------------------------------------------
/resources/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/resources/play.png


--------------------------------------------------------------------------------
/demos/outfoxing.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/demos/outfoxing.mp3


--------------------------------------------------------------------------------
/images/example2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/images/example2.png


--------------------------------------------------------------------------------
/images/example3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/images/example3.png


--------------------------------------------------------------------------------
/resources/pause.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/resources/pause.png


--------------------------------------------------------------------------------
/resources/record.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/resources/record.png


--------------------------------------------------------------------------------
/resources/reload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/resources/reload.png


--------------------------------------------------------------------------------
/resources/screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/resources/screen.png


--------------------------------------------------------------------------------
/resources/thumb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/resources/thumb.png


--------------------------------------------------------------------------------
/.vscode/.browse.VC.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/.vscode/.browse.VC.db


--------------------------------------------------------------------------------
/resources/stop_rec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/resources/stop_rec.png


--------------------------------------------------------------------------------
/.vscode/.browse.VC.db-wal:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/.vscode/.browse.VC.db-wal


--------------------------------------------------------------------------------
/demos/cubemap/yokohama_d.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/demos/cubemap/yokohama_d.jpg


--------------------------------------------------------------------------------
/demos/cubemap/yokohama_e.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/demos/cubemap/yokohama_e.jpg


--------------------------------------------------------------------------------
/demos/cubemap/yokohama_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/demos/cubemap/yokohama_n.jpg


--------------------------------------------------------------------------------
/demos/cubemap/yokohama_s.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/demos/cubemap/yokohama_s.jpg


--------------------------------------------------------------------------------
/demos/cubemap/yokohama_u.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/demos/cubemap/yokohama_u.jpg


--------------------------------------------------------------------------------
/demos/cubemap/yokohama_w.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevensona/shader-toy/HEAD/demos/cubemap/yokohama_w.jpg


--------------------------------------------------------------------------------
/src/extensions/webview_extension.ts:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | export interface WebviewExtension {
4 |     generateContent(): string;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/extensions/textures/texture_extension_extension.ts:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | export interface TextureExtensionExtension {
4 |     generateTextureContent(): string;
5 | }
6 | 


--------------------------------------------------------------------------------
/.vscodeignore:
--------------------------------------------------------------------------------
 1 | .vscode
 2 | typings
 3 | out
 4 | test
 5 | src
 6 | node_modules
 7 | images
 8 | **/*.map
 9 | .gitignore
10 | tsconfig.json
11 | tslint.json
12 | webpack.config.js
13 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | 	// See http://go.microsoft.com/fwlink/?LinkId=827846
3 | 	// for the documentation about the extensions.json format
4 | 	"recommendations": [
5 | 		"ms-vscode.vscode-typescript-tslint-plugin"
6 | 	]
7 | }


--------------------------------------------------------------------------------
/demos/common/blobby.glsl:
--------------------------------------------------------------------------------
 1 | #include "math-common.glsl"
 2 | 
 3 | #ifndef saturate
 4 | #define saturate(x) (clamp(x, 0., 1.))
 5 | #endif
 6 | 
 7 | vec2 rotate(vec2 p, float t)
 8 | {
 9 |     return mat2(cos(t), -sin(t), sin(t), cos(t)) * p;
10 | }


--------------------------------------------------------------------------------
/demos/cubemap/readme.txt:
--------------------------------------------------------------------------------
 1 | Author
 2 | ======
 3 | 
 4 | This is the work of Emil Persson, aka Humus.
 5 | http://www.humus.name
 6 | 
 7 | 
 8 | 
 9 | License
10 | =======
11 | 
12 | This work is licensed under a Creative Commons Attribution 3.0 Unported License.
13 | http://creativecommons.org/licenses/by/3.0/
14 | 


--------------------------------------------------------------------------------
/src/extensions/audio/audio_pause_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class AudioPauseExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return 'audioContext.suspend();';
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/extensions/audio/audio_resume_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class AudioResumeExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return 'audioContext.resume();';
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/extensions/pause_whole_render_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from './webview_extension';
 4 | 
 5 | export class PauseWholeRenderExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return 'if (paused) return;';
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/reload_button_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class ReloadButtonExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return '<span id=\'reload\'></span>';
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/extensions/audio/no_audio_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class NoAudioExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | const audioContext = {
 9 |     sampleRate: 0
10 | };`;
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/record_button_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class RecordButtonExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return '<span id=\'record\' class=\'rec_base\'></span>';
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/screenshot_button_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class ScreenshotButtonExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return '<span id=\'screenshot\' class=\'rec_base\'></span>';
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/utility.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | export function removeDuplicates<T>(array: T[]): T[] {
 4 |     const map = new Map<T, void>();
 5 |     const newArray: T[] = [];
 6 |     for (const value of array) {
 7 |         if (map.get(value) === undefined) {
 8 |             newArray.push(value);
 9 |             map.set(value);
10 |         }
11 |     }
12 |     return newArray;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/pause_button_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class PauseButtonExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | <label class='button-container'>
 9 | <input id='pause-button' type='checkbox'>
10 | <span class='pause-play'></span>`;
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/extensions/initial_time_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from './webview_extension';
 4 | 
 5 | export class InitialTimeExtension implements WebviewExtension {
 6 |     private initialTime: number;
 7 | 
 8 |     constructor(initialTime: number) {
 9 |         this.initialTime = initialTime;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `${this.initialTime}`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/demos/raymarcher_88.glsl:
--------------------------------------------------------------------------------
 1 | // Created by Xor - https://www.shadertoy.com/view/ld2BWK
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | #StrictCompatibility
 5 | 
 6 | #define mainImage(O,I)         \
 7 |                         O -= O;\
 8 |        for (int i; i++ < 99;)\
 9 | O += ( length(cos(O/.1)) - 1.1)\
10 | * vec4( I/1e4, .1, 0)
11 | 
12 | //82 Character version:       
13 | //#define mainImage(O,I) for(int i;i++<99;)O+=(length(cos(O/.1))-1.)*vec4(I/1e4,.1,0)


--------------------------------------------------------------------------------
/demos/glslify.glsl:
--------------------------------------------------------------------------------
 1 | // Example shader created for VS Code ShaderToy extension
 2 | 
 3 | #pragma glslify: snoise = require('glsl-noise/simplex/2d')
 4 | 
 5 | float noise(in vec2 pt) {
 6 |     return snoise(pt) * 0.5 + 0.5;
 7 | }
 8 | 
 9 | void main () {
10 |     float r = noise(gl_FragCoord.xy * 0.01);
11 |     float g = noise(gl_FragCoord.xy * 0.01 + 100.0);
12 |     float b = noise(gl_FragCoord.xy * 0.01 + 300.0);
13 |     gl_FragColor = vec4(r, g, b, 1);
14 | }


--------------------------------------------------------------------------------
/src/extensions/initial_paused_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from './webview_extension';
 4 | 
 5 | export class InitialPausedExtension implements WebviewExtension {
 6 |     private initialPaused: boolean;
 7 | 
 8 |     constructor(initialPaused: boolean) {
 9 |         this.initialPaused = initialPaused;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `${this.initialPaused}`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558
 2 | // for the documentation about the tasks.json format
 3 | {
 4 | 	"version": "2.0.0",
 5 | 	"tasks": [
 6 | 		{
 7 | 			"type": "npm",
 8 | 			"script": "watch",
 9 | 			"problemMatcher": "$tsc-watch",
10 | 			"isBackground": true,
11 | 			"presentation": {
12 | 				"reveal": "never"
13 | 			},
14 | 			"group": {
15 | 				"kind": "build",
16 | 				"isDefault": true
17 | 			}
18 | 		}
19 | 	]
20 | }
21 | 


--------------------------------------------------------------------------------
/demos/uv-warp.glsl:
--------------------------------------------------------------------------------
 1 | // Example shader created for VS Code ShaderToy extension
 2 | 
 3 | void main() {
 4 |     vec2 uv = gl_FragCoord.xy / iResolution.xy;
 5 |  
 6 |     for (float i = 1.0; i < 10.0; i++) {
 7 |         float v = 0.1 * sin((uv.r + uv.g) * 0.5 * i + iTime) / i;
 8 |         float u = 0.1 * cos((uv.r - uv.g) * 0.5 * i + iTime) / i;
 9 | 
10 |         uv += vec2(u, v);
11 |     }
12 | 
13 |     uv = fract(uv);
14 | 
15 |     gl_FragColor = vec4(uv, 1.0, 1.0);
16 | }


--------------------------------------------------------------------------------
/src/extensions/forced_aspect_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from './webview_extension';
 4 | 
 5 | export class ForcedAspectExtension implements WebviewExtension {
 6 |     private forcedAspect: [ number, number ];
 7 | 
 8 |     constructor(forcedAspect: [ number, number ]) {
 9 |         this.forcedAspect = forcedAspect;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `${this.forcedAspect}`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/demos/multipass.glsl:
--------------------------------------------------------------------------------
 1 | // Example shader created for VS Code ShaderToy extension
 2 | 
 3 | #iChannel0 "file://horizon.jpg"
 4 | #iChannel1 "file://uv-warp.glsl"
 5 | 
 6 | #iChannel1::MinFilter "Nearest"
 7 | #iChannel1::MagFilter "Nearest"
 8 | 
 9 | void main() {
10 |     vec2 uv = gl_FragCoord.xy / iResolution.xy;
11 |     
12 |     vec2 uvWarped = texture2D(iChannel1, uv).rg;
13 |     vec3 pattern = texture2D(iChannel0, uvWarped).rgb;
14 | 
15 |     gl_FragColor = vec4(pattern, 1.0);
16 | }


--------------------------------------------------------------------------------
/demos/duck.glsl:
--------------------------------------------------------------------------------
 1 | // Example shader created for VS Code ShaderToy extension
 2 | 
 3 | #iChannel0 "https://cdn-images-1.medium.com/max/1200/1*eFjpoz8lhNKyd8XcSWv2OA.jpeg"
 4 | #iChannel0::WrapMode "Repeat"
 5 | 
 6 | void main() {
 7 |     vec2 uv = (gl_FragCoord.xy / iResolution.xy);
 8 |     uv.y += 0.05 * sin(iTime + uv.x * 10.0);
 9 |     uv.x += 0.05 * sin(iTime + uv.y * 10.0);
10 |     vec4 color = texture(iChannel0, uv);
11 |     color = color * color;
12 |     gl_FragColor = color;
13 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | // Place your settings in this file to overwrite default and user settings.
 2 | {
 3 |     "files.exclude": {
 4 |         "out": false // set this to true to hide the "out" folder with the compiled JS files
 5 |     },
 6 |     "search.exclude": {
 7 |         "out": true // set this to false to include "out" folder in search results
 8 |     },
 9 |     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
10 |     "typescript.tsc.autoDetect": "off"
11 | }


--------------------------------------------------------------------------------
/src/extensions/user_interface/record_video_codec_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class RecordVideoCodecExtension implements WebviewExtension {
 6 |     private recordVideoCodec: string;
 7 | 
 8 |     public constructor(recordVideoCodec: string) {
 9 |         this.recordVideoCodec = recordVideoCodec;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `"${this.recordVideoCodec}"`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/record_max_duration_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class RecordMaxDurationExtension implements WebviewExtension {
 6 |     private recordMaxDuration: number;
 7 | 
 8 |     public constructor(recordMaxDuration: number) {
 9 |         this.recordMaxDuration = recordMaxDuration;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `${this.recordMaxDuration}`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/record_target_framerate_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class RecordTargetFramerateExtension implements WebviewExtension {
 6 |     private targetFramerate: number;
 7 | 
 8 |     public constructor(targetFramerate: number) {
 9 |         this.targetFramerate = targetFramerate;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `${this.targetFramerate}`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/extensions/advance_time_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from './webview_extension';
 4 | 
 5 | export class AdvanceTimeExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | deltaTime = clock.getDelta();
 9 | time = startingTime + clock.getElapsedTime() - pausedTime;
10 | if (vscode !== undefined) {
11 |     vscode.postMessage({
12 |         command: 'updateTime',
13 |         time: time
14 |     });
15 | }`;
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/record_video_bit_rate_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class RecordVideoBitRateExtension implements WebviewExtension {
 6 |     private recordVideoBitRate: number;
 7 | 
 8 |     public constructor(recordVideoBitRate: number) {
 9 |         this.recordVideoBitRate = recordVideoBitRate;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `${this.recordVideoBitRate}`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/extensions/buffers/includes_test_compile_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class IncludesTestCompileExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | // bail if there is an error found in the include script
 9 | if(compileFragShader(gl, document.getElementById(include.Name).textContent) == false) {
10 |     throw Error(\`Failed to compile $\{include.Name}\`);
11 | }`;
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/record_offline_format_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class RecordOfflineFormatExtension implements WebviewExtension {
 6 |     private recordOfflineFormat: string;
 7 | 
 8 |     public constructor(recordOfflineFormat: string) {
 9 |         this.recordOfflineFormat = recordOfflineFormat;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `"${this.recordOfflineFormat}"`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/test/run_tests.ts:
--------------------------------------------------------------------------------
 1 | import * as path from 'path';
 2 | 
 3 | import { runTests } from '@vscode/test-electron';
 4 | 
 5 | async function main() {
 6 |     try {
 7 |         const extensionDevelopmentPath = path.resolve(__dirname, '../');
 8 |         const extensionTestsPath = path.resolve(__dirname, './index');
 9 |         await runTests({ extensionDevelopmentPath, extensionTestsPath });
10 |     } catch (err) {
11 |         console.error('Failed to run tests');
12 |         process.exit(1);
13 |     }
14 | }
15 | 
16 | main();
17 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/record_offline_quality_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class RecordOfflineQualityExtension implements WebviewExtension {
 6 |     private recordOfflineQuality: number;
 7 | 
 8 |     public constructor(recordOfflineQuality: number) {
 9 |         this.recordOfflineQuality = recordOfflineQuality;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `${this.recordOfflineQuality}`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/record_video_container_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class RecordVideoContainerExtension implements WebviewExtension {
 6 |     private recordVideoContainer: string;
 7 | 
 8 |     public constructor(recordVideoContainer: string) {
 9 |         this.recordVideoContainer = recordVideoContainer;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `"${this.recordVideoContainer}"`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/extensions/initial_fly_control_position_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../typenames';
 4 | import { WebviewExtension } from './webview_extension';
 5 | 
 6 | export class InitialFlyControlPositionExtension implements WebviewExtension {
 7 |     private initialPosition: Types.Position;
 8 | 
 9 |     constructor(initialPosition: Types.Position) {
10 |         this.initialPosition = initialPosition;
11 |     }
12 | 
13 |     public generateContent(): string {
14 |         return `${this.initialPosition}`;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/extensions/initial_fly_control_rotation_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../typenames';
 4 | import { WebviewExtension } from './webview_extension';
 5 | 
 6 | export class InitialFlyControlRotationExtension implements WebviewExtension {
 7 |     private initialRotation: Types.Quaternion;
 8 | 
 9 |     constructor(initialRotation: Types.Quaternion) {
10 |         this.initialRotation = initialRotation;
11 |     }
12 | 
13 |     public generateContent(): string {
14 |         return `${this.initialRotation}`;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/extensions/forced_screenshot_resolution_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from './webview_extension';
 4 | 
 5 | export class ForcedScreenshotResolutionExtension implements WebviewExtension {
 6 |     private forcedScreenshotResolution: [ number, number ];
 7 | 
 8 |     constructor(forcedScreenshotResolution: [ number, number ]) {
 9 |         this.forcedScreenshotResolution = forcedScreenshotResolution;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `${this.forcedScreenshotResolution}`;
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/extensions/initial_normalized_mouse_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../typenames';
 4 | import { WebviewExtension } from './webview_extension';
 5 | 
 6 | export class InitialNormalizedMouseExtension implements WebviewExtension {
 7 |     private initialMouse: Types.NormalizedMouse;
 8 | 
 9 |     constructor(initialMouse: Types.NormalizedMouse) {
10 |         this.initialMouse = initialMouse;
11 |     }
12 | 
13 |     public generateContent(): string {
14 |         return `${this.initialMouse.x}, ${this.initialMouse.y}`;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/extensions/initial_mouse_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../typenames';
 4 | import { WebviewExtension } from './webview_extension';
 5 | 
 6 | export class InitialMouseExtension implements WebviewExtension {
 7 |     private initialMouse: Types.Mouse;
 8 | 
 9 |     constructor(initialMouse: Types.Mouse) {
10 |         this.initialMouse = initialMouse;
11 |     }
12 | 
13 |     public generateContent(): string {
14 |         return `${this.initialMouse.x}, ${this.initialMouse.y}, ${this.initialMouse.z}, ${this.initialMouse.w}`;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/demos/blending.glsl:
--------------------------------------------------------------------------------
 1 | // Example shader created for VS Code ShaderToy extension
 2 | 
 3 | #iChannel0 "https://66.media.tumblr.com/tumblr_mcmeonhR1e1ridypxo1_500.jpg"
 4 | #iChannel1 "https://static.wixstatic.com/media/5a6af3_59508f8a1ef6461abd9b97fba2e4a2ce~mv2.png"
 5 | #iChannel1::WrapMode "Mirror"
 6 | 
 7 | void main() {
 8 |     vec2 uv = gl_FragCoord.xy / iResolution.xy;
 9 | 
10 |     vec3 pattern = texture2D(iChannel0, uv).rgb;
11 |     float mask = texture2D(iChannel1, uv * 2.0).a;
12 | 
13 |     vec3 maskedPattern = pattern * mask;
14 |     gl_FragColor = vec4(maskedPattern, 1.0);
15 | }


--------------------------------------------------------------------------------
/demos/swirl_spin.glsl:
--------------------------------------------------------------------------------
 1 | // Created by TekF - https://www.shadertoy.com/view/XsyGzz
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | #iChannel0 "self"
 5 | 
 6 | void mainImage(out vec4 fragColor, in vec2 fragCoord)
 7 | {
 8 |     fragColor = texture(iChannel0, (fragCoord*.98 + iResolution.xy*.01 + (fragCoord-iResolution.xy/2.).yx*vec2(-.03,.03)) / iResolution.xy);
 9 |     
10 |     float t = iTime*.5;
11 | 
12 |     vec4 col = vec4(sin(t*vec3(13,11,17))*.5+.5,1);
13 |     float idx = .0+1.0*smoothstep( 6., 20., length( fragCoord - sin(vec2(11,13)*t)*60. - iResolution.xy/2. ) );
14 |     fragColor = mix( col, fragColor, idx );
15 | }
16 | 


--------------------------------------------------------------------------------
/src/extensions/advance_time_if_not_paused_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from './webview_extension';
 4 | 
 5 | export class AdvanceTimeIfNotPausedExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | if (paused == false) {
 9 |     deltaTime = clock.getDelta();
10 |     time = startingTime + clock.getElapsedTime() - pausedTime;
11 |     if (vscode !== undefined) {
12 |         vscode.postMessage({
13 |             command: 'updateTime',
14 |             time: time
15 |         });
16 |     }
17 | } else {
18 |     deltaTime = 0.0;
19 | }`;
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"module": "commonjs",
 4 | 		"target": "es6",
 5 | 		"outDir": "out",
 6 | 		"lib": [
 7 | 			"es6"
 8 | 		],
 9 | 		"sourceMap": true,
10 | 		"rootDir": ".",
11 | 		"strict": true   /* enable all strict type-checking options */
12 | 		/* Additional Checks */
13 | 		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
14 | 		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
15 | 		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
16 | 	},
17 | 	"exclude": [
18 | 		"node_modules",
19 | 		".vscode-test"
20 | 	]
21 | }
22 | 


--------------------------------------------------------------------------------
/demos/bouncing.glsl:
--------------------------------------------------------------------------------
 1 | // Created by aaecheve - https://www.shadertoy.com/view/4ddSz4
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | #iChannel0 "file://buffer_a.glsl"
 5 | 
 6 | vec4 readMemory(vec2 coords) {
 7 |     return texture(iChannel0, (coords + 0.5) / iChannelResolution[0].xy);
 8 | }
 9 | 
10 | void mainImage(out vec4 fragColor, in vec2 fragCoord) {
11 |     vec4 data1 = readMemory(vec2(0, 0));
12 |     vec4 data2 = readMemory(vec2(1, 1));
13 | 
14 |     vec2 pos1 = data1.xy;
15 |     vec2 pos2 = data2.xy;
16 | 
17 |     vec4 col = vec4(0, 0, 0, 1);
18 |     if(distance(pos1, fragCoord.xy) < 20.0) {
19 |         col = vec4(1, 0, 0, 1);
20 |     } else if(distance(pos2, fragCoord.xy) < 15.0) {
21 |         col = vec4(1, 1, 0, 1);
22 |     }
23 | 
24 |     fragColor = col;
25 | }


--------------------------------------------------------------------------------
/src/extensions/buffers/includes_init_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../../typenames';
 4 | import { WebviewExtension } from '../webview_extension';
 5 | 
 6 | export class IncludesInitExtension implements WebviewExtension {
 7 |     private content: string;
 8 | 
 9 |     constructor(includes: Types.IncludeDefinition[]) {
10 |         this.content = '';
11 |         this.processBuffers(includes);
12 |     }
13 | 
14 |     private processBuffers(includes: Types.IncludeDefinition[]) {
15 |         for (const include of includes) {
16 |             this.content += `\
17 | commonIncludes.push({
18 |     Name: '${include.Name}',
19 |     File: '${include.File}'
20 | });`;
21 |         }
22 |     }
23 | 
24 |     public generateContent(): string {
25 |         return this.content;
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/extensions/packages/three_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class ThreeExtension implements WebviewExtension {
 6 |     private getWebviewResourcePath: (relativePath: string) => string;
 7 |     private generateStandalone: boolean;
 8 | 
 9 |     constructor(getWebviewResourcePath: (relativePath: string) => string, generateStandalone: boolean) {
10 |         this.getWebviewResourcePath = getWebviewResourcePath;
11 |         this.generateStandalone = generateStandalone;
12 |     }
13 | 
14 |     public generateContent(): string {
15 |         if (this.generateStandalone) {
16 |             return 'https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js';
17 |         }
18 |         return this.getWebviewResourcePath('three.min.js');
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/extensions/packages/jquery_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class JQueryExtension implements WebviewExtension {
 6 |     private getWebviewResourcePath: (relativePath: string) => string;
 7 |     private generateStandalone: boolean;
 8 | 
 9 |     constructor(getWebviewResourcePath: (relativePath: string) => string, generateStandalone: boolean) {
10 |         this.getWebviewResourcePath = getWebviewResourcePath;
11 |         this.generateStandalone = generateStandalone;
12 |     }
13 | 
14 |     public generateContent(): string {
15 |         if (this.generateStandalone) {
16 |             return 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
17 |         }
18 |         return this.getWebviewResourcePath('jquery.min.js');
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "es2021": true
 5 |     },
 6 |     "extends": [
 7 |         "eslint:recommended",
 8 |         "plugin:@typescript-eslint/recommended"
 9 |     ],
10 |     "parser": "@typescript-eslint/parser",
11 |     "parserOptions": {
12 |         "ecmaVersion": "latest",
13 |         "sourceType": "module"
14 |     },
15 |     "plugins": [
16 |         "@typescript-eslint"
17 |     ],
18 |     "rules": {
19 |         "indent": [
20 |             "error",
21 |             4
22 |         ],
23 |         "linebreak-style": [
24 |             "error",
25 |             "windows"
26 |         ],
27 |         "quotes": [
28 |             "error",
29 |             "single"
30 |         ],
31 |         "semi": [
32 |             "error",
33 |             "always"
34 |         ]
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/screenshot_button_style_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class ScreenshotButtonStyleExtension implements WebviewExtension {
 6 |     private screenResourcePath: string;
 7 | 
 8 |     constructor(getWebviewResourcePath: (relativePath: string) => string) {
 9 |         this.screenResourcePath = getWebviewResourcePath('screen.png');
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `\
14 | #screenshot {
15 |     background: url('${this.screenResourcePath}');
16 |     background-size: 32px;
17 |     background-repeat: no-repeat;
18 |     background-position: center;
19 |     background-color: rgba(128, 128, 128, 0.5);
20 | }
21 | #screenshot:hover {
22 |     background-color: lightgray;
23 |     transition-duration: 0.1s;
24 | }`;
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | //@ts-check
 2 | 
 3 | 'use strict';
 4 | 
 5 | const path = require('path');
 6 | 
 7 | /**@type {import('webpack').Configuration}*/
 8 | const config = {
 9 |   target: 'node',
10 |   entry: './src/extension.ts',
11 |   output: {
12 |     path: path.resolve(__dirname, 'dist'),
13 |     filename: 'extension.js',
14 |     libraryTarget: 'commonjs2',
15 |     devtoolModuleFilenameTemplate: '../[resource-path]'
16 |   },
17 |   devtool: 'source-map',
18 |   externals: {
19 |     vscode: 'commonjs vscode'
20 |   },
21 |   resolve: {
22 |     extensions: ['.ts', '.js', '.json']
23 |   },
24 |   module: {
25 |     rules: [
26 |       {
27 |         test: /\.ts$/,
28 |         exclude: /node_modules/,
29 |         use: [
30 |           {
31 |             loader: 'ts-loader'
32 |           }
33 |         ]
34 |       }
35 |     ]
36 |   }
37 | };
38 | module.exports = config;


--------------------------------------------------------------------------------
/src/extensions/keyboard/keyboard_update_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class KeyboardUpdateExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | if (pressedKeys.length > 0 || releasedKeys.length > 0) {
 9 |     for (let key of pressedKeys) {
10 |         keyBoardData[key + 256] = 0;
11 |     }
12 |     for (let key of releasedKeys) {
13 |         keyBoardData[key + 768] = 0;
14 |     }
15 | 
16 |     if (pressedKeys.length > 0) {
17 |         if (vscode !== undefined) {
18 |             vscode.postMessage({
19 |                 command: 'updateKeyboard',
20 |                 keys: toggledKeys
21 |             });
22 |         }
23 |     }
24 |     
25 |     keyBoardTexture.needsUpdate = true;
26 |     pressedKeys = [];
27 |     releasedKeys = [];
28 | }`;
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/extensions/packages/dat_gui_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class DatGuiExtension implements WebviewExtension {
 6 |     private getWebviewResourcePath: (relativePath: string) => string;
 7 |     private generateStandalone: boolean;
 8 | 
 9 |     constructor(getWebviewResourcePath: (relativePath: string) => string, generateStandalone: boolean) {
10 |         this.getWebviewResourcePath = getWebviewResourcePath;
11 |         this.generateStandalone = generateStandalone;
12 |     }
13 | 
14 |     public generateContent(): string {
15 |         if (this.generateStandalone) {
16 |             return `\
17 | <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js'></script>`;
18 |         }
19 |         return `\
20 | <script src='${this.getWebviewResourcePath('dat.gui.min.js')}'></script>`;
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/error_display/glslify_errors_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../../webview_extension';
 4 | 
 5 | export class GlslifyErrorsExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | console.error = function (message) {
 9 |     if('7' in arguments) {
10 |         let message = arguments[7].replace(/ERROR: \\d+:(\\d+):\\W(.*)\\n/g, function(match, line, error) {
11 |             return \`<li>\${error}</li>\`;
12 |         });
13 | 
14 |         $('#message').append(\`<h3>Shader failed to compile - \${currentShader.Name}</h3>\`);
15 |         $('#message').append(\`<h3>Line numbers are not available because the glslify option is enabled</h3>\`);
16 |         $('#message').append('<ul>');
17 |         $('#message').append(message);
18 |         $('#message').append('</ul>');
19 |     }
20 | };`;
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/extensions/packages/ccapture_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class CCaptureExtension implements WebviewExtension {
 6 |     private getWebviewResourcePath: (relativePath: string) => string;
 7 |     private generateStandalone: boolean;
 8 | 
 9 |     constructor(getWebviewResourcePath: (relativePath: string) => string, generateStandalone: boolean) {
10 |         this.getWebviewResourcePath = getWebviewResourcePath;
11 |         this.generateStandalone = generateStandalone;
12 |     }
13 | 
14 |     public generateContent(): string {
15 |         if (this.generateStandalone) {
16 |             return `\
17 | <script src='https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed@1.1.0/build/CCapture.all.min.js'></script>`;
18 |         }
19 |         return `\
20 | <script src='${this.getWebviewResourcePath('CCapture.all.min.js')}'></script>`;
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/demos/frame.glsl:
--------------------------------------------------------------------------------
 1 | // Example shader created for VS Code ShaderToy extension
 2 | 
 3 | #define BRANCHLESS
 4 | 
 5 | void main() {
 6 |     const float speedFactor = 1000.0;
 7 | 
 8 |     int maxIdx = int(iResolution.x * iResolution.y) + int(iResolution.y);
 9 | 
10 |     int idx = int(gl_FragCoord.x * iResolution.y) + int(gl_FragCoord.y);
11 |     int frame = int(float(iFrame) * speedFactor);
12 | 
13 |     float fraction = float(frame - idx) / float(maxIdx);
14 | 
15 | #ifdef BRANCHLESS
16 |     gl_FragColor.r = (1.0 - fraction) * step(0.0, fraction);
17 |     gl_FragColor.b = (1.0 + fraction) * step(0.0, -fraction);
18 |     gl_FragColor.g = step(0.0, fraction) * step(0.0, -fraction);
19 | #else
20 |     gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
21 |     if (idx < frame)
22 |         gl_FragColor.r = 1.0 - fraction;
23 |     else if (idx > frame)
24 |         gl_FragColor.b = 1.0 + fraction;
25 |     else
26 |         gl_FragColor.g = 1.0;
27 | #endif
28 | }


--------------------------------------------------------------------------------
/test/index.ts:
--------------------------------------------------------------------------------
 1 | import * as path from 'path';
 2 | import * as Mocha from 'mocha';
 3 | import { glob } from 'glob'
 4 | 
 5 | export function run(): Promise<void> {
 6 | 	// Create the mocha test
 7 | 	const mocha = new Mocha({
 8 | 		ui: 'tdd'
 9 | 	});
10 | 
11 | 	const testsRoot = path.resolve(__dirname, '..');
12 | 
13 | 	const options = {
14 | 		cwd: testsRoot
15 | 	};
16 | 	return new Promise((c, e) => {
17 | 		glob('**/**.test.js', options)
18 | 			.then((files: string[]) => {
19 | 				// Add files to the test suite
20 | 				files.forEach(f => mocha.addFile(path.resolve(testsRoot, f)));
21 | 
22 | 				try {
23 | 					// Run the mocha test
24 | 					mocha.run(failures => {
25 | 						if (failures > 0) {
26 | 							e(new Error(`${failures} tests failed.`));
27 | 						} else {
28 | 							c();
29 | 						}
30 | 					});
31 | 				} catch (err) {
32 | 					console.error(err);
33 | 					e(err);
34 | 				}
35 | 			})
36 | 			.catch((err: any) => e(err));
37 | 	});
38 | }
39 | 


--------------------------------------------------------------------------------
/demos/plasma1.glsl:
--------------------------------------------------------------------------------
 1 | // Created by klk - https://www.shadertoy.com/view/XsVSzW
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
 5 | // Created by S.Guillitte 
 6 | void main()
 7 | {
 8 |     float time=iGlobalTime*1.0;
 9 |     vec2 uv = (gl_FragCoord.xy / iResolution.xx-0.5)*8.0;
10 |     vec2 uv0=uv;
11 |     float i0=.8;
12 |     float i1=.8;
13 |     float i2=.75;
14 |     float i4=0.;
15 |     for(int s=0;s<7;s++) {
16 |         vec2 r;
17 |         r=vec2(cos(uv.y*i0-i4-time/i1),sin(uv.x*i0-i4+time/i1))/i2;
18 |         r+=vec2(-r.y,r.x)*0.3;
19 |         uv.xy+=r;
20 |         i0*=1.93;
21 |         i1*=1.15;
22 |         i2*=1.7;
23 |         i4+=0.05+0.1*time*i1;
24 |     }
25 |     float b=sin(uv.x-time)*0.5+0.5;
26 |     float r=sin(uv.y+time)*0.5+0.5;
27 |     float g=sin((uv.x+uv.y+sin(time*0.5))*0.5)*0.5+0.5;
28 |     gl_FragColor = vec4(r,g,b,1.);
29 | }


--------------------------------------------------------------------------------
/src/extensions/keyboard/keyboard_init_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class KeyboardInitExtension implements WebviewExtension {
 6 |     private startingKeys: number[];
 7 | 
 8 |     public constructor(startingKeys: number[]) {
 9 |         this.startingKeys = startingKeys;
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `\
14 | const numKeys = 256;
15 | const numStates = 4;
16 | let keyBoardData = new Uint8Array(numKeys * numStates);
17 | let keyBoardTexture = new THREE.DataTexture(keyBoardData, numKeys, numStates, THREE.LuminanceFormat, THREE.UnsignedByteType);
18 | keyBoardTexture.magFilter = THREE.NearestFilter;
19 | keyBoardTexture.needsUpdate = true;
20 | let pressedKeys = [];
21 | let releasedKeys = [];
22 | let toggledKeys = [${this.startingKeys}];
23 | for (let key of toggledKeys) {
24 |     keyBoardData[key + 512] = 255; // Toggled
25 | }`;
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/.github/workflows/Publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish
 2 | 
 3 | on:
 4 |   release:
 5 |     types: [ created ]
 6 | 
 7 | jobs:
 8 |   publish:
 9 |     name: Publish
10 |     
11 |     strategy:
12 |       matrix:
13 |         os: [ubuntu-latest]
14 |     
15 |     runs-on: ${{ matrix.os }}
16 |     
17 |     steps:
18 |     - name: Checkout
19 |       uses: actions/checkout@v2.2.0
20 | 
21 |     - name: Install Node.js
22 |       uses: actions/setup-node@v1.4.4
23 |       with:
24 |         node-version: 10.x
25 | 
26 |     - name: Wait on tests
27 |       uses: lewagon/wait-on-check-action@v0.1
28 |       with:
29 |         ref: test_publish
30 |         check-name: Ubuntu
31 |         repo-token: ${{ secrets.GITHUB_TOKEN }}
32 |         wait-interval: 20 # seconds
33 |       
34 |     - name: Install
35 |       run: npm install
36 |       
37 |     - name: Build
38 |       run: npm run webpack
39 |       
40 |     - name: Publish
41 |       if: success()
42 |       run: npm run deploy
43 |       env:
44 |         VSCE_PAT: ${{ secrets.VSCE_PAT }}
45 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/error_display/default_errors_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../../webview_extension';
 4 | 
 5 | export class DefaultErrorsExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | console.error = function (message) {
 9 |     if('7' in arguments) {
10 |         let message = arguments[7].replace(/ERROR: \\d+:(\\d+):\\W(.*)\\n/g, function(match, line, error) {
11 |             let lineNumber = Number(line) - currentShader.LineOffset;
12 |             let lineHighlight = \`${'<a class=\'error\' unselectable onclick=\'revealError(${lineNumber}, "${currentShader.File}")\'>Line ${lineNumber}</a>'}\`;
13 |             return \`<li>\${lineHighlight}: \${error}</li>\`;
14 |         });
15 | 
16 |         $('#message').append(\`<h3>Shader failed to compile - \${currentShader.Name} </h3>\`);
17 |         $('#message').append('<ul>');
18 |         $('#message').append(message);
19 |         $('#message').append('</ul>');
20 |     }
21 | };`;
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2016 Adam Stevenson
3 | 
4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5 | 
6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7 | 
8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/src/extensions/buffers/includes_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../../typenames';
 4 | import { WebviewExtension } from '../webview_extension';
 5 | import { ShaderPreambleExtension } from '../preamble_extension';
 6 | 
 7 | export class IncludesExtension implements WebviewExtension {
 8 |     private content: string;
 9 | 
10 |     constructor(includes: Types.IncludeDefinition[], preambleExtension: ShaderPreambleExtension) {
11 |         this.content = '';
12 |         this.processBuffers(includes, preambleExtension);
13 |     }
14 | 
15 |     private processBuffers(includes: Types.IncludeDefinition[], preambleExtension: ShaderPreambleExtension) {
16 |         for (const include of includes) {
17 |             this.content += `\
18 | <script id='${include.Name}' type='x-shader/x-fragment'>#version 300 es
19 |     precision highp float;
20 |     ${preambleExtension.getShaderPreamble()}
21 |     ${include.Code}
22 |     void main() {}
23 | </script>`;
24 |         }
25 |     }
26 | 
27 |     public generateContent(): string {
28 |         return this.content;
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/.github/workflows/BuildAndTest.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Test
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [master]
 6 |   pull_request:
 7 |     branches: [master]
 8 |   release:
 9 |     types: [created]
10 |   workflow_dispatch:
11 | 
12 | jobs:
13 |   build_and_test:
14 |     name: ${{ matrix.name }}
15 | 
16 |     strategy:
17 |       matrix:
18 |         os: [macos-latest, ubuntu-latest, windows-latest]
19 |         include:
20 |           - os: macos-latest
21 |             name: MacOS
22 |           - os: ubuntu-latest
23 |             name: Ubuntu
24 |           - os: windows-latest
25 |             name: Windows
26 | 
27 |     runs-on: ${{ matrix.os }}
28 | 
29 |     steps:
30 |       - name: Checkout
31 |         uses: actions/checkout@v2.2.0
32 | 
33 |       - name: Install Node.js
34 |         uses: actions/setup-node@v1.4.4
35 |         with:
36 |           node-version: 18.x
37 | 
38 |       - name: Install
39 |         run: npm install
40 | 
41 |       - name: Build
42 |         run: npm run webpack
43 | 
44 |       - name: Test
45 |         uses: GabrielBB/xvfb-action@v1.0
46 |         with:
47 |           run: npm test
48 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | // A launch configuration that compiles the extension and then opens it inside a new window
 2 | // Use IntelliSense to learn about possible attributes.
 3 | // Hover to view descriptions of existing attributes.
 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 | {
 6 | 	"version": "0.2.0",
 7 | 	"configurations": [{
 8 | 			"name": "Run Extension",
 9 | 			"type": "extensionHost",
10 | 			"request": "launch",
11 | 			"runtimeExecutable": "${execPath}",
12 | 			"args": [
13 | 				"--extensionDevelopmentPath=${workspaceFolder}"
14 | 			],
15 | 			"outFiles": [
16 | 				"${workspaceFolder}/out/**/*.js"
17 | 			],
18 | 			"preLaunchTask": "npm: watch"
19 | 		},
20 | 		{
21 | 			"name": "Extension Tests",
22 | 			"type": "extensionHost",
23 | 			"request": "launch",
24 | 			"runtimeExecutable": "${execPath}",
25 | 			"args": [
26 | 				"--extensionDevelopmentPath=${workspaceFolder}",
27 | 				"--extensionTestsPath=${workspaceFolder}/out/test"
28 | 			],
29 | 			"outFiles": [
30 | 				"${workspaceFolder}/out/test/**/*.js"
31 | 			],
32 | 			"preLaunchTask": "npm: watch"
33 | 		}
34 | 	]
35 | }
36 | 


--------------------------------------------------------------------------------
/demos/mouse.glsl:
--------------------------------------------------------------------------------
 1 | // Created by foodini - https://www.shadertoy.com/view/XlyBzt
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | void mainImage( out vec4 fragColor, in vec2 fragCoord )
 5 | {
 6 |     vec3 col = vec3(0.);
 7 | 
 8 |     //Draw a red cross where the mouse button was last down.
 9 |     if(abs(iMouse.x-fragCoord.x) < 4.) {
10 |         col = vec3(1.,0.,0.);
11 |     }
12 |     if(abs(iMouse.y-fragCoord.y) < 4.) {
13 |         col = vec3(1.,0.,0.);
14 |     }
15 |     
16 |     //If the button is currently up, (iMouse.z, iMouse.w) is where the mouse
17 |     //was when the button last went down.
18 |     if(abs(iMouse.z-fragCoord.x) < 2.) {
19 |         col = vec3(0.,0.,1.);
20 |     }
21 |     if(abs(iMouse.w-fragCoord.y) < 2.) {
22 |         col = vec3(0.,0.,1.);
23 |     }
24 |     
25 |     //If the button is currently down, (-iMouse.z, -iMouse.w) is where
26 |     //the button was when the click occurred.
27 |     if(abs(-iMouse.z-fragCoord.x) < 2.) {
28 |         col = vec3(0.,1.,0.);
29 |     }
30 |     if(abs(-iMouse.w-fragCoord.y) < 2.) {
31 |         col = vec3(0.,1.,0.);
32 |     }
33 |     
34 |     fragColor = vec4(col, 1.0);
35 | }


--------------------------------------------------------------------------------
/src/extensions/user_interface/reload_button_style_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class ReloadButtonStyleExtension implements WebviewExtension {
 6 |     private reloadResourcePath: string;
 7 | 
 8 |     constructor(getWebviewResourcePath: (relativePath: string) => string) {
 9 |         this.reloadResourcePath = getWebviewResourcePath('reload.png');
10 |     }
11 | 
12 |     public generateContent(): string {
13 |         return `\
14 | #reload {
15 |     position: absolute;
16 |     border: none;
17 |     bottom: 0px;
18 |     padding: 26px;
19 |     text-align: center;
20 |     text-decoration: none;
21 |     font-size: 26px;
22 |     border-radius: 8px;
23 |     margin: 8px;
24 |     transform: translateX(0%);
25 |     background: url('${this.reloadResourcePath}');
26 |     background-size: 26px;
27 |     background-repeat: no-repeat;
28 |     background-position: center;
29 |     background-color: rgba(128, 128, 128, 0.5);
30 |     z-index: 1;
31 | }
32 | #reload:hover {
33 |     background-color: lightgray;
34 |     transition-duration: 0.1s;
35 | }`;
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/extensions/uniforms/uniforms_preamble_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../../typenames';
 4 | import { WebviewExtension } from '../webview_extension';
 5 | 
 6 | export class UniformsPreambleExtension implements WebviewExtension {
 7 |     private content: string;
 8 | 
 9 |     constructor(buffers: Types.BufferDefinition[]) {
10 |         this.content = '';
11 |         this.processBuffers(buffers);
12 |     }
13 | 
14 |     private static mapTypenameToGlslType(typename: string) {
15 |         if (typename === 'color3') {
16 |             return 'vec3';
17 |         }
18 |         else {
19 |             return typename;
20 |         }
21 |     }
22 | 
23 |     private processBuffers(buffers: Types.BufferDefinition[]) {
24 |         for (const buffer of buffers) {
25 |             const uniforms = buffer.CustomUniforms;
26 |             for (const uniform of uniforms) {
27 |                 this.content += `\
28 | uniform ${UniformsPreambleExtension.mapTypenameToGlslType(uniform.Typename)} ${uniform.Name};
29 | `;
30 |             }
31 |         }
32 |     }
33 | 
34 |     public generateContent(): string {
35 |         return this.content;
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/record_button_style_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class RecordButtonStyleExtension implements WebviewExtension {
 6 |     private recordResourcePath: string;
 7 |     private stopResourcePath: string;
 8 | 
 9 |     constructor(getWebviewResourcePath: (relativePath: string) => string) {
10 |         this.recordResourcePath = getWebviewResourcePath('record.png');
11 |         this.stopResourcePath = getWebviewResourcePath('stop_rec.png');
12 |     }
13 | 
14 |     public generateContent(): string {
15 |         return `\
16 | #record {
17 |     background: url('${this.recordResourcePath}');
18 |     background-size: 32px;
19 |     background-repeat: no-repeat;
20 |     background-position: center;
21 |     background-color: rgba(128, 128, 128, 0.5);
22 | }
23 | #record:hover {
24 |     background-color: lightgray;
25 |     transition-duration: 0.1s;
26 | }
27 | #record.recording {
28 |     background: url('${this.stopResourcePath}');
29 |     background-size: 32px;
30 |     background-repeat: no-repeat;
31 |     background-position: center;
32 |     background-color: rgba(128, 128, 128, 0.5);
33 | }
34 | #record.recording:hover {
35 |     background-color: lightgray;
36 |     transition-duration: 0.1s;
37 | }`;
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/webviewcontent.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as fs from 'fs';
 4 | 
 5 | export class WebviewContent {
 6 |     private content: string[];
 7 |     
 8 |     constructor(originalFile: string) {
 9 |         const rawContent = fs.readFileSync(originalFile, 'utf-8');
10 |         this.content = rawContent.split(/\r?\n/);
11 |     }
12 | 
13 |     public getLines() {
14 |         return this.content;
15 |     }
16 |     public getLine(lineNumber: number) {
17 |         return this.content[lineNumber - 1];
18 |     }
19 | 
20 |     public insertAfterLine(content: string, lineNumber: number) {
21 |         const indentationAmount = this.content[lineNumber - 1].split(/[^ ]/)[0].length;
22 |         const indentation = ' '.repeat(indentationAmount);
23 | 
24 |         let splitContent = content.split('\n');
25 |         splitContent = splitContent.map((line: string) => indentation + line);
26 | 
27 |         this.content.splice(lineNumber, 0, ...splitContent);
28 |     }
29 | 
30 |     public replaceWithinLine(sourceContent: string, destinationContent: string, lineNumber: number) {
31 |         let line = this.content[lineNumber - 1];
32 |         line = line.replace(sourceContent, destinationContent);
33 |         this.content[lineNumber - 1] = line;
34 |     }
35 | 
36 |     public getContent() {
37 |         return this.content.join('\n');
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/demos/volume_points_0.glsl:
--------------------------------------------------------------------------------
 1 | // Created by FlyGuy - https://www.shadertoy.com/view/MtdcDn
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | #include "volume_points_common.glsl"
 5 | 
 6 | vec3 iVResolution = vec3(0);
 7 | 
 8 | void mainVolume(out vec4 voxColor, in vec3 voxCoord);
 9 | 
10 | void mainImage(out vec4 fragColor, in vec2 fragCoord )
11 | {
12 |     vec3 vres = volumeSize(iResolution.xy);    
13 |     vec2 uv = floor(fragCoord - 0.5);
14 |     float idx = (uv.y * iResolution.x) + uv.x; 
15 |     vec3 uvw = mod(floor(vec3(idx) / vec3(1.0, vres.x, vres.x*vres.y)), vres);  
16 |     iVResolution = vres;
17 |     mainVolume(fragColor, uvw);
18 | }
19 | 
20 | //Write your shader here.
21 | //3D plasma thing.
22 | void mainVolume( out vec4 voxColor, in vec3 voxCoord)
23 | {
24 |     vec3 uvw = voxCoord / iVResolution;
25 | 
26 |     vec3 color = vec3(1,0,0);
27 |     
28 |     vec3 p0 = sin(vec3(1.3,0.9,2.1) * iTime + 7.0)*.5+.5;
29 |     vec3 p1 = sin(vec3(0.5,1.6,0.8) * iTime + 4.0)*.5+.5;
30 |     vec3 p2 = sin(vec3(0.9,1.2,1.5) * iTime + 2.0)*.5+.5;
31 |     
32 |     float s0 = cos(length(p0-uvw)*14.0);
33 |     float s1 = cos(length(p1-uvw)*10.0);
34 |     float s2 = cos(length(p2-uvw)*11.0);
35 |     
36 |     float dens = (s0+s1+s2)/3.0;
37 |     
38 |     color = vec3(s0,s1,s2);
39 |     
40 |     dens *= 0.5;
41 |     
42 |     voxColor = vec4(color, dens);
43 | }


--------------------------------------------------------------------------------
/src/extensions/keyboard/keyboard_callbacks_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class KeyboardCallbacksExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | document.addEventListener('keydown', function(evt) {
 9 |     const i = evt.keyCode;
10 |     if (i >= 0 && i <= 255) {
11 |         // Key is being held, don't register input
12 |         if (keyBoardData[i] == 0) {
13 |             keyBoardData[i] = 255; // Held
14 |             keyBoardData[i + 256] = 255; // Pressed
15 |             keyBoardData[i + 512] = (keyBoardData[i + 512] == 255 ? 0 : 255); // Toggled
16 | 
17 |             if (keyBoardData[i + 512] > 0) {
18 |                 toggledKeys.push(i);
19 |             }
20 |             else {
21 |                 toggledKeys = toggledKeys.filter(function(value, index, arr){
22 |                     return value != i;
23 |                 });
24 |             }
25 | 
26 |             pressedKeys.push(i);
27 |             keyBoardTexture.needsUpdate = true;
28 |         }
29 |     }
30 | });
31 | document.addEventListener('keyup', function(evt) {
32 |     const i = evt.keyCode;
33 |     if (i >= 0 && i <= 255) {
34 |         keyBoardData[i] = 0; // Not held
35 |         keyBoardData[i + 768] = 255; // Released
36 |         releasedKeys.push(i);
37 |         keyBoardTexture.needsUpdate = true;
38 |     }
39 | });`;
40 |     }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/extensions/audio/audio_update_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class AudioUpdateExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | for (let audio of audios) {
 9 |     // Get audio data
10 |     audio.Analyser.getByteFrequencyData(audio.Data.subarray(0, audio.Data.length / 2));
11 |     audio.Analyser.getByteTimeDomainData(audio.Data.subarray(audio.Data.length / 2, -1));
12 | 
13 |     // Scale buffer to fill the whole range because
14 |     // frequency data and amplitude data are not necessarily the same length
15 |     audio.Data.subarray(0, audio.Data.length / 2).set(
16 |         audio.Data.slice(0, audio.Data.length / 2)
17 |             .map(function(value, index, array) {
18 |                 index = index / (audio.Data.length / 2);
19 |                 index = Math.floor(index * audio.FrequencySamples);
20 |                 return array[index];
21 |             })
22 |         );
23 |     audio.Data.subarray(audio.Data.length / 2, -1).set(
24 |         audio.Data.slice(audio.Data.length / 2, -1)
25 |             .map(function(value, index, array) {
26 |                 index = index / (audio.Data.length / 2);
27 |                 index = index * audio.AmplitudeSamples;
28 |                 return array[index];
29 |             })
30 |         );
31 |     
32 |     audio.Texture.needsUpdate = true;
33 | }`;
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/extensions/buffers/shaders_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../../typenames';
 4 | import { WebviewExtension } from '../webview_extension';
 5 | import { ShaderPreambleExtension } from '../preamble_extension';
 6 | import { KeyboardShaderExtension } from '../keyboard/keyboard_shader_extension';
 7 | 
 8 | export class ShadersExtension implements WebviewExtension {
 9 |     private content: string;
10 | 
11 |     constructor(buffers: Types.BufferDefinition[], preambleExtension: ShaderPreambleExtension, keyboardShaderExtension: KeyboardShaderExtension | undefined) {
12 |         this.content = '';
13 |         this.processBuffers(buffers, preambleExtension, keyboardShaderExtension);
14 |     }
15 | 
16 |     private processBuffers(buffers: Types.BufferDefinition[],  preambleExtension: ShaderPreambleExtension, keyboardShaderExtension: KeyboardShaderExtension | undefined) {
17 |         for (const buffer of buffers) {
18 |             let preamble = preambleExtension.getShaderPreamble();
19 |             for (const texture of buffer.TextureInputs) {
20 |                 if (texture.Type === Types.TextureType.CubeMap) {
21 |                     preamble = preamble.replace(`sampler2D   iChannel${texture.Channel}`, `samplerCube iChannel${texture.Channel}`);
22 |                 }
23 |             }
24 |             this.content += `\
25 | <script id='${buffer.Name}' type='x-shader/x-fragment'>
26 | ${preamble}
27 | ${keyboardShaderExtension !== undefined ? keyboardShaderExtension.getShaderPreamble() : ''}
28 | ${buffer.Code}
29 | </script>`;
30 |         }
31 |     }
32 | 
33 |     public generateContent(): string {
34 |         return this.content;
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/demos/blobby.glsl:
--------------------------------------------------------------------------------
 1 | // Created by liamboone - https://www.shadertoy.com/view/ldBBRV
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | #include "common/blobby.glsl"
 5 | 
 6 | float blob(vec2 pos, vec2 center, float power)
 7 | {
 8 |     vec2 d = saturate(pow(pos - center, vec2(power)));
 9 |     return 1. / abs(d.x + d.y);
10 | }
11 | 
12 | void mainImage( out vec4 fragColor, in vec2 fragCoord )
13 | {
14 |     vec2 uv = fragCoord / iResolution.xy;
15 |     uv = (uv - .5) * 2.0; 
16 |     vec2 aspect_uv = uv * (iResolution.xy / iResolution.y);
17 |         
18 |     float blobs = 0.8 * blob(aspect_uv, vec2(0.), 2.);
19 |     
20 |     float phi = 0.;
21 |     
22 |     const int N = 7;
23 |     
24 |     for (int i = 0; i < N; ++i)
25 |     {
26 |         blobs += 0.0001 * blob(rotate(aspect_uv, phi), 
27 |                                vec2(sin(iTime + phi) * 0.64, 0.),
28 |                                4.);
29 |         
30 |         blobs += 0.001 * blob(rotate(aspect_uv, phi), 
31 |                               vec2(-sin(iTime + phi + 5. * PI / 6.) * 0.50, 0.),
32 |                               2.);
33 |         phi += PI / float(N);
34 |     }
35 |     
36 |     float x = smoothstep(3., 6., blobs);
37 |     float y = smoothstep(3., 5., blobs);
38 |     float z = smoothstep(3., 8., blobs);
39 |     
40 |     fragColor = vec4(20.1, 2., 2.1, 5.) - vec4(x * vec3(1., 0.5, 0.5) + 
41 |                                               y * vec3(2.5, 1., 0.5) + 
42 |                                               z * vec3(.5, 0.5, 1.), 1.);
43 |     
44 |     
45 |     fragColor = vec4((1. - vec3(pow(length(uv * 0.4), 1.5))) * vec3(0.9, 1.0, 0.9),
46 |                      1.) * saturate(pow(fragColor, vec4(2.7)));
47 | }


--------------------------------------------------------------------------------
/src/extensions/packages/stats_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class StatsExtension implements WebviewExtension {
 6 |     private getWebviewResourcePath: (relativePath: string) => string;
 7 |     private generateStandalone: boolean;
 8 | 
 9 |     constructor(getWebviewResourcePath: (relativePath: string) => string, generateStandalone: boolean) {
10 |         this.getWebviewResourcePath = getWebviewResourcePath;
11 |         this.generateStandalone = generateStandalone;
12 |     }
13 | 
14 |     public generateContent(): string {
15 |         let codeOrigin;
16 |         if (this.generateStandalone) {
17 |             codeOrigin = 'https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js';
18 |         }
19 |         else {
20 |             codeOrigin = this.getWebviewResourcePath('stats.min.js');
21 |         }
22 | 
23 |         // Note: Workaround for a broken r17 on cdnjs and an incompatible r16 that we're forced to use
24 |         let domElement;
25 |         if (this.generateStandalone) {
26 |             domElement = 'domElement';
27 |         }
28 |         else {
29 |             domElement = 'dom';
30 |         }
31 | 
32 |         return `\
33 | <script src='${codeOrigin}' onload="
34 | let stats = new Stats();
35 | compileTimePanel = stats.addPanel(new Stats.Panel('CT MS', '#ff8', '#221'));
36 | stats.showPanel(1);
37 | stats.${domElement}.style.removeProperty('top');
38 | stats.${domElement}.style.bottom = '0px';
39 | document.body.appendChild(stats.${domElement});
40 | requestAnimationFrame(function loop() {
41 |     stats.update();
42 |     requestAnimationFrame(loop);
43 | });
44 | "></script>`;
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | When contributing to this repository, please first discuss the change you wish to make via an issue, maintainers of this repository before making a change.
 4 | 
 5 | Please note we have a [code of conduct](https://raw.githubusercontent.com/stevensona/shader-toy/master/CODE_OF_CONDUCT.md), please follow it in all your interactions with the project.
 6 | 
 7 | ## Building
 8 | 
 9 | ```sh
10 | git clone https://github.com/stevensona/shader-toy.git
11 | cd shader-toy
12 | npm install
13 | npm run webpack
14 | ```
15 | 
16 | ## Debugging
17 | 
18 | Open the project folder in Visual Studio Code. Now you can run the extension via the `Run Extension` button or pressing `F5`. However if you previously built via webpack you can not set breakpoints. If you wish to set breakpoints instead do the following:
19 | 
20 | - Go into `package.json` and change the `main` field to point to `out/src/extension.js`,
21 | - open a new terminal in Visual Studio Code and execute `npm run watch`,
22 | - now when running the extension you can set breakpoints and changes will rebuild automatically.
23 | 
24 | ## Pull Requests
25 | 
26 | The rough process for PRs should be as follows:
27 | 
28 | 1. Update README.md with examples for your new feature and one or more notes in the changelog,
29 | 2. make sure that the `main` field of `package.json` points to `dist/extension.js`,
30 | 3. remove any leftover debugging code or notes from the code,
31 | 4. make sure all files you touched are formatted,
32 | 5. give the maintainers some time to respond to your PR and please notify them if you can not or do not want to continue working the PR,
33 | 6. maintainers will merge your PR once any outstanding issues were resolved.
34 | 


--------------------------------------------------------------------------------
/src/extensions/user_interface/error_display/diagnostics_errors_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../../webview_extension';
 4 | 
 5 | export class DiagnosticsErrorsExtension implements WebviewExtension {
 6 |     public generateContent(): string {
 7 |         return `\
 8 | console.error = function () {
 9 |     if('7' in arguments) {
10 |         let errorRegex = /ERROR: \\d+:(\\d+):\\W(.*)\\n/g;
11 |         let rawErrors = arguments[7];
12 |         let match;
13 |         
14 |         let diagnostics = [];
15 |         let message = '';
16 |         while(match = errorRegex.exec(rawErrors)) {
17 |             let lineNumber = Number(match[1]) - currentShader.LineOffset;
18 |             let error = match[2];
19 |             diagnostics.push({
20 |                 line: lineNumber,
21 |                 message: error
22 |             });
23 |             let lineHighlight = \`${'<a class=\'error\' unselectable onclick=\'revealError(${lineNumber}, "${currentShader.File}")\'>Line ${lineNumber}</a>'}\`;
24 |             message += \`<li>\${lineHighlight}: \${error}</li>\`;
25 |         }
26 |         console.log(message);
27 |         let diagnosticBatch = {
28 |             filename: currentShader.File,
29 |             diagnostics: diagnostics
30 |         };
31 |         if (vscode !== undefined) {
32 |             vscode.postMessage({
33 |                 command: 'showGlslDiagnostic',
34 |                 type: 'error',
35 |                 diagnosticBatch: diagnosticBatch
36 |             });
37 |         }
38 | 
39 |         $('#message').append(\`<h3>Shader failed to compile - \${currentShader.Name} </h3>\`);
40 |         $('#message').append('<ul>');
41 |         $('#message').append(message);
42 |         $('#message').append('</ul>');
43 |     }
44 | };`;
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/extensions/preamble_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from './webview_extension';
 4 | 
 5 | export class ShaderPreambleExtension implements WebviewExtension {
 6 |     private shaderPreamble: string;
 7 | 
 8 |     private preambleExtensions: WebviewExtension[];
 9 | 
10 |     constructor() {
11 |         this.shaderPreamble = 
12 | `\
13 | uniform vec3        iResolution;
14 | uniform float       iTime;
15 | uniform float       iTimeDelta;
16 | uniform int         iFrame;
17 | uniform vec4        iDate;
18 | uniform vec3        iChannelResolution[10];
19 | uniform vec4        iMouse;
20 | uniform vec4        iMouseButton;
21 | uniform mat4        iViewMatrix;
22 | uniform sampler2D   iChannel0;
23 | uniform sampler2D   iChannel1;
24 | uniform sampler2D   iChannel2;
25 | uniform sampler2D   iChannel3;
26 | uniform sampler2D   iChannel4;
27 | uniform sampler2D   iChannel5;
28 | uniform sampler2D   iChannel6;
29 | uniform sampler2D   iChannel7;
30 | uniform sampler2D   iChannel8;
31 | uniform sampler2D   iChannel9;
32 | uniform sampler2D   iKeyboard;
33 | uniform float       iSampleRate;
34 | 
35 | #define iGlobalTime iTime
36 | #define iGlobalFrame iFrame
37 | 
38 | #define SHADER_TOY`;
39 |         this.preambleExtensions = [];
40 |     }
41 | 
42 |     public getShaderPreamble() {
43 |         return this.shaderPreamble + '\n' + this.preambleExtensions.map((ext) => ext.generateContent()).join('\n');
44 |     }
45 |     public getShaderPreambleLineNumbers() {
46 |         return this.getShaderPreamble().split(/\r\n|\n/).length;
47 |     }
48 | 
49 |     public addPreambleExtension(extension: WebviewExtension) {
50 |         this.preambleExtensions.push(extension);
51 |     }
52 | 
53 |     public generateContent(): string {
54 |         return `${this.getShaderPreambleLineNumbers()}`;
55 |     }
56 | }
57 | 


--------------------------------------------------------------------------------
/demos/feedback.glsl:
--------------------------------------------------------------------------------
 1 | // Example shader created for VS Code ShaderToy extension
 2 | 
 3 | #iChannel0 "file://self"
 4 | 
 5 | void main() {
 6 |     vec2 uv = gl_FragCoord.xy / iResolution.xy;
 7 | 
 8 |     vec2 halfResolution = iResolution.xy / 2.0;
 9 | 
10 |     if (iFrame == 0) {
11 |         gl_FragColor.a = 1.0;
12 |         float distFromCenter = length(gl_FragCoord.xy / iResolution.xy - 0.5);
13 |         if (distFromCenter < 0.1) {
14 |             gl_FragColor.r = cos(distFromCenter * 100.0) * 0.5 + 0.5;
15 |             gl_FragColor.g = sin(distFromCenter * 100.0) * 0.5 + 0.5;
16 |         } 
17 |         else if (gl_FragCoord.x < halfResolution.x &&
18 |             gl_FragCoord.y < halfResolution.y) {
19 |             gl_FragColor.r = 1.0;
20 |         }
21 |         else if (gl_FragCoord.x > halfResolution.x) {
22 |             gl_FragColor.g = 1.0;
23 |             if (gl_FragCoord.y > halfResolution.y) {
24 |                 gl_FragColor.b = 1.0;
25 |             }
26 |         }
27 |         else {
28 |             gl_FragColor.r = float(int(gl_FragCoord.x) % 16) / 16.0;
29 |             gl_FragColor.g = float(int(gl_FragCoord.y) % 16) / 16.0;
30 |         }
31 |     }
32 |     else if (iTimeDelta > 0.0) {
33 |         const float offsetSize = 1.0;
34 |         vec2 offsets[4] = vec2[4](
35 |             vec2( 0,  offsetSize / iResolution.y),
36 |             vec2( 0, -offsetSize / iResolution.y),
37 |             vec2( offsetSize / iResolution.x,  0),
38 |             vec2(-offsetSize / iResolution.x,  0)
39 |         );
40 |         gl_FragColor = texture(iChannel0, uv) * 2.0;
41 |         for (int i = 0; i < 4; i++) {
42 |             gl_FragColor += texture(iChannel0, mod(uv + offsets[i] + 1.0, 1.0));
43 |         }
44 |         gl_FragColor /= 6.0;
45 |     } else {
46 |         gl_FragColor = texture(iChannel0, uv);
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/resources/stats.min.js:
--------------------------------------------------------------------------------
1 | // stats.js - http://github.com/mrdoob/stats.js
2 | (function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();
3 | u(++l%c.children.length)},!1);var k=(performance||Date).now(),g=k,a=0,r=e(new f.Panel("FPS","#0ff","#002")),h=e(new f.Panel("MS","#0f0","#020"));if(self.performance&&self.performance.memory)var t=e(new f.Panel("MB","#f08","#201"));u(0);return{REVISION:16,dom:c,addPanel:e,showPanel:u,begin:function(){k=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();h.update(c-k,200);if(c>g+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/
4 | 1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v);
5 | b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f});
6 | 


--------------------------------------------------------------------------------
/src/extensions/uniforms/uniforms_update_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../../typenames';
 4 | import { WebviewExtension } from '../webview_extension';
 5 | 
 6 | export class UniformsUpdateExtension implements WebviewExtension {
 7 |     private content: string;
 8 | 
 9 |     constructor(buffers: Types.BufferDefinition[]) {
10 |         this.content = '';
11 |         this.processBuffers(buffers);
12 |     }
13 | 
14 |     private processBuffers(buffers: Types.BufferDefinition[]) {
15 |         for (const i in buffers) {
16 |             const buffer = buffers[i];
17 |             const uniforms = buffer.CustomUniforms;
18 |             for (const uniform of uniforms) {
19 |                 let uniform_access = `buffers[${i}].UniformValues.${uniform.Name}`;
20 |                 if (uniform.Typename === 'color3') {
21 |                     this.content += `\
22 | let ${uniform.Name} = [ ${uniform_access}[0] / 255.0, ${uniform_access}[1] / 255.0, ${uniform_access}[2] / 255.0 ];
23 | `;
24 |                     uniform_access = uniform.Name;
25 |                 }
26 |                 this.content += `\
27 | buffers[${i}].Shader.uniforms.${uniform.Name} = { type: '${this.mapArrayToShaderType(uniform.Default)}', value: ${uniform_access} };
28 | `;
29 |             }
30 |         }
31 |         this.content += `\
32 | if (vscode !== undefined) {
33 |     vscode.postMessage({
34 |         command: 'updateUniformsGuiOpen',
35 |         value: !dat_gui.closed
36 |     });
37 | }
38 | `;
39 |     }
40 | 
41 |     private mapArrayToShaderType(value: number[]) {
42 |         const l = value.length;
43 |         switch (l) {
44 |         case 1:
45 |             return 'f';
46 |         case 2:
47 |         case 3:
48 |         case 4:
49 |             return `v${l}`;
50 |         default:
51 |             return 'err';
52 |         }
53 |     }
54 | 
55 |     public generateContent(): string {
56 |         return this.content;
57 |     }
58 | }
59 | 


--------------------------------------------------------------------------------
/demos/buffer_a.glsl:
--------------------------------------------------------------------------------
 1 | // Created by aaecheve - https://www.shadertoy.com/view/4ddSz4
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | #iChannel0 "self"
 5 | 
 6 | vec4 readMemory(vec2 coords) {
 7 |     return texture(iChannel0, (coords + 0.5) / iChannelResolution[0].xy);
 8 | }
 9 | 
10 | void mainImage(out vec4 fragColor, in vec2 fragCoord) {
11 |     //Read data
12 |     vec4 data1 = readMemory(vec2(0, 0));
13 |     vec2 pos1 = data1.xy;
14 |     vec2 vel1 = data1.zw;
15 | 
16 |     vec4 data2 = readMemory(vec2(1, 1));
17 |     vec2 pos2 = data2.xy;
18 |     vec2 vel2 = data2.zw;
19 | 
20 |     //Set initial values
21 |     if(pos1.x == 0.0 && pos1.y == 0.0) {
22 |         pos1 = vec2(20, 30);
23 |     }
24 | 
25 |     if(pos2.x == 0.0 && pos2.y == 0.0) {
26 |         pos2 = vec2(iChannelResolution[0].x - 20.0, 30);
27 |     }
28 | 
29 |     if(vel1.x == 0.0 && vel1.y == 0.0) {
30 |         vel1 = vec2(1, 1);
31 |     }
32 | 
33 |     if(vel2.x == 0.0 && vel2.y == 0.0) {
34 |         vel2 = vec2(-1, 1);
35 |     }
36 | 
37 |     //Update positions
38 |     pos1 += vel1;
39 |     pos2 += vel2;
40 | 
41 |     //Check boundaries and bounce
42 |     if(pos1.x > iResolution.x) {
43 |         vel1.x = -1.0;
44 |     }
45 |     if(pos1.x < 0.0) {
46 |         vel1.x = 1.0;
47 |     }
48 |     if(pos1.y > iResolution.y) {
49 |         vel1.y = -1.0;
50 |     }
51 |     if(pos1.y < 0.0) {
52 |         vel1.y = 1.0;
53 |     }
54 | 
55 |     if(pos2.x > iResolution.x) {
56 |         vel2.x = -1.0;
57 |     }
58 |     if(pos2.x < 0.0) {
59 |         vel2.x = 1.0;
60 |     }
61 |     if(pos2.y > iResolution.y) {
62 |         vel2.y = -1.0;
63 |     }
64 |     if(pos2.y < 0.0) {
65 |         vel2.y = 1.0;
66 |     }
67 | 
68 |     //Write data
69 |     if(fragCoord.x < 1.0 && fragCoord.y < 1.0) {
70 |         fragColor = vec4(pos1.x, pos1.y, vel1.x, vel1.y);
71 |     } else if(fragCoord.x < 2.0 && fragCoord.y < 2.0) {
72 |         fragColor = vec4(pos2.x, pos2.y, vel2.x, vel2.y);
73 |     } else {
74 |         discard;
75 |     }
76 | }


--------------------------------------------------------------------------------
/src/extensions/user_interface/pause_button_style_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class PauseButtonStyleExtension implements WebviewExtension {
 6 |     private pauseResourcePath: string;
 7 |     private playResourcePath: string;
 8 | 
 9 |     constructor(getWebviewResourcePath: (relativePath: string) => string) {
10 |         this.pauseResourcePath = getWebviewResourcePath('pause.png');
11 |         this.playResourcePath = getWebviewResourcePath('play.png');
12 |     }
13 | 
14 |     public generateContent(): string {
15 |         return `\
16 | /* Container for pause button */
17 | .button-container, .container {
18 |     text-align: center;
19 |     position: absolute;
20 |     bottom: 0;
21 |     width: 100%;
22 |     height: 80px;
23 |     margin: auto;
24 |     z-index: 1;
25 | }
26 | 
27 | /* Hide the browser's default checkbox */
28 | .button-container input {
29 |     position: absolute;
30 |     opacity: 0;
31 |     cursor: pointer;
32 | }
33 | 
34 | /* Custom checkbox style */
35 | .pause-play {
36 |     position: absolute;
37 |     border: none;
38 |     padding: 30px;
39 |     text-align: center;
40 |     text-decoration: none;
41 |     font-size: 16px;
42 |     border-radius: 8px;
43 |     margin: auto;
44 |     transform: translateX(-50%);
45 |     background: url('${this.pauseResourcePath}');
46 |     background-size: 40px;
47 |     background-repeat: no-repeat;
48 |     background-position: center;
49 |     background-color: rgba(128, 128, 128, 0.5);
50 |     z-index: 1;
51 | }
52 | .button-container:hover input ~ .pause-play {
53 |     background-color: lightgray;
54 |     transition-duration: 0.2s;
55 | }
56 | .button-container:hover input:checked ~ .pause-play {
57 |     background-color: lightgray;
58 |     transition-duration: 0.2s;
59 | }
60 | .button-container input:checked ~ .pause-play {
61 |     background: url('${this.playResourcePath}');
62 |     background-size: 40px;
63 |     background-repeat: no-repeat;
64 |     background-position: center;
65 |     background-color: rgba(128, 128, 128, 0.5);
66 | }`;
67 |     }
68 | }
69 | 


--------------------------------------------------------------------------------
/demos/audio.glsl:
--------------------------------------------------------------------------------
 1 | // Created by inantop - https://www.shadertoy.com/view/XltSDX
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | #iChannel0 "file://./outfoxing.mp3"
 5 | 
 6 | void mainImage( out vec4 fragColor, in vec2 fragCoord )
 7 | {
 8 | 	vec2 uv = fragCoord.xy / iResolution.xy;
 9 |     
10 |     //In shadertoy, audio comes in as a two-row texture.
11 |     //The first row represents the waveform (? - I'm not an audio guy)
12 |     //The second row represents the frequency spectrum (? - Again... no idea what I'm talking about)
13 |     
14 |     //Using our x position in the buffer as a key, we can look up the first row by looking at texture coordinate (x, 0.25).
15 |     //Why 0.25? OpenGL coordinates put (0,0) at the top-left of a pixel, not its center. This means that in a repeating texture
16 |     //the point (0,0) is actually half-way between the top-left pixel and the bottom-right pixel, and would be interpolated.
17 |     vec2 firstRow = vec2(uv.x, 0.25);
18 |     vec2 secondRow = vec2(uv.x, 0.75);
19 |     
20 |     vec4 amplitude = texture(iChannel0, firstRow);
21 |     vec4 frequency = texture(iChannel0, secondRow);
22 |     
23 |     //Now, the return from the textures is a vec4, but these are greyscale textures so all 4 values are the same.
24 |     //Let's output the waveform as red and the spectrum as green
25 |     fragColor = vec4(amplitude.r, frequency.r, 0.0, 1.0);
26 |     
27 |     //<-- That doesn't look like much. This is because we're getting the same value for each y position in the buffer because we only
28 |     //    use x, so naturally it's just vertical bands.
29 |     //    The value we're getting out is some number 0..1, we can visualize it better by placing it on the y axis and drawing black
30 |     //    pixels any time the pixel's y position is greater than this value.
31 |     
32 |     //Try uncommenting this block:
33 |     fragColor = vec4(0.0, 0.0, 0.0, 0.0); //Reset to black
34 |     if(uv.y < amplitude.r)
35 |     {
36 |         fragColor += vec4(1.0, 0.0, 0.0, 1.0); //Add red
37 |     }
38 |     if(uv.y < frequency.r)
39 |     {
40 |         fragColor += vec4(0.0, 1.0, 0.0, 1.0); //Add green
41 |     }
42 | }


--------------------------------------------------------------------------------
/demos/digital.glsl:
--------------------------------------------------------------------------------
 1 | // Created by tayloia - https://www.shadertoy.com/view/MdVcRd
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | // See https://www.shadertoy.com/view/ldKGRR
 5 | 
 6 | // Computes a smooth-edged diamond pixel value (Manhattan distance)
 7 | #define P(i, j, b) \
 8 | 	vec2(.1, b).xyxy * smoothstep(0., 9. / R.y, .1 - abs(i) - abs(j))
 9 | 
10 | // Computes a segment value (length = 0.5)
11 | #define S(i, j, b) \
12 | 	P(i - clamp(i, 0., .5), j, b & 1)
13 | 
14 | // Colon render
15 | #define C \
16 |     x += .5; O += P(x, y + .3, i.w / 50) + P(x, y - .3, i.w / 50); t /= 60
17 | 
18 | // Hyphen render
19 | #define H(b) \
20 | 	++x; O += S(x, y, b)
21 | 
22 | // Computes the horizontal and vertical segments based on a denary digit
23 | #define X(i, j, b) \
24 | 	S(x - i, y - j, b)
25 | #define Y(i, j, b) \
26 | 	S(y - j, x - i, b)
27 | #define D(n) \
28 |     H(892>>n) \
29 |     + X(0., .7, 1005>>n) \
30 |     + X(0., -.7, 877>>n) \
31 |     + Y(-.1, .1, 881>>n) \
32 |     + Y(.6, .1, 927>>n) \
33 |     + Y(-.1, -.6, 325>>n) \
34 |     + Y(.6, -.6, 1019>>n);
35 | 
36 | // Two-digit render
37 | #define Z(n) ; D(n % 10) D(n / 10)
38 | 
39 | void mainImage(out vec4 O, vec2 U)
40 | {
41 |     vec2 R = iResolution.xy;
42 |     U += U - R;
43 |     U /= R.y / 3.; // Global scaling with aspect ratio correction
44 |     O-=O; // Zero the pixel
45 | 
46 |     float x = U.x - U.y * .2 - 2.8, // Slight skew to slant the digits
47 |           y = --U.y;
48 |     ivec4 i = ivec4(iDate); // Convert everything to integers
49 |     int t = i.w;
50 |     i.w = int(iDate.w * 100.) % 100 // Replace with centiseconds
51 |     
52 |     // Seconds (preceded by a colon)
53 |     Z(t % 60)
54 |     C
55 |     
56 |     // Minutes (preceded by a colon)
57 |     Z(t % 60)
58 |     C
59 |     
60 |     // Hours
61 |     Z(t)
62 | 
63 |     // Smaller digits
64 |     x /= .6;
65 |     y /= .6;
66 |     R *= .6;
67 | 
68 |     // Centiseconds
69 |     x -= 14.;
70 |     y += .53
71 |     Z(i.w)
72 | 
73 |     // Day (preceded by a hyphen)
74 |     x -= .8;
75 |     y += 3.
76 |     Z(i.z)
77 |     H(1)
78 | 
79 |     // Month (preceded by a hyphen)
80 |     Z((i.y + 1)) // Is it a bug in shadertoy that we have to add one?
81 |     H(1)
82 | 
83 | 	// Year
84 |     Z(i.x % 100)
85 |     Z(i.x / 100)
86 | }
87 | 


--------------------------------------------------------------------------------
/src/extensions/keyboard/keyboard_shader_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { WebviewExtension } from '../webview_extension';
 4 | 
 5 | export class KeyboardShaderExtension implements WebviewExtension {
 6 |     private shaderPreamble: string;
 7 |     private shaderPreambleLineNumbers: number;
 8 | 
 9 |     constructor() {
10 |         this.shaderPreamble =  `\
11 | const int Key_Backspace = 8, Key_Tab = 9, Key_Enter = 13, Key_Shift = 16, Key_Ctrl = 17, Key_Alt = 18, Key_Pause = 19, Key_Caps = 20, Key_Escape = 27, Key_PageUp = 33, Key_PageDown = 34, Key_End = 35,
12 |     Key_Home = 36, Key_LeftArrow = 37, Key_UpArrow = 38, Key_RightArrow = 39, Key_DownArrow = 40, Key_Insert = 45, Key_Delete = 46, Key_0 = 48, Key_1 = 49, Key_2 = 50, Key_3 = 51, Key_4 = 52,
13 |     Key_5 = 53, Key_6 = 54, Key_7 = 55, Key_8 = 56, Key_9 = 57, Key_A = 65, Key_B = 66, Key_C = 67, Key_D = 68, Key_E = 69, Key_F = 70, Key_G = 71, Key_H = 72,
14 |     Key_I = 73, Key_J = 74, Key_K = 75, Key_L = 76, Key_M = 77, Key_N = 78, Key_O = 79, Key_P = 80, Key_Q = 81, Key_R = 82, Key_S = 83, Key_T = 84, Key_U = 85,
15 |     Key_V = 86, Key_W = 87, Key_X = 88, Key_Y = 89, Key_Z = 90, Key_LeftWindow = 91, Key_RightWindows = 92, Key_Select = 93, Key_Numpad0 = 96, Key_Numpad1 = 97, Key_Numpad2 = 98, Key_Numpad3 = 99,
16 |     Key_Numpad4 = 100, Key_Numpad5 = 101, Key_Numpad6 = 102, Key_Numpad7 = 103, Key_Numpad8 = 104, Key_Numpad9 = 105, Key_NumpadMultiply = 106, Key_NumpadAdd = 107, Key_NumpadSubtract = 109, Key_NumpadPeriod = 110, Key_NumpadDivide = 111, Key_F1 = 112, Key_F2 = 113, Key_F3 = 114, Key_F4 = 115, Key_F5 = 116, Key_F6 = 117, Key_F7 = 118, Key_F8 = 119, Key_F9 = 120, Key_F10 = 121, Key_F11 = 122, Key_F12 = 123, Key_NumLock = 144, Key_ScrollLock = 145,
17 |     Key_SemiColon = 186, Key_Equal = 187, Key_Comma = 188, Key_Dash = 189, Key_Period = 190, Key_ForwardSlash = 191, Key_GraveAccent = 192, Key_OpenBracket = 219, Key_BackSlash = 220, Key_CloseBraket = 221, Key_SingleQuote = 222;
18 | 
19 | bool isKeyDown(int key) {
20 |     vec2 uv = vec2(float(key) / 255.0, 0.125);
21 |     return texture2D(iKeyboard, uv).r > 0.0;
22 | }
23 | bool isKeyPressed(int key) {
24 |     vec2 uv = vec2(float(key) / 255.0, 0.375);
25 |     return texture2D(iKeyboard, uv).r > 0.0;
26 | }
27 | bool isKeyToggled(int key) {
28 |     vec2 uv = vec2(float(key) / 255.0, 0.625);
29 |     return texture2D(iKeyboard, uv).r > 0.0;
30 | }
31 | bool isKeyReleased(int key) {
32 |     vec2 uv = vec2(float(key) / 255.0, 0.875);
33 |     return texture2D(iKeyboard, uv).r > 0.0;
34 | }`;
35 |         this.shaderPreambleLineNumbers = this.shaderPreamble.split(/\r\n|\n/).length;
36 |     }
37 | 
38 |     public getShaderPreamble() {
39 |         return this.shaderPreamble;
40 |     }
41 |     public getShaderPreambleLineNumbers() {
42 |         return this.shaderPreambleLineNumbers;
43 |     }
44 | 
45 |     public generateContent(): string {
46 |         return this.getShaderPreamble();
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/extensions/buffers/buffers_init_extension.ts:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import * as Types from '../../typenames';
 4 | import { WebviewExtension } from '../webview_extension';
 5 | 
 6 | export class BuffersInitExtension implements WebviewExtension {
 7 |     private content: string;
 8 | 
 9 |     constructor(buffers: Types.BufferDefinition[]) {
10 |         this.content = '';
11 |         this.processBuffers(buffers);
12 |     }
13 | 
14 |     private processBuffers(buffers: Types.BufferDefinition[]) {
15 |         for (const buffer of buffers) {
16 |             // Create a RenderTarget for all but the final buffer
17 |             let target = 'null';
18 |             let pingPongTarget = 'null';
19 |             if (buffer !== buffers[buffers.length - 1]) {
20 |                 target = 'new THREE.WebGLRenderTarget(resolution.x, resolution.y, { type: framebufferType })';
21 |             }
22 |             if (buffer.UsesSelf) {
23 |                 pingPongTarget = 'new THREE.WebGLRenderTarget(resolution.x, resolution.y, { type: framebufferType })';
24 |             }
25 | 
26 |             this.content += `\
27 | buffers.push({
28 |     Name: '${buffer.Name}',
29 |     File: '${buffer.File}',
30 |     LineOffset: ${buffer.LineOffset},
31 |     Target: ${target},
32 |     ChannelResolution: Array(10).fill(new THREE.Vector3(0,0,0)),
33 |     PingPongTarget: ${pingPongTarget},
34 |     PingPongChannel: ${buffer.SelfChannel},
35 |     Dependents: ${JSON.stringify(buffer.Dependents)},
36 |     Shader: new THREE.ShaderMaterial({
37 |         fragmentShader: document.getElementById('${buffer.Name}').textContent,
38 |         depthWrite: false,
39 |         depthTest: false,
40 |         uniforms: {
41 |             iResolution: { type: 'v3', value: resolution },
42 |             iTime: { type: 'f', value: 0.0 },
43 |             iTimeDelta: { type: 'f', value: 0.0 },
44 |             iFrame: { type: 'i', value: 0 },
45 |             iMouse: { type: 'v4', value: mouse },
46 |             iMouseButton: { type: 'v2', value: mouseButton },
47 |             iViewMatrix: {type: 'm44', value: new THREE.Matrix4() },
48 |             iChannelResolution: { type: 'v3v', value: Array(10).fill(new THREE.Vector3(0,0,0)) },
49 | 
50 |             iDate: { type: 'v4', value: date },
51 |             iSampleRate: { type: 'f', value: audioContext.sampleRate },
52 | 
53 |             iChannel0: { type: 't' },
54 |             iChannel1: { type: 't' },
55 |             iChannel2: { type: 't' },
56 |             iChannel3: { type: 't' },
57 |             iChannel4: { type: 't' },
58 |             iChannel5: { type: 't' },
59 |             iChannel6: { type: 't' },
60 |             iChannel7: { type: 't' },
61 |             iChannel8: { type: 't' },
62 |             iChannel9: { type: 't' },
63 | 
64 |             resolution: { type: 'v2', value: resolution },
65 |             time: { type: 'f', value: 0.0 },
66 |             mouse: { type: 'v2', value: normalizedMouse },
67 |         }
68 |     })
69 | });`;
70 |         }
71 |     }
72 | 
73 |     public generateContent(): string {
74 |         return this.content;
75 |     }
76 | }
77 | 


--------------------------------------------------------------------------------
/demos/volume_points_1.glsl:
--------------------------------------------------------------------------------
 1 | // Created by FlyGuy - https://www.shadertoy.com/view/MtdcDn
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | #iChannel0 "volume_points_0.glsl"
 5 | 
 6 | #include "volume_points_common.glsl"
 7 | 
 8 | #define DEBUG 0 //Visualize the planes
 9 | #define ADD 1
10 | #define ALPHA 2
11 | 
12 | #define BLENDMODE ADD
13 | 
14 | #iUniform float CUBE_SIZE = 1.5 in { 0.5, 3.5 }
15 | #iUniform float GRID_RES = 17.0 in { 8, 32 }
16 | #iUniform float POINT_SIZE = 0.375 in { 0.01, 1.5 }
17 | #iUniform color3 COLOR_BOOST = color3(1, 1, 1)
18 | #iUniform float ALPHA_BOOST = 3.0 in { 0, 3 }
19 | 
20 | void mainImage( out vec4 fragColor, in vec2 fragCoord )
21 | {
22 |     vec2 res = iResolution.xy / iResolution.y;
23 | 	vec2 uv = fragCoord.xy / iResolution.y;
24 |     
25 |     //Camera setup
26 |     vec3 camAngles = vec3((iMouse.xy / iResolution.xy) * pi, 0);
27 |     camAngles.xy *= vec2(2.0, 1.0);
28 |     
29 |     //Thumbnail mode
30 |     if(iMouse.xy == vec2(0))
31 |     {
32 |     	camAngles = vec3(iTime*0.6, 1.0, 0.0);   
33 |     }
34 |     
35 |     mat3 camMatrix = rotate(camAngles.yzx);
36 |     vec3 camOrig = vec3(0, 0,-1.5) * camMatrix; 
37 |     vec3 camDir = normalize(vec3(uv - res/2.0, 0.5)) * camMatrix;
38 |     
39 |     //Setup plane axis,initial location, and step direction based on ray direction
40 |     vec3 planeNorm = nearestAxis(camDir);
41 |     vec3 planePos = planeNorm * ((GRID_RES-1.0)/GRID_RES)/2.0 * CUBE_SIZE;
42 |     vec3 planeDelta = planeNorm / GRID_RES * CUBE_SIZE;
43 |     
44 |     vec3 outColor = vec3(0);
45 |     vec3 volRes = volumeSize(iChannel0);
46 |     
47 |     for(float i = 0.0;i < GRID_RES;i++)
48 |     {
49 |         vec3 hit = rayPlane(camOrig, camDir, planePos, planeNorm) / CUBE_SIZE;
50 |         
51 | 		planePos -= planeDelta;
52 |         
53 |         if(max3(abs(hit)) < 0.5) //Only draw areas inside the cube.
54 |         {
55 |             vec3 pointUVW = fract(((hit-0.5)*GRID_RES))-0.5;
56 |             vec3 volUVW = (floor(((hit-0.5)*GRID_RES))+0.5) / GRID_RES;
57 |             
58 |             //Sample the pseudo-volumetric texture in BufA
59 |             vec4 vCol = texture3DLinear(iChannel0, volUVW, volRes);
60 |             vCol = clamp(vCol * vec4(COLOR_BOOST, ALPHA_BOOST), 0.0, 1.0);
61 |             
62 |             //Make the points face the camera.
63 |             //This makes the transition between planes seamless.
64 |             pointUVW = cross(pointUVW,camDir);
65 |             
66 |             //Shape of the points
67 |             float pointMask = smoothstep(POINT_SIZE*vCol.a,
68 |                                          POINT_SIZE*vCol.a*0.8,
69 |                                          length(pointUVW));
70 |             
71 |             #if BLENDMODE == ADD
72 |             	outColor += 0.5*vCol.rgb*pointMask*vCol.a;
73 |             #elif BLENDMODE == ALPHA
74 |             	outColor = mix(outColor, vCol.rgb, pointMask*vCol.a);
75 |             #elif BLENDMODE == DEBUG
76 |             	outColor = (planeNorm*.5+.5)*(i/GRID_RES);
77 |             #endif
78 |         }
79 | 	}
80 | 
81 | 	fragColor = vec4(outColor,1.0);
82 | }


--------------------------------------------------------------------------------
/demos/volume_points_common.glsl:
--------------------------------------------------------------------------------
 1 | // Created by FlyGuy - https://www.shadertoy.com/view/MtdcDn
 2 | // Adapted for VS Code Shadertoy
 3 | 
 4 | const float pi = atan(1.0) * 4.0;
 5 | const float tau = atan(1.0) * 8.0;
 6 |  
 7 | //Rotation matrix from euler (X/Y/Z) angles.
 8 | mat3 rotate(vec3 angles)
 9 | {
10 |     vec3 c = cos(angles);
11 |     vec3 s = sin(angles);
12 |     
13 |     mat3 rotX = mat3( 1.0, 0.0, 0.0, 0.0,c.x,s.x, 0.0,-s.x, c.x);
14 |     mat3 rotY = mat3( c.y, 0.0,-s.y, 0.0,1.0,0.0, s.y, 0.0, c.y);
15 |     mat3 rotZ = mat3( c.z, s.z, 0.0,-s.z,c.z,0.0, 0.0, 0.0, 1.0);
16 | 
17 |     return rotX * rotY * rotZ;
18 | }
19 | 
20 | /*Nearest axis to 'dir':
21 | X: (+/-1, 0, 0)
22 | Y: (0, +/-1, 0)
23 | Z: (0, 0, +/-1)
24 | */
25 | vec3 nearestAxis(vec3 dir)
26 | {
27 |     vec3 asign = sign(dir);
28 |     dir = abs(dir);
29 |     float amax = max(max(dir.x,dir.y),dir.z);
30 |                      
31 |     if(amax == dir.x){ return vec3(asign.x,0,0); }
32 |     if(amax == dir.y){ return vec3(0,asign.y,0); }
33 |     if(amax == dir.z){ return vec3(0,0,asign.z); }
34 |     
35 |     return vec3(0);
36 | }
37 | 
38 | //Intersection point of ray (rorg, rdir) with plane (porg, pnrm)
39 | //Assumes rdir & pnrm are normalized
40 | vec3 rayPlane(vec3 rorg, vec3 rdir, vec3 porg, vec3 pnrm)
41 | {
42 |     float t = dot(porg - rorg, pnrm) / dot(pnrm, rdir);
43 |     return rorg+rdir*t;
44 | }
45 | 
46 | //Maximum component of a vec3.
47 | float max3(vec3 v)
48 | {
49 |     return max(max(v.x,v.y),v.z); 
50 | }
51 | 
52 | //Calculate maximum volumetric resolution of a 2D texture.
53 | vec3 volumeSize(sampler2D tex)
54 | {
55 |     vec2 size2D = vec2(textureSize(tex,0));
56 | 	return vec3(floor(pow(size2D.x*size2D.y, 1.0/3.0)));
57 | }
58 | 
59 | vec3 volumeSize(vec2 size2D)
60 | {
61 | 	return vec3(floor(pow(size2D.x*size2D.y, 1.0/3.0)));
62 | }
63 | 
64 | //Samples a texture as a psuedo-volumetric buffer.
65 | vec4 texture3D(sampler2D tex, vec3 uvw, vec3 vres)
66 | {
67 |     vec2 texRes = vec2(textureSize(tex,0));
68 |     uvw = mod(floor(uvw * vres), vres);
69 |     float idx = (uvw.z * (vres.x*vres.y)) + (uvw.y * vres.x) + uvw.x;
70 |     ivec2 uv = ivec2(mod(idx, texRes.x), floor(idx / texRes.x));
71 |     return texelFetch(tex, uv, 0);
72 | }
73 | 
74 | //texture3D with linear sampling.
75 | vec4 texture3DLinear(sampler2D tex, vec3 uvw, vec3 vres)
76 | {
77 |     vec3 blend = fract(uvw*vres);
78 |     vec4 off = vec4(1.0/vres, 0.0);
79 |     
80 |     vec4 b000 = texture3D(tex, uvw + off.www, vres);
81 |     vec4 b100 = texture3D(tex, uvw + off.xww, vres);
82 |     
83 |     vec4 b010 = texture3D(tex, uvw + off.wyw, vres);
84 |     vec4 b110 = texture3D(tex, uvw + off.xyw, vres);
85 |     
86 |     vec4 b001 = texture3D(tex, uvw + off.wwz, vres);
87 |     vec4 b101 = texture3D(tex, uvw + off.xwz, vres);
88 |     
89 |     vec4 b011 = texture3D(tex, uvw + off.wyz, vres);
90 |     vec4 b111 = texture3D(tex, uvw + off.xyz, vres);
91 |     
92 |     return mix(mix(mix(b000,b100,blend.x), mix(b010,b110,blend.x), blend.y), 
93 |                mix(mix(b001,b101,blend.x), mix(b011,b111,blend.x), blend.y),
94 |                blend.z);
95 | }
96 | 


--------------------------------------------------------------------------------
/src/typenames.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | export class Mouse {
  4 |     x: number = -1;
  5 |     y: number = -1;
  6 |     z: number = -1;
  7 |     w: number = -1;
  8 | }
  9 | export class NormalizedMouse {
 10 |     x: number = 0;
 11 |     y: number = 0;
 12 | }
 13 | export type Keys = number[];
 14 | export type Position = [number, number, number];
 15 | export type Quaternion = [number, number, number, number];
 16 | export type UniformsGuiStartingData = {
 17 |     Open: boolean;
 18 |     Values: Map<string, number[]>;
 19 | };
 20 | export class RenderStartingData {
 21 |     Paused: boolean = false;
 22 |     Time: number = 0;
 23 |     Mouse: Mouse = new Mouse();
 24 |     NormalizedMouse: NormalizedMouse = new NormalizedMouse();
 25 |     Keys: Keys = [];
 26 |     FlyControlPosition: Position = [0, 0, 0];
 27 |     FlyControlRotation: Quaternion = [0, 0, 0, 1];
 28 |     UniformsGui: UniformsGuiStartingData = { Open: false, Values: new Map<string, number[]>() };
 29 | }
 30 | 
 31 | export enum TextureMagFilter {
 32 |     Linear  = 'Linear',
 33 |     Nearest = 'Nearest',
 34 | }
 35 | export enum TextureMinFilter {
 36 |     Nearest                 = 'Nearest',
 37 |     NearestMipMapNearest    = 'NearestMipMapNearest',
 38 |     NearestMipMapLinear     = 'NearestMipMapLinear',
 39 |     Linear                  = 'Linear',
 40 |     LinearMipMapNearest     = 'LinearMipMapNearest',
 41 |     LinearMipMapLinear      = 'LinearMipMapLinear',
 42 | }
 43 | export enum TextureWrapMode {
 44 |     Repeat  = 'Repeat',
 45 |     Clamp   = 'Clamp',
 46 |     Mirror  = 'Mirror',
 47 | }
 48 | export enum TextureType {
 49 |     Texture2D   = 'Texture2D',
 50 |     CubeMap     = 'CubeMap',
 51 | }
 52 | 
 53 | export type TextureDefinition = {
 54 |     Channel: number,
 55 |     File: string,
 56 |     Buffer?: string,
 57 |     BufferIndex?: number,
 58 |     LocalTexture?: string,
 59 |     RemoteTexture?: string,
 60 |     Self?: boolean,
 61 |     Mag?: TextureMagFilter,
 62 |     MagLine?: number,
 63 |     Min?: TextureMinFilter,
 64 |     MinLine?: number,
 65 |     Wrap?: TextureWrapMode,
 66 |     WrapLine?: number,
 67 |     Type?: TextureType,
 68 |     TypeLine?: number,
 69 | };
 70 | export type AudioDefinition = {
 71 |     Channel: number,
 72 |     LocalPath?: string,
 73 |     RemotePath?: string,
 74 |     UserPath: string
 75 | };
 76 | export type UniformDefinition = {
 77 |     Name: string,
 78 |     Typename: string,
 79 |     Default: number[],
 80 |     Min?: number[],
 81 |     Max?: number[],
 82 |     Step?: number[]
 83 | };
 84 | export type BufferDependency = {
 85 |     Index: number,
 86 |     Channel: number
 87 | };
 88 | export type IncludeDefinition = {
 89 |     Name: string,
 90 |     File: string,
 91 |     Code: string,
 92 |     LineCount: number
 93 | };
 94 | export type BufferDefinition = {
 95 |     Name: string,
 96 |     File: string,
 97 |     Code: string,
 98 |     TextureInputs: TextureDefinition[],
 99 |     AudioInputs: AudioDefinition[],
100 |     CustomUniforms: UniformDefinition[],
101 |     UsesSelf: boolean,
102 |     SelfChannel: number,
103 |     Dependents: BufferDependency[],
104 |     LineOffset: number
105 |     Includes: IncludeDefinition[],
106 |     UsesKeyboard?: boolean,
107 |     UsesFirstPersonControls?: boolean,
108 | };
109 | 
110 | export type Diagnostic = {
111 |     line: number,
112 |     message: string
113 | };
114 | export type DiagnosticBatch = {
115 |     filename: string,
116 |     diagnostics: Diagnostic[]
117 | };
118 | 
119 | export type BoxedValue<T> = { Value: T };
120 | 


--------------------------------------------------------------------------------
/demos/cubemap.glsl:
--------------------------------------------------------------------------------
  1 | // Created by Klems - https://www.shadertoy.com/view/4dj3zV
  2 | // Adapted for VS Code Shadertoy
  3 | 
  4 | #iChannel0 "file://cubemap/yokohama_{}.jpg"
  5 | #iChannel0::Type "CubeMap"
  6 | #iChannel0::MinFilter "LinearMipMapLinear"
  7 | 
  8 | #define PI 					3.14159265359
  9 | #define METABALLS 			7
 10 | #define METABALLS_TRESHOLD 	1.0
 11 | 
 12 | vec2 V;
 13 | #define rot(a) mat2( V= sin(vec2(1.57, 0) + a), -V.y, V.x)
 14 | 
 15 | #define HASHSCALE1 .1031
 16 | float hash12(vec2 p) {
 17 | 	vec3 p3  = fract(vec3(p.xyx) * HASHSCALE1);
 18 |     p3 += dot(p3, p3.yzx + 19.19);
 19 |     return fract((p3.x + p3.y) * p3.z);
 20 | }
 21 | 
 22 | vec4 balls[METABALLS];
 23 | 
 24 | float blerp(float x, float y0, float y1, float y2, float y3) {
 25 | 	float a = y3 - y2 - y0 + y1;
 26 | 	float b = y0 - y1 - a;
 27 | 	float c = y2 - y0;
 28 | 	float d = y1;
 29 | 	return a * x * x * x + b * x * x + c * x + d;
 30 | }
 31 | 
 32 | float perlin(float x, float h) {
 33 | 	float a = floor(x);
 34 | 	return blerp(mod(x, 1.0),
 35 | 		hash12(vec2(a-1.0, h)), hash12(vec2(a-0.0, h)),
 36 | 		hash12(vec2(a+1.0, h)), hash12(vec2(a+2.0, h)));
 37 | }
 38 | 
 39 | float metaballs(vec3 p) {
 40 | 	float value = 0.0;
 41 | 	for (int i = 0 ; i < METABALLS ; i++) {
 42 | 		vec3 temp = p - (balls[i].xyz);
 43 | 		value += (balls[i].w) / dot(temp, temp);
 44 | 	}
 45 | 	return METABALLS_TRESHOLD - value;
 46 | }
 47 | 
 48 | vec3 gradient(vec3 p) {
 49 | 	//analytical gradient (metaballs only)
 50 | 	vec3 value = vec3(0.0);
 51 | 	for (int i = 0 ; i < METABALLS ; i++) {
 52 | 		vec3 a = p - (balls[i].xyz);
 53 | 		float b = dot(a, a);
 54 | 		value += 2.0*(balls[i].w)*(a/(b*b));
 55 | 	}
 56 | 	return value;
 57 | }
 58 | 
 59 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
 60 | 	
 61 | 	// update balls
 62 | 	for (int i = 0 ; i < METABALLS ; i++) {
 63 | 		float h = float(i)*float(METABALLS);
 64 | 		float size = float(i*i)*0.3 + 1.0;
 65 | 		float x    = perlin(iTime*1.412/size, h+1.0)*15.0-7.5;
 66 | 		float y    = perlin(iTime*1.641/size, h+2.0)*15.0-7.5;
 67 | 		float z    = perlin(iTime*1.293/size, h+3.0)*12.0-6.0;
 68 | 		balls[i] = vec4(x, y, z, size);
 69 | 	}
 70 | 	
 71 | 	vec2 uv = fragCoord.xy / iResolution.xy * 2.0 - 1.0;
 72 | 	uv.y *= iResolution.y / iResolution.x;
 73 | 	
 74 | 	vec3 from = vec3(-20, 0, 0);
 75 | 	vec3 dir = normalize(vec3(uv * 1.1, 1.0));
 76 | 	dir.xz *= rot(PI*.5);
 77 |     
 78 |     vec2 rotv = vec2(0);
 79 |     if (iMouse.z > 0.0) {
 80 |         rotv = vec2((iMouse.xy - iResolution.xy*0.5)*0.01);
 81 |     } else {
 82 |         rotv = vec2(iTime*0.1, sin(iTime*0.3)*0.2);
 83 |     }
 84 |     
 85 |     mat2 rot1 = rot(rotv.x);
 86 |     mat2 rot2 = rot(-rotv.y);
 87 |     dir.xy *= rot2;
 88 |     from.xy *= rot2;
 89 |     dir.xz *= rot1;
 90 |     from.xz *= rot1;
 91 |     
 92 | 	bool set = false;
 93 | 	float totdist = 0.0;
 94 |     totdist += metaballs(from)*hash12(fragCoord.xy);
 95 | 	for (int i = 0 ; i < 50 ; i++) {
 96 | 		if (set) continue;
 97 |         vec3 p = from + totdist * dir;
 98 |         float dist = metaballs(p)*2.0;
 99 |         totdist += max(0.05, dist);
100 |         if (dist < 0.01) {
101 |             set = true;
102 |         }
103 | 	}
104 |     
105 |     vec3 color = vec3(0);
106 |     
107 |     if (set) {
108 |         vec3 p = from + totdist * dir;
109 |         vec3 norm = normalize(gradient(p));
110 |         color = texture(iChannel0, reflect(dir, norm),1.5).rgb;
111 |         dir = reflect(dir, norm);
112 |     } else {
113 |         color = texture(iChannel0, dir).rgb;
114 |     }
115 |     
116 | 	fragColor = vec4(color, 1.0);
117 | }


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at vingine.dev@gmail.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/demos/keyboard.glsl:
--------------------------------------------------------------------------------
  1 | // Created by iq - https://www.shadertoy.com/view/lsXGzf
  2 | // Adapted for VS Code Shadertoy
  3 | 
  4 | #iKeyboard
  5 | 
  6 | // An example showing how to use the keyboard input.
  7 | //
  8 | // Row 0: contain the current state of the 256 keys. 
  9 | // Row 1: contains Keypress.
 10 | // Row 2: contains a toggle for every key.
 11 | // Row 3: contains Keyrelease.
 12 | //
 13 | // Texel positions correspond to ASCII codes. Press arrow keys to test.
 14 | 
 15 | // #define USE_TEXEL_FETCH
 16 | 
 17 | const int KEY_LEFT  = Key_LeftArrow;
 18 | const int KEY_UP    = Key_UpArrow;
 19 | const int KEY_RIGHT = Key_RightArrow;
 20 | const int KEY_DOWN  = Key_DownArrow;
 21 | 
 22 | #ifdef USE_TEXEL_FETCH
 23 | float state(int key) {
 24 |     return texelFetch(iKeyboard, ivec2(key, 0), 0).x;
 25 | }
 26 | float keypress(int key) {
 27 |     return texelFetch(iKeyboard, ivec2(key, 1), 0).x;
 28 | }
 29 | float keyrelease(int key) {
 30 |     return texelFetch(iKeyboard, ivec2(key, 3), 0).x;
 31 | }
 32 | float toggle(int key) {
 33 |     return texelFetch(iKeyboard, ivec2(key, 2), 0).x;
 34 | }
 35 | #else
 36 | float state(int key) {
 37 |     return isKeyDown(key) ? 1.0 : 0.0;
 38 | }
 39 | float keypress(int key) {
 40 |     return isKeyPressed(key) ? 1.0 : 0.0;
 41 | }
 42 | float keyrelease(int key) {
 43 |     return isKeyReleased(key) ? 1.0 : 0.0;
 44 | }
 45 | float toggle(int key) {
 46 |     return isKeyToggled(key) ? 1.0 : 0.0;
 47 | }
 48 | #endif
 49 | 
 50 | void stateColor(inout vec3 col, const in vec2 uv,
 51 |                 const in vec3 keyCol, const in vec2 keyPos, const in int key) {
 52 |     col = mix(col, keyCol,
 53 |         (1.0 - smoothstep(0.3, 0.31, length(uv - keyPos))) * 
 54 |         (0.3 + 0.7 * state(key)));
 55 | }
 56 | void keypressColor(inout vec3 col, const in vec2 uv,
 57 |                    const in vec3 keyCol, const in vec2 keyPos, const in int key) {
 58 |     col = mix(col, keyCol,
 59 |         (1.0 - smoothstep(0.0, 0.01, abs(length(uv - keyPos) - 0.35))) *
 60 |         keypress(key));
 61 | }
 62 | void keyreleaseColor(inout vec3 col, const in vec2 uv,
 63 |                    const in vec3 keyCol, const in vec2 keyPos, const in int key) {
 64 |     col = mix(col, keyCol,
 65 |         (1.0 - smoothstep(0.0, 0.01, abs(length(uv - keyPos) - 0.4))) *
 66 |         keyrelease(key));
 67 | }
 68 | void toggleColor(inout vec3 col, const in vec2 uv,
 69 |                    const in vec3 keyCol, const in vec2 keyPos, const in int key) {
 70 |     col = mix(col, keyCol,
 71 |         (1.0 - smoothstep(0.0, 0.01, abs(length(uv - keyPos) - 0.3))) *
 72 |         toggle(key));
 73 | }
 74 | 
 75 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
 76 |     const vec3 red = vec3(1.0,0.0,0.0);
 77 |     const vec3 yellow = vec3(1.0,1.0,0.0);
 78 |     const vec3 green = vec3(0.0,1.0,0.0);
 79 |     const vec3 blue = vec3(0.0,0.0,1.0);
 80 | 
 81 |     const vec2 redPos = vec2(-0.75,0.0);
 82 |     const vec2 yellowPos = vec2(0.0,0.5);
 83 |     const vec2 greenPos = vec2(0.75,0.0);
 84 |     const vec2 bluePos = vec2(0.0,-0.5);
 85 | 
 86 |     vec2 uv = (-iResolution.xy + 2.0*fragCoord) * 2.0 / iResolution.y;
 87 |     vec3 col = vec3(0.0);
 88 | 
 89 |     // state
 90 |     stateColor(col, uv, red, redPos, KEY_LEFT);
 91 |     stateColor(col, uv, yellow, yellowPos, KEY_UP);
 92 |     stateColor(col, uv, green, greenPos, KEY_RIGHT);
 93 |     stateColor(col, uv, blue, bluePos, KEY_DOWN);
 94 | 
 95 |     // keypress
 96 |     keypressColor(col, uv, red, redPos, KEY_LEFT);
 97 |     keypressColor(col, uv, yellow, yellowPos, KEY_UP);
 98 |     keypressColor(col, uv, green, greenPos, KEY_RIGHT);
 99 |     keypressColor(col, uv, blue, bluePos, KEY_DOWN);
100 | 
101 |     // keyrelease
102 |     keyreleaseColor(col, uv, red, redPos, KEY_LEFT);
103 |     keyreleaseColor(col, uv, yellow, yellowPos, KEY_UP);
104 |     keyreleaseColor(col, uv, green, greenPos, KEY_RIGHT);
105 |     keyreleaseColor(col, uv, blue, bluePos, KEY_DOWN);
106 |     
107 |     // toggle
108 |     toggleColor(col, uv, red, redPos, KEY_LEFT);
109 |     toggleColor(col, uv, yellow, yellowPos, KEY_UP);
110 |     toggleColor(col, uv, green, greenPos, KEY_RIGHT);
111 |     toggleColor(col, uv, blue, bluePos, KEY_DOWN);
112 | 
113 |     fragColor = vec4(col,1.0);
114 | }


--------------------------------------------------------------------------------
/src/webviewcontentassembler.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import { WebviewContent } from './webviewcontent';
  4 | import { Context } from './context';
  5 | import { WebviewExtension } from './extensions/webview_extension';
  6 | 
  7 | enum ModuleType {
  8 |     Insert,
  9 |     Replace
 10 | }
 11 | type InsertModule = {
 12 |     Type: ModuleType.Insert,
 13 |     Extension: WebviewExtension
 14 | };
 15 | type ReplaceModule = {
 16 |     Type: ModuleType.Replace,
 17 |     ReplaceContent: string,
 18 |     Extension: WebviewExtension,
 19 | };
 20 | 
 21 | type WebviewModule = {
 22 |     Module: InsertModule | ReplaceModule,
 23 |     LineNumber: number,
 24 | };
 25 | 
 26 | export class WebviewContentAssembler {
 27 |     private webviewContent: WebviewContent;
 28 |     private webviewModules: WebviewModule[];
 29 |     private webviewContentLineMappings: Map<string, number[]>;
 30 |     
 31 |     constructor(context: Context) {
 32 |         this.webviewContent = new WebviewContent(context.getResourceUri('webview_base.html').fsPath);
 33 |         this.webviewModules = [];
 34 | 
 35 |         this.webviewContentLineMappings = new Map<string, number[]>();
 36 |         let lineNumber = 1;
 37 |         for (let line of this.webviewContent.getLines()) {
 38 |             line = line.trim();
 39 |             const lines = this.webviewContentLineMappings.get(line);
 40 |             if (lines !== undefined) {
 41 |                 lines.push(lineNumber);
 42 |             }
 43 |             else {
 44 |                 this.webviewContentLineMappings.set(line, [ lineNumber ]);
 45 |             }
 46 |             lineNumber++;
 47 |         }
 48 |     }
 49 | 
 50 |     public addWebviewModule(extension: WebviewExtension, originalLine: string) {
 51 |         const insertModule: InsertModule = {
 52 |             Type: ModuleType.Insert,
 53 |             Extension: extension
 54 |         };
 55 | 
 56 |         originalLine = originalLine.trim();
 57 |         const lines = this.webviewContentLineMappings.get(originalLine);
 58 |         if (lines !== undefined) {
 59 |             for (const lineNumber of lines) {
 60 |                 const webviewModule: WebviewModule = {
 61 |                     Module: insertModule,
 62 |                     LineNumber: lineNumber
 63 |                 };
 64 |                 this.insertModule(webviewModule);
 65 |             }
 66 |         }
 67 |     }
 68 | 
 69 |     public addReplaceModule(extension: WebviewExtension, originalLine: string, replaceContent: string) {
 70 |         const replaceModule: ReplaceModule = {
 71 |             Type: ModuleType.Replace,
 72 |             ReplaceContent: replaceContent,
 73 |             Extension: extension
 74 |         };
 75 | 
 76 |         originalLine = originalLine.trim();
 77 |         const lines = this.webviewContentLineMappings.get(originalLine);
 78 |         if (lines !== undefined) {
 79 |             for (const lineNumber of lines) {
 80 |                 const webviewModule: WebviewModule = {
 81 |                     Module: replaceModule,
 82 |                     LineNumber: lineNumber
 83 |                 };
 84 |                 this.insertModule(webviewModule);
 85 |             }
 86 |         }
 87 |     }
 88 | 
 89 |     private insertModule(webviewModule: WebviewModule) {
 90 |         const sortedIndex = this.webviewModules.findIndex((module: WebviewModule) => module.LineNumber < webviewModule.LineNumber);
 91 |         if (sortedIndex < 0) {
 92 |             this.webviewModules.push(webviewModule);    
 93 |         }
 94 |         else {
 95 |             this.webviewModules.splice(sortedIndex, 0, webviewModule);
 96 |         }
 97 |     }
 98 | 
 99 |     public assembleWebviewContent() {
100 |         for (const webviewModule of this.webviewModules) {
101 |             if (webviewModule.Module.Type === ModuleType.Insert) {
102 |                 this.webviewContent.insertAfterLine(webviewModule.Module.Extension.generateContent(), webviewModule.LineNumber);
103 |             }
104 |             else {
105 |                 this.webviewContent.replaceWithinLine(webviewModule.Module.ReplaceContent, webviewModule.Module.Extension.generateContent(), webviewModule.LineNumber);
106 |             }
107 |         }
108 |         return this.webviewContent.getContent();
109 |     }
110 | }
111 | 


--------------------------------------------------------------------------------
/src/shaderstream.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | type MutatedRange = {
  4 |     Begin: number;
  5 |     Length: number;
  6 |     LinesInOriginal: number;
  7 | };
  8 | 
  9 | export class ShaderStream {
 10 |     private content: string;
 11 |     private position: number;
 12 |     private currentLine: number;
 13 |     private currentColumn: number;
 14 |     private mutations: MutatedRange[];
 15 | 
 16 |     constructor(content: string) {
 17 |         this.content = content;
 18 |         this.position = 0;
 19 |         this.currentLine = 1;
 20 |         this.currentColumn = 0;
 21 |         this.mutations = [];
 22 |     }
 23 | 
 24 |     public mutate(destRangeBegin: number, destRangeEnd: number, source: string) {
 25 |         const preDestContent = this.content.substring(0, destRangeBegin);
 26 |         const destContent = this.content.substring(destRangeBegin, destRangeEnd);
 27 |         const postDestContent = this.content.substring(destRangeEnd);
 28 | 
 29 |         const destLineNumber = preDestContent.split(/\r\n|\n/).length;
 30 |         const sourceLineCount = source.split(/\r\n|\n/).length;
 31 |         const destLineCount = destContent.split(/\r\n|\n/).length;
 32 | 
 33 |         if (sourceLineCount !== destLineCount) {
 34 |             let preceedingRange: number | undefined = undefined;
 35 |             let isInsideExistingRange = false;
 36 |             for (const mutatedRangeIndex in this.mutations) {
 37 |                 const mutatedRange = this.mutations[mutatedRangeIndex];
 38 |                 if (mutatedRange.Begin < destLineNumber) {
 39 |                     if (mutatedRange.Length > destLineCount) {
 40 |                         isInsideExistingRange = true;
 41 |                         break;
 42 |                     }
 43 |                 }
 44 |                 preceedingRange = parseInt(mutatedRangeIndex);
 45 |             }
 46 | 
 47 |             if (!isInsideExistingRange) {
 48 |                 const mutatedRange = {
 49 |                     Begin: destLineNumber,
 50 |                     Length: sourceLineCount,
 51 |                     LinesInOriginal: destLineCount
 52 |                 };
 53 |                 preceedingRange = preceedingRange || 0;
 54 |                 this.mutations.splice(preceedingRange, 0, mutatedRange);
 55 |             }
 56 |         }
 57 | 
 58 |         this.content = preDestContent + source + postDestContent;
 59 |         
 60 |         return this.content; 
 61 |     }
 62 | 
 63 |     public reset(position: number) {
 64 |         this.position = position;
 65 | 
 66 |         const preparsedContent = this.content.substring(0, position).split(/\r\n|\n/);
 67 |         this.currentLine = preparsedContent.length;
 68 |         this.currentColumn = 0;
 69 |         const currentLineBegin = preparsedContent.pop();
 70 |         if (currentLineBegin) {
 71 |             this.currentColumn = this.position - currentLineBegin.length;
 72 |         }
 73 |     }
 74 | 
 75 |     public peek(ahead: number = 0): string {
 76 |         return this.content[this.position + ahead];
 77 |     }
 78 |     public next(): string {
 79 |         const ret = this.content[this.position];
 80 |         this.position++;
 81 |         this.currentColumn++;
 82 |         if (ret === '\n' || ret === '\r\n') {
 83 |             this.currentColumn = 0;
 84 |             this.currentLine++;
 85 |         }
 86 |         return ret;
 87 |     }
 88 |     public code(): string {
 89 |         return this.content;
 90 |     }
 91 |     public pos(): number {
 92 |         return this.position;
 93 |     }
 94 |     public line(): number {
 95 |         return this.currentLine;
 96 |     }
 97 |     public originalLine(): number {
 98 |         let originalLine = this.currentLine;
 99 |         for (const mutatedRange of this.mutations) {
100 |             if (mutatedRange.Begin < originalLine) {
101 |                 originalLine -= mutatedRange.Length - mutatedRange.LinesInOriginal;
102 |             }
103 |             else {
104 |                 break;
105 |             }
106 |         }
107 |         return originalLine;
108 |     }
109 |     public column(): number {
110 |         return this.currentColumn;
111 |     }
112 |     public eof(): boolean {
113 |         return this.position >= this.content.length;
114 |     }
115 | 
116 |     public getCurrentLine(): string {
117 |         const lineFirstHalf = this.content.substring(0, this.position).split(/\r\n|\n/).pop() || '';
118 |         const lineSecondHalf = this.content.substring(this.position).split(/\r\n|\n/)[0] || '';
119 |         return lineFirstHalf + lineSecondHalf;
120 |     }
121 | }
122 | 


--------------------------------------------------------------------------------
/src/extension.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import * as vscode from 'vscode';
  4 | import { compareVersions } from 'compare-versions';
  5 | import { Context } from './context';
  6 | import { ShaderToyManager } from './shadertoymanager';
  7 | 
  8 | export function activate(extensionContext: vscode.ExtensionContext) {
  9 |     const shadertoyExtension = vscode.extensions.getExtension('stevensona.shader-toy');
 10 | 
 11 |     if (shadertoyExtension) {
 12 |         const lastVersion = extensionContext.globalState.get<string>('version') || '0.0.0';
 13 |         const currentVersion = <string | undefined>shadertoyExtension.packageJSON.version || '9.9.9';
 14 |         if (compareVersions(currentVersion, lastVersion) > 0) {
 15 |             vscode.window.showInformationMessage('Your ShaderToy version just got updated, check out the readme to see what\'s new.');
 16 |             extensionContext.globalState.update('version', currentVersion);
 17 |         }
 18 |     }
 19 | 
 20 |     let context = new Context(extensionContext, vscode.workspace.getConfiguration('shader-toy'));
 21 |     if (context.getConfig<boolean>('omitDeprecationWarnings') === true) {
 22 |         vscode.window.showWarningMessage('Deprecation warnings are omitted, stay safe otherwise!');
 23 |     }
 24 | 
 25 |     const shadertoyManager = new ShaderToyManager(context);
 26 | 
 27 |     let timeout: ReturnType<typeof setTimeout>;
 28 |     let events: vscode.Disposable[] = [];
 29 |     const registerCallbacks = (context: Context) => {
 30 |         clearTimeout(timeout);
 31 | 
 32 |         for (const event of events) {
 33 |             event.dispose();
 34 |         }
 35 |         events = [];
 36 | 
 37 |         if (context.getConfig<boolean>('reloadOnEditText')) {
 38 |             const reloadDelay: number = context.getConfig<number>('reloadOnEditTextDelay') || 1.0;
 39 |             vscode.workspace.onDidChangeTextDocument((documentChange: vscode.TextDocumentChangeEvent) => {
 40 |                 if (documentChange.contentChanges.length == 0) {
 41 |                     return;
 42 |                 }
 43 |                 
 44 |                 clearTimeout(timeout);
 45 |                 timeout = setTimeout(() => {
 46 |                     shadertoyManager.onDocumentChanged(documentChange);
 47 |                 }, reloadDelay * 1000);
 48 |             }, undefined, events);
 49 |         }
 50 | 
 51 |         if (context.getConfig<boolean>('reloadOnSaveFile')) {
 52 |             vscode.workspace.onDidSaveTextDocument((document: vscode.TextDocument) => {
 53 |                 shadertoyManager.onDocumentSaved(document);
 54 |             }, undefined, events);
 55 |         }
 56 | 
 57 |         vscode.window.onDidChangeActiveTextEditor((newEditor: vscode.TextEditor | undefined) => {
 58 |             shadertoyManager.onEditorChanged(newEditor);
 59 |         }, undefined, events);
 60 |     };
 61 | 
 62 |     registerCallbacks(context);
 63 | 
 64 |     vscode.workspace.onDidChangeConfiguration((e: vscode.ConfigurationChangeEvent) => {
 65 |         if (e.affectsConfiguration('shader-toy')) {    
 66 |             const lastActiveEditor = context.activeEditor;
 67 |             context = new Context(extensionContext, vscode.workspace.getConfiguration('shader-toy'));
 68 |             registerCallbacks(context);
 69 |             if (context.activeEditor === undefined) {
 70 |                 context.activeEditor = lastActiveEditor;
 71 |             }
 72 |             shadertoyManager.migrateToNewContext(context);
 73 |         }
 74 |     });
 75 | 
 76 |     const previewCommand = vscode.commands.registerCommand('shader-toy.showGlslPreview', () => {
 77 |         shadertoyManager.showDynamicPreview();
 78 |     });
 79 |     const staticPreviewCommand = vscode.commands.registerCommand('shader-toy.showStaticGlslPreview', () => {
 80 |         shadertoyManager.showStaticPreview();
 81 |     });
 82 |     const standaloneCompileCommand = vscode.commands.registerCommand('shader-toy.createPortableGlslPreview', () => {
 83 |         shadertoyManager.createPortablePreview();
 84 |     });
 85 |     const pausePreviewsCommand = vscode.commands.registerCommand('shader-toy.pauseGlslPreviews', () => {
 86 |         shadertoyManager.postCommand('pause');
 87 |     });
 88 |     const saveScreenshotsCommand = vscode.commands.registerCommand('shader-toy.saveGlslPreviewScreenShots', () => {
 89 |         shadertoyManager.postCommand('screenshot');
 90 |     });
 91 |     extensionContext.subscriptions.push(previewCommand);
 92 |     extensionContext.subscriptions.push(staticPreviewCommand);
 93 |     extensionContext.subscriptions.push(standaloneCompileCommand);
 94 |     extensionContext.subscriptions.push(pausePreviewsCommand);
 95 |     extensionContext.subscriptions.push(saveScreenshotsCommand);
 96 | }
 97 | 
 98 | export function deactivate() {
 99 | }
100 | 


--------------------------------------------------------------------------------
/demos/fly_controls.glsl:
--------------------------------------------------------------------------------
  1 | // The MIT License
  2 | // Copyright © 2018 Inigo Quilez
  3 | // Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  4 | 
  5 | // Created by iq - https://www.shadertoy.com/view/wdXGDr
  6 | // Adapted for VS Code Shadertoy
  7 | 
  8 | // Cylinder intersection: https://www.shadertoy.com/view/4lcSRn
  9 | // Cylinder bounding box: https://www.shadertoy.com/view/MtcXRf
 10 | // Cylinder distance:     https://www.shadertoy.com/view/wdXGDr
 11 | 
 12 | // List of other 3D SDFs: https://www.shadertoy.com/playlist/43cXRl
 13 | //
 14 | // and http://iquilezles.org/www/articles/distfunctions/distfunctions.htm
 15 | 
 16 | // FLY CONTROLS: this preprocessor directive adds the controller to the window.
 17 | #iFirstPersonControls
 18 | 
 19 | float sdCylinder(vec3 p, vec3 a, vec3 b, float r)
 20 | {
 21 |     vec3  ba = b - a;
 22 |     vec3  pa = p - a;
 23 |     float baba = dot(ba,ba);
 24 |     float paba = dot(pa,ba);
 25 |     float x = length(pa*baba-ba*paba) - r*baba;
 26 |     float y = abs(paba-baba*0.5)-baba*0.5;
 27 |     float x2 = x*x;
 28 |     float y2 = y*y*baba;
 29 |     
 30 |     float d = (max(x,y)<0.0)?-min(x2,y2):(((x>0.0)?x2:0.0)+((y>0.0)?y2:0.0));
 31 |     
 32 |     return sign(d)*sqrt(abs(d))/baba;
 33 | }
 34 | 
 35 | float map( in vec3 pos )
 36 | {
 37 |     return sdCylinder(pos, vec3(-0.2,-0.3,-0.1), vec3(0.3,0.3,0.4), 0.2 );
 38 | }
 39 | 
 40 | // http://iquilezles.org/www/articles/normalsSDF/normalsSDF.htm
 41 | vec3 calcNormal( in vec3 pos )
 42 | {
 43 |     vec2 e = vec2(1.0,-1.0)*0.5773;
 44 |     const float eps = 0.0005;
 45 |     return normalize( e.xyy*map( pos + e.xyy*eps ) + 
 46 | 					  e.yyx*map( pos + e.yyx*eps ) + 
 47 | 					  e.yxy*map( pos + e.yxy*eps ) + 
 48 | 					  e.xxx*map( pos + e.xxx*eps ) );
 49 | }
 50 |     
 51 | #define AA 1
 52 | 
 53 | void mainImage( out vec4 fragColor, in vec2 fragCoord )
 54 | {
 55 |     // FLY CONTROLS: ray origin and camera matrix base axes replaced
 56 |     // with 'iViewMatrix' elements. iViewMatrix is updated by the 
 57 |     // fly-cam controls, otherwise it remains identity. 
 58 |      // camera movement	
 59 | 	float an = 0.5*(iTime-10.0);
 60 |     // Add an offset so we have a starting position of -1.0 on Z axis.
 61 | 	vec3 ro = iViewMatrix[3].xyz + vec3(0,0,-1);
 62 |     // camera matrix
 63 |     vec3 ww = iViewMatrix[2].xyz;
 64 |     vec3 uu = iViewMatrix[0].xyz;
 65 |     vec3 vv = iViewMatrix[1].xyz;
 66 | 
 67 |         
 68 |     vec3 tot = vec3(0.0);
 69 |     
 70 |     #if AA>1
 71 |     for( int m=0; m<AA; m++ )
 72 |     for( int n=0; n<AA; n++ )
 73 |     {
 74 |         // pixel coordinates
 75 |         vec2 o = vec2(float(m),float(n)) / float(AA) - 0.5;
 76 |         vec2 p = (-iResolution.xy + 2.0*(fragCoord+o))/iResolution.y;
 77 |         #else    
 78 |         vec2 p = (-iResolution.xy + 2.0*fragCoord)/iResolution.y;
 79 |         #endif
 80 | 
 81 | 	    // create view ray
 82 |         vec3 rd = normalize( p.x*uu + p.y*vv + 1.5*ww );
 83 | 
 84 |         // raymarch
 85 |         const float tmax = 3.0;
 86 |         float t = 0.0;
 87 |         for( int i=0; i<256; i++ )
 88 |         {
 89 |             vec3 pos = ro + t*rd;
 90 |             float h = map(pos);
 91 |             if( h<0.0001 || t>tmax ) break;
 92 |             t += h;
 93 |         }
 94 |         
 95 |     
 96 |         // shading/lighting	
 97 |         vec3 col = vec3(0.0);
 98 |         if( t<tmax )
 99 |         {
100 |             vec3 pos = ro + t*rd;
101 |             vec3 nor = calcNormal(pos);
102 |             float dif = clamp( dot(nor,vec3(-0.57703, 0.57703, -0.57703 )), 0.0, 1.0 );
103 |             float amb = 0.5 + 0.5*dot(nor,vec3(0.0,1.0,0.0));
104 |             col = vec3(0.2,0.3,0.4)*amb + vec3(0.8,0.7,0.5)*dif;
105 |         }
106 | 
107 |         // gamma        
108 |         col = sqrt( col );
109 | 	    tot += col;
110 |     #if AA>1
111 |     }
112 |     tot /= float(AA*AA);
113 |     #endif
114 | 
115 | 	fragColor = vec4( tot, 1.0 );
116 | }
117 | 


--------------------------------------------------------------------------------
/src/extensions/audio/audio_init_extension.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import * as Types from '../../typenames';
  4 | import { Context } from '../../context';
  5 | import { WebviewExtension } from '../webview_extension';
  6 | import { TextureExtensionExtension } from '../textures/texture_extension_extension';
  7 | 
  8 | export class AudioInitExtension implements WebviewExtension, TextureExtensionExtension {
  9 |     private content: string;
 10 |     private textureContent: string;
 11 | 
 12 |     constructor(buffers: Types.BufferDefinition[], context: Context, makeAvailableResource: (localUri: string) => string) {
 13 |         this.content = '';
 14 |         this.textureContent = '';
 15 |         this.processBuffers(buffers, context, makeAvailableResource);
 16 |     }
 17 | 
 18 |     private processBuffers(buffers: Types.BufferDefinition[], context: Context, makeAvailableResource: (localUri: string) => string) {
 19 |         for (const i in buffers) {
 20 |             const buffer = buffers[i];
 21 |             const audios =  buffer.AudioInputs;
 22 |             for (const j in audios) {
 23 |                 const audio = audios[j];
 24 | 
 25 |                 const channel = audio.Channel;
 26 |                 
 27 |                 const localPath = audio.LocalPath;
 28 |                 const remotePath = audio.RemotePath;
 29 | 
 30 |                 let path: string | undefined;
 31 | 
 32 |                 if (localPath !== undefined) {
 33 |                     path = makeAvailableResource(localPath);
 34 |                 }
 35 |                 else if (remotePath !== undefined) {
 36 |                     path = remotePath;
 37 |                 }
 38 | 
 39 |                 if (path !== undefined) {
 40 |                     this.content += `
 41 |                     fetch('${path}')
 42 |                         .then(function(response) {
 43 |                             return response.arrayBuffer();
 44 |                         })
 45 |                         .then(function(arrayBuffer) {
 46 |                             audioContext.decodeAudioData(arrayBuffer)
 47 |                                 .then(function(audioBuffer) {
 48 |                                     let audio = audioContext.createBufferSource();
 49 |                                     audio.buffer = audioBuffer;
 50 |                                     audio.loop = true;
 51 | 
 52 |                                     let analyser = audioContext.createAnalyser();
 53 |                                     analyser.fftSize = ${context.getConfig<number>('audioDomainSize')};
 54 | 
 55 |                                     const dataSize = Math.max(analyser.fftSize, analyser.frequencyBinCount);
 56 |                                     const dataArray = new Uint8Array(dataSize * 2);
 57 | 
 58 |                                     let texture = new THREE.DataTexture(dataArray, dataSize, 2, THREE.LuminanceFormat, THREE.UnsignedByteType);
 59 |                                     texture.magFilter = THREE.LinearFilter;
 60 |                                     texture.needsUpdate = true;
 61 | 
 62 |                                     buffers[${i}].Shader.uniforms.iChannel${channel} = { type: 't', value: texture };
 63 | 
 64 |                                     audio.connect(analyser);
 65 |                                     analyser.connect(audioContext.destination);
 66 |                                     audio.start(0, startingTime % audioBuffer.duration);
 67 |         
 68 |                                     audios.push({
 69 |                                         Channel: ${channel},
 70 |                                         Media: audio,
 71 |                                         Analyser: analyser,
 72 |                                         AmplitudeSamples: analyser.fftSize,
 73 |                                         FrequencySamples: analyser.frequencyBinCount,
 74 |                                         Data: dataArray,
 75 |                                         Texture: texture
 76 |                                     })
 77 |                                 })
 78 |                                 .catch(function(){
 79 |                                     if (vscode !== undefined) {
 80 |                                         vscode.postMessage({
 81 |                                             command: 'errorMessage',
 82 |                                             message: 'Failed decoding audio file: ${audio.UserPath}'
 83 |                                         });
 84 |                                     }
 85 |                                 });
 86 |                         }).
 87 |                         catch(function(){
 88 |                             if (vscode !== undefined) {
 89 |                                 vscode.postMessage({
 90 |                                     command: 'errorMessage',
 91 |                                     message: 'Failed loading audio file: ${audio.UserPath}'
 92 |                                 });
 93 |                             }
 94 |                         });
 95 |                     `;
 96 |                     this.textureContent += `buffers[${i}].Shader.uniforms.iChannel0 = { type: 't', value: null };\n`;
 97 |                 }
 98 |             }
 99 |         }
100 | 
101 |         if (this.content !== '') {
102 |             this.content = `
103 |             const AudioContext = window.AudioContext || window.webkitAudioContext;
104 |             const audioContext = new AudioContext();
105 |             
106 |             let audios = [];
107 |             ` + this.content;
108 |         }
109 |         else {
110 |             this.content = `
111 |             const audioContext = {
112 |                 sampleRate: 0
113 |             };
114 |             `;
115 |         }
116 |     }
117 | 
118 |     public generateContent(): string {
119 |         return this.content;
120 |     }
121 | 
122 |     public generateTextureContent(): string {
123 |         return this.textureContent;
124 |     }
125 | }
126 | 


--------------------------------------------------------------------------------
/demos/metaballs.glsl:
--------------------------------------------------------------------------------
  1 | // Created by mu6k - https://www.shadertoy.com/view/Mss3WN
  2 | // Adapted for VS Code Shadertoy
  3 | 
  4 | /*by mu6k, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
  5 | 
  6 |  I have no idea how I ended up here, but it demosceneish enough to publish.
  7 |  You can use the mouse to rotate the camera around the 'object'.
  8 |  If you can't see the shadows, increase occlusion_quality.
  9 |  If it doesn't compile anymore decrease object_count and render_steps.
 10 | 
 11 |  15/06/2013:
 12 |  - published
 13 |  
 14 |  16/06/2013:
 15 |  - modified for better performance and compatibility
 16 | 
 17 |  muuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuusk!*/
 18 | 
 19 | #define occlusion_enabled
 20 | #define occlusion_quality 4
 21 | //#define occlusion_preview
 22 | 
 23 | #define noise_use_smoothstep
 24 | 
 25 | #define light_color vec3(0.1,0.4,0.6)
 26 | #define light_direction normalize(vec3(.2,1.0,-0.2))
 27 | #define light_speed_modifier 1.0
 28 | 
 29 | #define object_color vec3(0.9,0.1,0.1)
 30 | #define object_count 9
 31 | #define object_speed_modifier 1.0
 32 | 
 33 | #define render_steps 33
 34 | 
 35 | float hash(float x)
 36 | {
 37 | 	return fract(sin(x*.0127863)*17143.321);
 38 | }
 39 | 
 40 | float hash(vec2 x)
 41 | {
 42 | 	return fract(cos(dot(x.xy,vec2(2.31,53.21))*124.123)*412.0); 
 43 | }
 44 | 
 45 | vec3 cc(vec3 color, float factor,float factor2) //a wierd color modifier
 46 | {
 47 | 	float w = color.x+color.y+color.z;
 48 | 	return mix(color,vec3(w)*factor,w*factor2);
 49 | }
 50 | 
 51 | float hashmix(float x0, float x1, float interp)
 52 | {
 53 | 	x0 = hash(x0);
 54 | 	x1 = hash(x1);
 55 | 	#ifdef noise_use_smoothstep
 56 | 	interp = smoothstep(0.0,1.0,interp);
 57 | 	#endif
 58 | 	return mix(x0,x1,interp);
 59 | }
 60 | 
 61 | float noise(float p) // 1D noise
 62 | {
 63 | 	float pm = mod(p,1.0);
 64 | 	float pd = p-pm;
 65 | 	return hashmix(pd,pd+1.0,pm);
 66 | }
 67 | 
 68 | vec3 rotate_y(vec3 v, float angle)
 69 | {
 70 | 	float ca = cos(angle); float sa = sin(angle);
 71 | 	return v*mat3(
 72 | 		+ca, +.0, -sa,
 73 | 		+.0,+1.0, +.0,
 74 | 		+sa, +.0, +ca);
 75 | }
 76 | 
 77 | vec3 rotate_x(vec3 v, float angle)
 78 | {
 79 | 	float ca = cos(angle); float sa = sin(angle);
 80 | 	return v*mat3(
 81 | 		+1.0, +.0, +.0,
 82 | 		+.0, +ca, -sa,
 83 | 		+.0, +sa, +ca);
 84 | }
 85 | 
 86 | float max3(float a, float b, float c)//returns the maximum of 3 values
 87 | {
 88 | 	return max(a,max(b,c));
 89 | }
 90 | 
 91 | vec3 bpos[object_count];//position for each metaball
 92 | 
 93 | float dist(vec3 p)//distance function
 94 | {
 95 | 	float d=1024.0;
 96 | 	float nd;
 97 | 	for (int i=0 ;i<object_count; i++)
 98 | 	{
 99 | 		vec3 np = p+bpos[i];
100 | 		float shape0 = max3(abs(np.x),abs(np.y),abs(np.z))-1.0;
101 | 		float shape1 = length(np)-1.0;
102 | 		nd = shape0+(shape1-shape0)*2.0;
103 | 		d = mix(d,nd,smoothstep(-1.0,+1.0,d-nd));
104 | 	}
105 | 	return d;
106 | }
107 | 
108 | vec3 normal(vec3 p,float e) //returns the normal, uses the distance function
109 | {
110 | 	float d=dist(p);
111 | 	return normalize(vec3(dist(p+vec3(e,0,0))-d,dist(p+vec3(0,e,0))-d,dist(p+vec3(0,0,e))-d));
112 | }
113 | 
114 | vec3 light = light_direction; //global variable that holds light direction
115 | 
116 | vec3 background(vec3 d)//render background
117 | {
118 | 	float t=iGlobalTime*0.5*light_speed_modifier;
119 | 	float qq = dot(d,light)*.5+.5;
120 | 	float bgl = qq;
121 | 	float q = (bgl+noise(bgl*6.0+t)*.85+noise(bgl*12.0+t)*.85);
122 | 	q+= pow(qq,32.0)*2.0;
123 | 	vec3 sky = vec3(0.1,0.4,0.6)*q;
124 | 	return sky;
125 | }
126 | 
127 | float occlusion(vec3 p, vec3 d)//returns how much a point is visible from a given direction
128 | {
129 | 	float occ = 1.0;
130 | 	p=p+d;
131 | 	for (int i=0; i<occlusion_quality; i++)
132 | 	{
133 | 		float dd = dist(p);
134 | 		p+=d*dd;
135 | 		occ = min(occ,dd);
136 | 	}
137 | 	return max(.0,occ);
138 | }
139 | 
140 | vec3 object_material(vec3 p, vec3 d)
141 | {
142 | 	vec3 color = normalize(object_color*light_color);
143 | 	vec3 n = normal(p,0.1);
144 | 	vec3 r = reflect(d,n);	
145 | 	
146 | 	float reflectance = dot(d,r)*.5+.5;reflectance=pow(reflectance,2.0);
147 | 	float diffuse = dot(light,n)*.5+.5; diffuse = max(.0,diffuse);
148 | 	
149 | 	#ifdef occlusion_enabled
150 | 		float oa = occlusion(p,n)*.4+.6;
151 | 		float od = occlusion(p,light)*.95+.05;
152 | 		float os = occlusion(p,r)*.95+.05;
153 | 	#else
154 | 		float oa=1.0;
155 | 		float ob=1.0;
156 | 		float oc=1.0;
157 | 	#endif
158 | 	
159 | 	#ifndef occlusion_preview
160 | 		color = 
161 | 		color*oa*.2 + //ambient
162 | 		color*diffuse*od*.7 + //diffuse
163 | 		background(r)*os*reflectance*.7; //reflection
164 | 	#else
165 | 		color=vec3((oa+od+os)*.3);
166 | 	#endif
167 | 	
168 | 	return color;
169 | }
170 | 
171 | #define offset1 4.7
172 | #define offset2 4.6
173 | 
174 | void main()
175 | {
176 | 	vec2 uv = gl_FragCoord.xy / iResolution.xy - 0.5;
177 | 	uv.x *= iResolution.x/iResolution.y; //fix aspect ratio
178 | 	vec2 mouse = iMouse.xy / iResolution.xy;
179 | 	
180 | 	float t = iGlobalTime*.5*object_speed_modifier + 2.0;
181 | 	
182 | 	for (int i=0 ;i<object_count; i++) //position for each metaball
183 | 	{
184 | 		bpos[i] = 1.3*vec3(
185 | 			sin(t*0.967+float(i)*42.0),
186 | 			sin(t*.423+float(i)*152.0),
187 | 			sin(t*.76321+float(i)));
188 | 	}
189 | 	
190 | 	//setup the camera
191 | 	vec3 p = vec3(.0,0.0,-4.0);
192 | 	p = rotate_x(p,mouse.y*9.0+offset1);
193 | 	p = rotate_y(p,mouse.x*9.0+offset2);
194 | 	vec3 d = vec3(uv,1.0);
195 | 	d.z -= length(d)*.5; //lens distort
196 | 	d = normalize(d);
197 | 	d = rotate_x(d,mouse.y*9.0+offset1);
198 | 	d = rotate_y(d,mouse.x*9.0+offset2);
199 | 	
200 | 	//and action!
201 | 	float dd;
202 | 	vec3 color;
203 | 	for (int i=0; i<render_steps; i++) //raymarch
204 | 	{
205 | 		dd = dist(p);
206 | 		p+=d*dd*.7;
207 | 		if (dd<.04 || dd>4.0) break;
208 | 	}
209 | 	
210 | 	if (dd<0.5) //close enough
211 | 		color = object_material(p,d);
212 | 	else
213 | 		color = background(d);
214 | 	
215 | 	//post procesing
216 | 	color *=.85;
217 | 	color = mix(color,color*color,0.3);
218 | 	color -= hash(color.xy+uv.xy)*.015;
219 | 	color -= length(uv)*.1;
220 | 	color =cc(color,.5,.6);
221 | 	gl_FragColor = vec4(color,1.0);
222 | }


--------------------------------------------------------------------------------
/src/extensions/uniforms/uniforms_init_extension.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import * as Types from '../../typenames';
  4 | import { WebviewExtension } from '../webview_extension';
  5 | 
  6 | export class UniformsInitExtension implements WebviewExtension {
  7 |     private content: string;
  8 | 
  9 |     constructor(buffers: Types.BufferDefinition[], startingState: Types.UniformsGuiStartingData) {
 10 |         this.content = '';
 11 |         this.processBuffers(buffers, startingState);
 12 |     }
 13 | 
 14 |     private processBuffers(buffers: Types.BufferDefinition[], startingState: Types.UniformsGuiStartingData) {
 15 |         let has_uniforms = false;
 16 |         for (const buffer of buffers) {
 17 |             if (buffer.CustomUniforms.length > 0) {
 18 |                 has_uniforms = true;
 19 |                 break;
 20 |             }
 21 |         }
 22 | 
 23 |         if (has_uniforms) {
 24 |             this.content += `
 25 | let dat_gui = new dat.GUI({ autoPlace: false, closed: ${!startingState.Open} });
 26 | var dat_gui_container = document.getElementById('dat_gui_container');
 27 | dat_gui_container.appendChild(dat_gui.domElement);
 28 | `;
 29 |         }
 30 | 
 31 |         for (const i in buffers) {
 32 |             const buffer = buffers[i];
 33 |             const uniforms = buffer.CustomUniforms;
 34 |             if (uniforms.length > 0) {
 35 |                 this.content += `\
 36 | buffers[${i}].UniformValues = {};
 37 | `;
 38 |             }
 39 | 
 40 |             for (const uniform of uniforms) {
 41 |                 const uniform_values = `buffers[${i}].UniformValues`;
 42 |                 const threeType = this.mapArrayToThreeType(uniform.Default);
 43 | 
 44 |                 let defaultValue = uniform.Default;
 45 |                 if (uniform.Typename === 'color3') {
 46 |                     for (const i in defaultValue) {
 47 |                         defaultValue[i] = defaultValue[i] * 255.0;
 48 |                     }
 49 |                 }
 50 | 
 51 |                 const startingValue = startingState.Values.get(uniform.Name);
 52 |                 if (startingValue !== undefined) {
 53 |                     defaultValue = startingValue;
 54 |                 }
 55 | 
 56 |                 if (threeType === 'number') {
 57 |                     this.content += `\
 58 | ${uniform_values}.${uniform.Name} = ${defaultValue};
 59 | `;
 60 |                 }
 61 |                 else {
 62 |                     this.content += `\
 63 | ${uniform_values}.${uniform.Name} = [${defaultValue}];
 64 | `;
 65 |                 }
 66 | 
 67 |                 this.content += `\
 68 | ${this.getDatGuiValueString(uniform_values, uniform.Name, uniform)}
 69 | `;
 70 |             }
 71 |         }
 72 |     }
 73 | 
 74 |     private getDatGuiValueString(object: string, property: string, value: Types.UniformDefinition) {
 75 |         if (value.Default.length === 1) {
 76 |             return `\
 77 | {
 78 |     let controller = ${this.getRawDatGuiValueString(object, property, value)};
 79 |     controller.onFinishChange((value) => {
 80 |         if (vscode !== undefined) {
 81 |             vscode.postMessage({
 82 |                 command: 'updateUniformsGuiValue',
 83 |                 name: '${value.Name}',
 84 |                 value: [ value ]
 85 |             });
 86 |         }
 87 |     });
 88 | }
 89 | `;
 90 |         }
 91 |         else if (value.Typename === 'color3') {
 92 |             return `\
 93 | {
 94 |     let controller = ${this.getRawDatGuiValueString(object, property, value)};
 95 |     controller.onFinishChange((value) => {
 96 |         if (vscode !== undefined) {
 97 |             vscode.postMessage({
 98 |                 command: 'updateUniformsGuiValue',
 99 |                 name: '${value.Name}',
100 |                 value: value
101 |             });
102 |         }
103 |     });
104 | }
105 | `;
106 |         }
107 |         else {
108 |             let datGuiString = `{
109 |     let flatten = (values) => {
110 |         let flattened_values = [];
111 |         for (let value of values) {
112 |             flattened_values.push(value.value);
113 |         }
114 |         return flattened_values;
115 |     };
116 |     let values = [];
117 | `;
118 |             const sub_object = `${object}.${property}`;
119 |             for (let i = 0; i < value.Default.length; i++) {
120 |                 const sub_value: Types.UniformDefinition = {
121 |                     Name: this.indexToDimension(i),
122 |                     Typename: value.Typename[0] === 'i' ? 'integer' : 'float',
123 |                     Default: [ value.Default[i] ],
124 |                     Min: value.Min ? [ value.Min[i] ] : undefined,
125 |                     Max: value.Max ? [ value.Max[i] ] : undefined,
126 |                     Step: value.Step ? [ value.Step[i] ] : undefined,
127 |                 };
128 |                 datGuiString += `\
129 |     values.push({ value: ${sub_value.Default[0]} });
130 |     let controller_${i} = ${this.getRawDatGuiValueString(`values[${i}]`, 'value', sub_value)}.name('${property}.${sub_value.Name}');
131 |     controller_${i}.onFinishChange((value) => {
132 |         values[${i}].value = value;
133 |         ${sub_object}[${i}] = value;
134 |         if (vscode !== undefined) {
135 |             vscode.postMessage({
136 |                 command: 'updateUniformsGuiValue',
137 |                 name: '${value.Name}',
138 |                 value: flatten(values)
139 |             });
140 |         }
141 |     });
142 | `;
143 |             }
144 |             datGuiString += '}';
145 |             return datGuiString;
146 |         }
147 |     }
148 |     private getRawDatGuiValueString(object: string, property: string, value: Types.UniformDefinition) {
149 |         if (value.Default.length === 1) {
150 |             const min = value.Min ? `.min(${value.Min})` : '';
151 |             const max = value.Max ? `.max(${value.Max})` : '';
152 |             const step = value.Step ? `.step(${value.Step})` : '';
153 |             return `dat_gui.add(${object}, '${property}')${min}${max}${step}`;
154 |         }
155 |         else if (value.Default.length === 3 && !value.Min && !value.Max && !value.Step) {
156 |             return `dat_gui.addColor(${object}, '${property}')`;
157 |         }   
158 |     }
159 |     
160 |     private indexToDimension(index: number) {
161 |         const dimensionStrings = [ 'x', 'y', 'z', 'w' ];
162 |         return dimensionStrings[index];
163 |     }
164 |     private mapArrayToThreeType(value: number[]) {
165 |         const l = value.length;
166 |         switch (l) {
167 |         case 1:
168 |             return 'number';
169 |         case 2:
170 |         case 3:
171 |         case 4:
172 |             return `THREE.Vector${l}`;
173 |         default:
174 |             return 'THREE.ErrorType';
175 |         }
176 |     }
177 | 
178 |     public generateContent(): string {
179 |         return this.content;
180 |     }
181 | }
182 | 


--------------------------------------------------------------------------------
/src/context.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import * as vscode from 'vscode';
  4 | import * as path from 'path';
  5 | import * as fs from 'fs';
  6 | import { DiagnosticBatch } from './typenames';
  7 | 
  8 | export class Context {
  9 |     private context: vscode.ExtensionContext;
 10 |     private config: vscode.WorkspaceConfiguration;
 11 | 
 12 |     private diagnosticCollection: vscode.DiagnosticCollection;
 13 |     private collectedDiagnostics: { [id: string]: vscode.Diagnostic[]; } = {};
 14 | 
 15 |     public activeEditor: vscode.TextEditor | undefined;
 16 | 
 17 |     constructor(context: vscode.ExtensionContext, config: vscode.WorkspaceConfiguration) {
 18 |         this.context = context;
 19 |         this.config = config;
 20 |         this.diagnosticCollection = vscode.languages.createDiagnosticCollection('shader-toy.errors');
 21 |         this.activeEditor = vscode.window.activeTextEditor;
 22 |     }
 23 | 
 24 |     public makeUri(file: string): vscode.Uri {
 25 |         return vscode.Uri.file(file);
 26 |     }
 27 |     public getResourceUri(file: string): vscode.Uri {
 28 |         return this.makeUri(
 29 |             path.join(this.context.extensionPath, 'resources', file)
 30 |         );
 31 |     }
 32 |     public makeWebviewResource(webview: vscode.Webview, resourceUri: vscode.Uri): vscode.Uri {
 33 |         return webview.asWebviewUri(resourceUri);
 34 |     }
 35 |     public getWebviewResourcePath(webview: vscode.Webview, file: string): string {
 36 |         const resourceUri = this.getResourceUri(file);
 37 |         const webviewResourceUri = this.makeWebviewResource(webview, resourceUri);
 38 |         return webviewResourceUri.toString();
 39 |     }
 40 | 
 41 |     public async mapUserPath(userPath: string, sourcePath: string): Promise<{ file: string, userPath: string }> {
 42 |         userPath = userPath.replace(/\\/g, '/');
 43 |         sourcePath = path.dirname(sourcePath);
 44 | 
 45 |         let file = await (async (file: string) => {
 46 |             const fileCandidates: string[] = [];
 47 | 
 48 |             const exists = async (file: string) => {
 49 |                 const singleFileExists = async (file: string) => {
 50 |                     try {
 51 |                         await fs.promises.access(file);
 52 |                         return true;
 53 |                     }
 54 |                     catch
 55 |                     {
 56 |                         return false;
 57 |                     }
 58 |                 };
 59 | 
 60 |                 if (file.indexOf('{}') < 0 && file.indexOf('*') < 0) {
 61 |                     return await singleFileExists(file);
 62 |                 }
 63 |                 else {
 64 |                     const existsWithEachPrefix = async (pattern: string, prefixes: [string, string, string, string, string, string]) => {
 65 |                         for (const dir of prefixes) {
 66 |                             const directionFile = pattern.replace('{}', dir);
 67 |                             if (!await singleFileExists(directionFile)) {
 68 |                                 return false;
 69 |                             }
 70 |                         }
 71 |                         return true;
 72 |                     };
 73 | 
 74 |                     const possiblePrefixes: [string, string, string, string, string, string][] = [
 75 |                         ['e', 'w', 'u', 'd', 'n', 's'],
 76 |                         ['east', 'west', 'up', 'down', 'north', 'south'],
 77 |                         ['px', 'nx', 'py', 'ny', 'pz', 'nz'],
 78 |                         ['posx', 'negx', 'posy', 'negy', 'posz', 'negz']
 79 |                     ];
 80 | 
 81 |                     const pattern = file.replace('*', '{}');
 82 |                     for (const prefixes of possiblePrefixes) {
 83 |                         if (await existsWithEachPrefix(pattern, prefixes)) {
 84 |                             return true;
 85 |                         }
 86 |                     }
 87 |                     return false;
 88 |                 }
 89 |             };
 90 | 
 91 |             // Highest priority are absolute paths
 92 |             fileCandidates.push(file);
 93 |             if (await exists(file)) {
 94 |                 return file;
 95 |             }
 96 | 
 97 |             // Second priority are relative to sourcePath
 98 |             {
 99 |                 const fileCandidate = [sourcePath, file].join('/');
100 |                 fileCandidates.push(fileCandidate);
101 |                 if (await exists(fileCandidate)) {
102 |                     return fileCandidate;
103 |                 }
104 |             }
105 | 
106 |             // Last priority are relative to workspace folders
107 |             if (vscode.workspace.workspaceFolders !== undefined) {
108 |                 const workspaceFileCandidates: string[] = [];
109 |                 for (const worspaceFolder of vscode.workspace.workspaceFolders) {
110 |                     let workspacePath = worspaceFolder.uri.fsPath;
111 |                     workspacePath = workspacePath.replace(/\\/g, '/');
112 |                     workspacePath = workspacePath.replace(/\.\//g, '');
113 |                     const fileCandidate = [workspacePath, file].join('/');
114 |                     if (await exists(fileCandidate)) {
115 |                         workspaceFileCandidates.push(fileCandidate);
116 |                     }
117 |                     fileCandidates.push(fileCandidate);
118 |                 }
119 | 
120 |                 if (workspaceFileCandidates.length > 1) {
121 |                     vscode.window.showErrorMessage(`Multiple candidates for file '${userPath}' were found in your workspace folders, first option was picked: '${workspaceFileCandidates[0]}'`);
122 |                 }
123 | 
124 |                 return workspaceFileCandidates[0];
125 |             }
126 | 
127 |             vscode.window.showErrorMessage(`File '${userPath}' was not found, paths that were tried were\n\t${fileCandidates.join('\n\t')}`);
128 |             return file;
129 |         })(userPath);
130 | 
131 |         file = path.normalize(file);
132 |         file = file.replace(/\\/g, '/');
133 |         return { file, userPath };
134 |     }
135 | 
136 |     public showErrorMessage(message: string) {
137 |         vscode.window.showErrorMessage(message);
138 |     }
139 | 
140 |     public clearDiagnostics() {
141 |         this.collectedDiagnostics = {};
142 |         this.diagnosticCollection.clear();
143 |     }
144 |     public showDiagnostics(diagnosticBatch: DiagnosticBatch, severity: vscode.DiagnosticSeverity) {
145 |         const file = diagnosticBatch.filename;
146 |         const newDocument = vscode.workspace.openTextDocument(file);
147 |         newDocument.then((document: vscode.TextDocument) => {
148 |             if (this.collectedDiagnostics[file] === undefined) {
149 |                 this.collectedDiagnostics[file] = [];
150 |             }
151 | 
152 |             for (const diagnostic of diagnosticBatch.diagnostics) {
153 |                 const line = Math.min(Math.max(1, diagnostic.line), document.lineCount) - 1;
154 |                 const range = document.lineAt(line).range;
155 |                 this.collectedDiagnostics[file].push(new vscode.Diagnostic(range, diagnostic.message, severity));
156 |             }
157 |             this.diagnosticCollection.set(document.uri, this.collectedDiagnostics[file]);
158 |         }, (reason) => {
159 |             vscode.window.showErrorMessage(`Could not open ${file} because ${reason}`);
160 |         });
161 |     }
162 | 
163 |     public revealLine(file: string, line: number) {
164 |         const highlightLine = (document: vscode.TextDocument, line: number) => {
165 |             line = Math.min(Math.max(1, line), document.lineCount) - 1;
166 |             const range = document.lineAt(line).range;
167 |             vscode.window.showTextDocument(document, vscode.ViewColumn.One, true)
168 |                 .then((editor: vscode.TextEditor) => {
169 |                     editor.selection = new vscode.Selection(range.start, range.end);
170 |                     editor.revealRange(range, vscode.TextEditorRevealType.InCenterIfOutsideViewport);
171 |                 });
172 |         };
173 | 
174 |         if (this.activeEditor) {
175 |             let currentFile = this.activeEditor.document.fileName;
176 |             currentFile = currentFile.replace(/\\/g, '/');
177 |             if (currentFile === file) {
178 |                 highlightLine(this.activeEditor.document, line);
179 |                 return;
180 |             }
181 |         }
182 | 
183 |         const newDocument = vscode.workspace.openTextDocument(file);
184 |         newDocument.then((document: vscode.TextDocument) => {
185 |             highlightLine(document, line);
186 |         }, (reason) => {
187 |             vscode.window.showErrorMessage(`Could not open ${file} because ${reason}`);
188 |         });
189 |     }
190 | 
191 |     public getConfig<T>(section: string): T | undefined {
192 |         return this.config.get<T>(section);
193 |     }
194 | 
195 |     public getVscodeExtensionContext(): vscode.ExtensionContext {
196 |         return this.context;
197 |     }
198 | }
199 | 


--------------------------------------------------------------------------------
/src/extensions/packages/three_flycontrols.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import { WebviewExtension } from '../webview_extension';
  4 | 
  5 | export class ThreeFlyControlsExtension implements WebviewExtension {
  6 |     private getWebviewResourcePath: (relativePath: string) => string;
  7 | 
  8 |     constructor(getWebviewResourcePath: (relativePath: string) => string) {
  9 |         this.getWebviewResourcePath = getWebviewResourcePath;
 10 |     }
 11 | 
 12 |     public generateContent(): string {
 13 |         return `
 14 | <script type="text/javascript">
 15 | const _changeEvent = { type: 'change' };
 16 | 
 17 | class FlyControls extends THREE.EventDispatcher {
 18 | 
 19 | 	constructor( object, domElement, vscode ) {
 20 | 
 21 | 		super();
 22 | 
 23 | 		if ( domElement === undefined ) {
 24 | 
 25 | 			console.warn( 'THREE.FlyControls: The second parameter "domElement" is now mandatory.' );
 26 | 			domElement = document;
 27 | 
 28 | 		}
 29 | 
 30 | 		this.object = object;
 31 | 		this.domElement = domElement;
 32 | 
 33 | 		// API
 34 | 
 35 | 		this.movementSpeed = 1.0;
 36 | 		this.rollSpeed = 0.005;
 37 | 
 38 | 		this.dragToLook = false;
 39 | 		this.autoForward = false;
 40 | 		this.mouseInside = false;
 41 | 
 42 | 		// disable default target object behavior
 43 | 
 44 | 		// internals
 45 | 
 46 | 		const scope = this;
 47 | 
 48 | 		const EPS = 0.000001;
 49 | 
 50 | 		const lastQuaternion = new THREE.Quaternion();
 51 | 		const lastPosition = new THREE.Vector3();
 52 | 
 53 | 		this.tmpQuaternion = new THREE.Quaternion();
 54 | 
 55 | 		this.mouseStatus = false;
 56 | 
 57 | 		this.defaultMoveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
 58 | 		this.moveState = this.defaultMoveState;
 59 | 		this.moveVector = new THREE.Vector3( 0, 0, 0 );
 60 | 		this.rotationVector = new THREE.Vector3( 0, 0, 0 );
 61 | 
 62 | 		this.keydown = function ( event ) {
 63 | 
 64 | 			if ( event.altKey ) {
 65 | 
 66 | 				return;
 67 | 
 68 | 			}
 69 | 
 70 | 			switch ( event.code ) {
 71 | 
 72 | 				case 'ShiftLeft':
 73 | 				case 'ShiftRight': this.movementSpeedMultiplier = .1; break;
 74 | 
 75 | 				case 'KeyW': this.moveState.forward = 1; break;
 76 | 				case 'KeyS': this.moveState.back = 1; break;
 77 | 
 78 | 				case 'KeyA': this.moveState.left = 1; break;
 79 | 				case 'KeyD': this.moveState.right = 1; break;
 80 | 
 81 | 				case 'KeyR': this.moveState.up = 1; break;
 82 | 				case 'KeyF': this.moveState.down = 1; break;
 83 | 
 84 | 				case 'ArrowUp': this.moveState.pitchUp = 1; break;
 85 | 				case 'ArrowDown': this.moveState.pitchDown = 1; break;
 86 | 
 87 | 				case 'ArrowLeft': this.moveState.yawLeft = 1; break;
 88 | 				case 'ArrowRight': this.moveState.yawRight = 1; break;
 89 | 
 90 | 				case 'KeyQ': this.moveState.rollLeft = 1; break;
 91 | 				case 'KeyE': this.moveState.rollRight = 1; break;
 92 | 
 93 | 			}
 94 | 
 95 | 			this.updateMovementVector();
 96 | 			this.updateRotationVector();
 97 | 
 98 | 		};
 99 | 
100 | 		this.keyup = function ( event ) {
101 | 
102 | 			switch ( event.code ) {
103 | 
104 | 				case 'ShiftLeft':
105 | 				case 'ShiftRight': this.movementSpeedMultiplier = 1; break;
106 | 
107 | 				case 'KeyW': this.moveState.forward = 0; break;
108 | 				case 'KeyS': this.moveState.back = 0; break;
109 | 
110 | 				case 'KeyA': this.moveState.left = 0; break;
111 | 				case 'KeyD': this.moveState.right = 0; break;
112 | 
113 | 				case 'KeyR': this.moveState.up = 0; break;
114 | 				case 'KeyF': this.moveState.down = 0; break;
115 | 
116 | 				case 'ArrowUp': this.moveState.pitchUp = 0; break;
117 | 				case 'ArrowDown': this.moveState.pitchDown = 0; break;
118 | 
119 | 				case 'ArrowLeft': this.moveState.yawLeft = 0; break;
120 | 				case 'ArrowRight': this.moveState.yawRight = 0; break;
121 | 
122 | 				case 'KeyQ': this.moveState.rollLeft = 0; break;
123 | 				case 'KeyE': this.moveState.rollRight = 0; break;
124 | 
125 | 			}
126 | 
127 | 			this.updateMovementVector();
128 | 			this.updateRotationVector();
129 | 
130 | 		};
131 | 
132 | 		this.mousedown = function ( event ) {
133 | 
134 | 			if ( this.dragToLook ) {
135 | 
136 | 				this.mouseStatus = true;
137 | 
138 | 			} else {
139 | 
140 | 				switch ( event.button ) {
141 | 
142 | 					case 0: this.moveState.forward = 1; break;
143 | 					case 2: this.moveState.back = 1; break;
144 | 
145 | 				}
146 | 
147 | 				this.updateMovementVector();
148 | 
149 | 			}
150 | 
151 | 		};
152 | 
153 | 		this.mousemove = function ( event ) {
154 | 
155 | 			if ( ! this.dragToLook || this.mouseStatus ) {
156 | 
157 | 				const container = this.getContainerDimensions();
158 | 				const halfWidth = container.size[ 0 ] / 2;
159 | 				const halfHeight = container.size[ 1 ] / 2;
160 | 
161 | 				this.moveState.yawLeft = - ( ( event.pageX - container.offset[ 0 ] ) - halfWidth ) / halfWidth;
162 | 				this.moveState.pitchDown = ( ( event.pageY - container.offset[ 1 ] ) - halfHeight ) / halfHeight;
163 | 
164 | 				this.updateRotationVector();
165 | 
166 | 			}
167 | 
168 | 		};
169 | 
170 | 		this.mouseup = function ( event ) {
171 | 
172 | 			if ( this.dragToLook ) {
173 | 
174 | 				this.mouseStatus = false;
175 | 
176 | 				this.moveState.yawLeft = this.moveState.pitchDown = 0;
177 | 
178 | 			} else {
179 | 
180 | 				switch ( event.button ) {
181 | 
182 | 					case 0: this.moveState.forward = 0; break;
183 | 					case 2: this.moveState.back = 0; break;
184 | 
185 | 				}
186 | 
187 | 				this.updateMovementVector();
188 | 
189 | 			}
190 | 
191 | 			this.updateRotationVector();
192 | 
193 | 		};
194 | 
195 | 		this.mouseenter = function ( event ) {
196 | 			this.mouseInside = true;
197 | 			if (event.buttons != 0) {
198 | 				this.mouseStatus = true;
199 | 			}
200 | 			else {
201 | 				this.mouseStatus = false;
202 | 				this.moveState.yawLeft = this.moveState.pitchDown = 0;
203 | 			}
204 | 			this.updateRotationVector();
205 | 		};
206 | 
207 | 		this.mouseleave = function ( event ) {
208 | 			this.mouseInside = false;
209 | 		};
210 | 
211 | 		this.update = function ( delta ) {
212 | 			if (!this.mouseInside)
213 | 				return;
214 | 
215 | 			const moveMult = delta * scope.movementSpeed;
216 | 			const rotMult = delta * scope.rollSpeed;
217 | 
218 | 			scope.object.translateX( scope.moveVector.x * moveMult );
219 | 			scope.object.translateY( scope.moveVector.y * moveMult );
220 | 			scope.object.translateZ( scope.moveVector.z * moveMult );
221 | 
222 | 			scope.tmpQuaternion.set( scope.rotationVector.x * rotMult, scope.rotationVector.y * rotMult, scope.rotationVector.z * rotMult, 1 ).normalize();
223 | 			scope.object.quaternion.multiply( scope.tmpQuaternion );
224 | 
225 | 			if (
226 | 				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
227 | 				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS
228 | 			) {
229 | 
230 | 				scope.dispatchEvent( _changeEvent );
231 | 				lastQuaternion.copy( scope.object.quaternion );
232 | 				lastPosition.copy( scope.object.position );
233 | 			}
234 | 			
235 | 			if (vscode !== undefined) {
236 | 				let p = this.object.position;
237 | 				let r = this.object.quaternion;
238 | 				vscode.postMessage({
239 | 					command: 'updateFlyControlTransform',
240 | 					position: [ p.x, p.y, p.z ],
241 | 					rotation: [ r.x, r.y, r.z, r.w ]
242 | 				});
243 | 			}
244 | 		};
245 | 
246 | 		this.updateMovementVector = function () {
247 | 
248 | 			const forward = ( this.moveState.forward || ( this.autoForward && ! this.moveState.back ) ) ? 1 : 0;
249 | 
250 | 			this.moveVector.x = ( - this.moveState.left + this.moveState.right );
251 | 			this.moveVector.y = -( - this.moveState.down + this.moveState.up );
252 | 			this.moveVector.z = -( - forward + this.moveState.back );
253 | 
254 | 		};
255 | 
256 | 		this.updateRotationVector = function () {
257 | 
258 | 			this.rotationVector.x = -( - this.moveState.pitchDown + this.moveState.pitchUp );
259 | 			this.rotationVector.y = -( - this.moveState.yawRight + this.moveState.yawLeft );
260 | 			this.rotationVector.z = -( - this.moveState.rollRight + this.moveState.rollLeft );
261 | 
262 | 		};
263 | 
264 | 		this.getContainerDimensions = function () {
265 | 
266 | 			if ( this.domElement != document ) {
267 | 
268 | 				return {
269 | 					size: [ this.domElement.offsetWidth, this.domElement.offsetHeight ],
270 | 					offset: [ this.domElement.offsetLeft, this.domElement.offsetTop ]
271 | 				};
272 | 
273 | 			} else {
274 | 
275 | 				return {
276 | 					size: [ window.innerWidth, window.innerHeight ],
277 | 					offset: [ 0, 0 ]
278 | 				};
279 | 
280 | 			}
281 | 
282 | 		};
283 | 
284 | 		this.dispose = function () {
285 | 			this.domElement.removeEventListener( 'contextmenu', contextmenu );
286 | 			this.domElement.removeEventListener( 'mousedown', _mousedown );
287 | 			this.domElement.removeEventListener( 'mousemove', _mousemove );
288 | 			this.domElement.removeEventListener( 'mouseup', _mouseup );
289 | 			this.domElement.removeEventListener( 'mouseleave', _mouseleave );
290 | 			this.domElement.removeEventListener( 'mouseenter', _mouseenter );
291 | 
292 | 			window.removeEventListener( 'keydown', _keydown );
293 | 			window.removeEventListener( 'keyup', _keyup );
294 | 		};
295 | 
296 | 		const _mousemove = this.mousemove.bind( this );
297 | 		const _mousedown = this.mousedown.bind( this );
298 | 		const _mouseup = this.mouseup.bind( this );
299 | 		const _mouseleave = this.mouseleave.bind( this );
300 | 		const _mouseenter = this.mouseenter.bind( this );
301 | 		const _keydown = this.keydown.bind( this );
302 | 		const _keyup = this.keyup.bind( this );
303 | 
304 | 		this.domElement.addEventListener( 'contextmenu', contextmenu );
305 | 
306 | 		this.domElement.addEventListener( 'mousemove', _mousemove );
307 | 		this.domElement.addEventListener( 'mousedown', _mousedown );
308 | 		this.domElement.addEventListener( 'mouseup', _mouseup );
309 | 		this.domElement.addEventListener( 'mouseleave', _mouseleave );
310 | 		this.domElement.addEventListener( 'mouseenter', _mouseenter );
311 | 		window.addEventListener( 'keydown', _keydown );
312 | 		window.addEventListener( 'keyup', _keyup );
313 | 
314 | 		this.updateMovementVector();
315 | 		this.updateRotationVector();
316 | 
317 | 	}
318 | 
319 | }
320 | 
321 | function contextmenu( event ) {
322 | 
323 | 	event.preventDefault();
324 | 
325 | }
326 | </script>
327 | `;
328 |     }
329 | }
330 | 


--------------------------------------------------------------------------------
/src/shaderlexer.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import { ShaderStream } from './shaderstream';
  4 | 
  5 | export enum TokenType {
  6 |     Punctuation,
  7 |     Operator,
  8 |     String,
  9 |     Integer,
 10 |     Float,
 11 |     Identifier,
 12 |     PreprocessorKeyword,
 13 |     Keyword,
 14 |     Type,
 15 |     Unkown
 16 | }
 17 | export type Token = {
 18 |     type: TokenType,
 19 |     value: any // eslint-disable-line @typescript-eslint/no-explicit-any
 20 | };
 21 | 
 22 | export type LineRange = {
 23 |     Begin: number,
 24 |     End: number
 25 | };
 26 | 
 27 | export class ShaderLexer {
 28 |     private stream: ShaderStream;
 29 |     private currentPeek: Token | undefined;
 30 | 
 31 |     private currentPeekRange: LineRange;
 32 |     private currentRange: LineRange;
 33 | 
 34 |     constructor(stream: ShaderStream) {
 35 |         this.stream = stream;
 36 |         this.currentPeekRange = { Begin: 0, End: 0 };
 37 |         this.currentRange = { Begin: 0, End: 0 };
 38 |     }
 39 |     
 40 |     public mutate(destRange: LineRange, source: string) {
 41 |         return this.stream.mutate(destRange.Begin, destRange.End, source);
 42 |     }
 43 | 
 44 |     public reset(position: number) {
 45 |         this.stream.reset(position);
 46 |         this.currentPeek = undefined;
 47 |     }
 48 | 
 49 |     public eof() {
 50 |         return this.stream.eof();
 51 |     }
 52 |     public getCurrentLine() {
 53 |         return this.stream.getCurrentLine();
 54 |     }
 55 | 
 56 |     public peek(): Token | undefined {
 57 |         if (this.currentPeek === undefined) {
 58 |             this.currentPeek = this.read_next();
 59 |             this.currentPeekRange.End = this.stream.pos();
 60 |         }
 61 |         return this.currentPeek;
 62 |     }
 63 |     public next(): Token | undefined {
 64 |         const token = this.peek();
 65 |         this.currentPeek = undefined;
 66 |         this.currentRange.Begin = this.currentPeekRange.Begin;
 67 |         this.currentRange.End = this.currentPeekRange.End;
 68 |         return token;
 69 |     }
 70 | 
 71 |     public getLastRange(): LineRange {
 72 |         return this.currentRange;
 73 |     }
 74 | 
 75 |     private static preprocessor_keywords = [
 76 |         'include',
 77 |         'iKeyboard',
 78 |         'iFirstPersonControls',
 79 |         'iUniform',
 80 |         'StrictCompatibility'
 81 |     ];
 82 |     private is_preprocessor_keyword(val: string) {
 83 |         const idx = ShaderLexer.preprocessor_keywords.indexOf(val);
 84 |         if (idx >= 0) {
 85 |             return true;
 86 |         }
 87 |         return val.indexOf('iChannel') === 0;
 88 |     }
 89 |     private static keywords = [
 90 |         'MinFilter',
 91 |         'MagFilter',
 92 |         'WrapMode',
 93 |         'Type',
 94 |         'in',
 95 |         'out',
 96 |         'inout',
 97 |         'step'
 98 |     ];
 99 |     private is_keyword(val: string) {
100 |         return ShaderLexer.keywords.indexOf(val) >= 0;
101 |     }
102 |     private static types = [
103 |         'float',
104 |         'vec2',
105 |         'vec3',
106 |         'vec4',
107 |         'int',
108 |         'ivec2',
109 |         'ivec3',
110 |         'ivec4',
111 |         'color3'
112 |     ];
113 |     private static is_type(val: string) {
114 |         return ShaderLexer.types.indexOf(val) >= 0;
115 |     }
116 |     private static is_quotation(val: string) {
117 |         return '\'"'.indexOf(val) >= 0;
118 |     }
119 |     private static is_digit(val: string) {
120 |         return /[0-9]/i.test(val);
121 |     }
122 |     private static is_non_digit_number_element(val: string) {
123 |         return '-+.'.indexOf(val) >= 0;
124 |     }
125 |     private static is_number_sign(val: string) {
126 |         return '-+'.indexOf(val) >= 0;
127 |     }
128 |     private static is_number_start(val: string) {
129 |         return this.is_digit(val) || this.is_non_digit_number_element(val);
130 |     }
131 |     private static is_exponent_start(val: string) {
132 |         return 'eE'.indexOf(val) >= 0;
133 |     }
134 |     private static is_preprocessor_start(val: string) {
135 |         return val === '#';
136 |     }
137 |     private static is_identifier_start(val: string) {
138 |         return /[a-z_]/i.test(val);
139 |     }
140 |     private static is_identifier(val: string) {
141 |         return ShaderLexer.is_identifier_start(val) || /[0-9]/i.test(val) || '_'.indexOf(val) >= 0;
142 |     }
143 |     private static is_operator(val: string) {
144 |         return '=*/+-%~&|<>?!^'.indexOf(val) >= 0;
145 |     }
146 |     private static is_punctuation(val: string) {
147 |         return '.,:;()[]{}'.indexOf(val) >= 0;
148 |     }
149 |     private static is_whitespace(val: string) {
150 |         return ' \t\r\n\\'.indexOf(val) >= 0;
151 |     }
152 |     private static is_endline(val: string) {
153 |         return '\n'.indexOf(val) >= 0;
154 |     }
155 |     private static not(predicate: (_: string) => boolean) {
156 |         return (val: string) => {
157 |             return !predicate(val);
158 |         };
159 |     }
160 | 
161 |     private skip_whitespace_and_comments() {
162 |         for (;;) {
163 |             const current_pos = this.stream.pos();
164 | 
165 |             // Skip whitespace
166 |             this.next_while(ShaderLexer.is_whitespace);
167 | 
168 |             // Skip comments
169 |             if (this.stream.peek() === '/') {
170 |                 if (this.stream.peek(1) === '/') {
171 |                     this.next_while(ShaderLexer.not(ShaderLexer.is_endline));
172 |                     this.stream.next();
173 |                 }
174 |                 else if (this.stream.peek(1) === '*') {
175 |                     this.stream.next();
176 |                     this.stream.next();
177 |                     do {
178 |                         this.next_while((val: string) => val !== undefined && val !== '/');
179 |                         this.stream.next();
180 |                     } while (!this.stream.eof() && this.stream.peek(-2) !== '*');
181 |                 }
182 |             }
183 | 
184 |             if (current_pos === this.stream.pos()) {
185 |                 return;
186 |             }
187 |         }
188 |     }
189 | 
190 |     private read_next(): Token | undefined {
191 |         if (this.currentPeek !== undefined) {
192 |             return this.currentPeek;
193 |         }     
194 |         
195 |         this.skip_whitespace_and_comments();
196 | 
197 |         if (this.stream.eof()) {
198 |             return undefined;
199 |         }
200 | 
201 |         this.currentPeekRange.Begin = this.stream.pos();
202 | 
203 |         const next_peek = this.stream.peek();
204 |         if (ShaderLexer.is_quotation(next_peek)) {
205 |             return this.next_string(next_peek);
206 |         }
207 |         if (ShaderLexer.is_number_start(next_peek)) {
208 |             let is_valid_number_start = true;
209 |             {
210 |                 let i = 1;
211 |                 let forward_peek = next_peek;
212 |                 while (is_valid_number_start && ShaderLexer.is_non_digit_number_element(forward_peek)) {
213 |                     is_valid_number_start = false;
214 |                     forward_peek = this.stream.peek(i);
215 |                     i++;
216 |                     if (ShaderLexer.is_number_start(forward_peek)) {
217 |                         is_valid_number_start = true;
218 |                     }
219 |                 }
220 |             }
221 |             if (is_valid_number_start) {
222 |                 return this.next_number();
223 |             }
224 |         }
225 |         if (ShaderLexer.is_identifier_start(next_peek)) {
226 |             return this.next_identifier();
227 |         }
228 |         if (ShaderLexer.is_preprocessor_start(next_peek)) {
229 |             this.stream.next();
230 |             const identifier = this.next_identifier();
231 |             if (identifier !== undefined && this.is_preprocessor_keyword(identifier.value)) {
232 |                 identifier.type = TokenType.PreprocessorKeyword;
233 |                 return identifier;
234 |             }
235 |             return undefined;
236 |         }
237 |         if (ShaderLexer.is_punctuation(next_peek)) {
238 |             if (next_peek === ':' && this.stream.peek(1) === ':') {
239 |                 this.stream.next();
240 |                 this.stream.next();
241 |                 return {
242 |                     type: TokenType.Punctuation,
243 |                     value: '::'
244 |                 };
245 |             }
246 | 
247 |             return {
248 |                 type: TokenType.Punctuation,
249 |                 value: this.stream.next()
250 |             };
251 |         }
252 |         if (ShaderLexer.is_operator(next_peek)) {
253 |             return {
254 |                 type: TokenType.Operator,
255 |                 value: this.stream.next()
256 |             };
257 |         }
258 | 
259 |         return {
260 |             type: TokenType.Unkown,
261 |             value: this.stream.next()
262 |         };
263 |     }
264 | 
265 |     private next_while(predicate: (_: string) => boolean) {
266 |         let str = '';
267 |         while (!this.stream.eof() && predicate(this.stream.peek())) {
268 |             str += this.stream.next();
269 |         }
270 |         return str;
271 |     }
272 |     private next_number(): Token {
273 |         let has_read_any = false;
274 |         let has_dot = false;
275 |         let has_exponent = false;
276 |         let previous_was_exponent = false;
277 |         const number = this.next_while((val: string) => {
278 |             const previously_had_exponent = false;
279 |             const return_val = (() => {
280 |                 if (val === '.') {
281 |                     if (has_dot || has_exponent) {
282 |                         return false;
283 |                     }
284 |                     has_dot = true;
285 |                     return true;
286 |                 }
287 |                 else if (ShaderLexer.is_number_sign(val)) {
288 |                     if (previous_was_exponent || !has_read_any) {
289 |                         return true;
290 |                     }
291 |                 }
292 |                 else if (ShaderLexer.is_exponent_start(val)) {
293 |                     if (has_exponent) {
294 |                         return false;
295 |                     }
296 |                     has_exponent = true;
297 |                     return true;
298 |                 }
299 |                 return ShaderLexer.is_digit(val);
300 |             })();
301 |             has_read_any = true;
302 |             previous_was_exponent = previously_had_exponent ? false : has_exponent;
303 |             return return_val;
304 |         });
305 |         const parsedNumber = parseFloat(number);
306 |         return {
307 |             type: has_dot || has_exponent ? TokenType.Float : TokenType.Integer,
308 |             value: parsedNumber
309 |         };
310 |     }
311 |     private next_identifier(): Token {
312 |         const id = this.next_while(ShaderLexer.is_identifier);
313 |         let type = TokenType.Identifier;
314 |         if (this.is_keyword(id)) {
315 |             type = TokenType.Keyword;
316 |         }
317 |         else if (ShaderLexer.is_type(id)) {
318 |             type = TokenType.Type;
319 |         }
320 |         return {
321 |             type: type,
322 |             value: id
323 |         };
324 |     }
325 |     private next_string(quotation: string): Token {
326 |         let escaped = false;
327 |         let str = '';
328 |         this.stream.next();
329 |         while (!this.stream.eof()) {
330 |             const val = this.stream.next();
331 |             if (escaped) {
332 |                 str += val;
333 |                 escaped = false;
334 |             }
335 |             else if (val === '\\') {
336 |                 escaped = true;
337 |             }
338 |             else if (val === quotation) {
339 |                 break;
340 |             }
341 |             else {
342 |                 str += val;
343 |             }
344 |         }
345 |         return {
346 |             type: TokenType.String,
347 |             value: str
348 |         };
349 |     }
350 | }
351 | 


--------------------------------------------------------------------------------
/src/extensions/textures/textures_init_extension.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import * as Types from '../../typenames';
  4 | import { Context } from '../../context';
  5 | import { WebviewExtension } from '../webview_extension';
  6 | import { TextureExtensionExtension } from '../textures/texture_extension_extension';
  7 | import { DiagnosticSeverity } from 'vscode';
  8 | import * as fs from 'fs';
  9 | 
 10 | export class TexturesInitExtension implements WebviewExtension {
 11 |     private content: string;
 12 | 
 13 |     constructor() {
 14 |         this.content = '';
 15 |     }
 16 | 
 17 |     public async init(buffers: Types.BufferDefinition[], context: Context, makeAvailableResource: (localUri: string) => string) {
 18 |         await this.processBuffers(buffers, context, makeAvailableResource);
 19 |     }
 20 | 
 21 |     private async processBuffers(buffers: Types.BufferDefinition[], context: Context, makeAvailableResource: (localUri: string) => string) {
 22 |         const convertMagFilter = (mag: Types.TextureMagFilter | undefined) => {
 23 |             switch(mag) {
 24 |             case Types.TextureMagFilter.Nearest:
 25 |                 return 'THREE.NearestFilter';
 26 |             case Types.TextureMagFilter.Linear:
 27 |             default:
 28 |                 return 'THREE.LinearFilter';
 29 |             }
 30 |         };
 31 |         const convertMinFilter = (min: Types.TextureMinFilter | undefined) => {
 32 |             switch(min) {
 33 |             case Types.TextureMinFilter.Nearest:
 34 |                 return'THREE.NearestFilter';
 35 |             case Types.TextureMinFilter.NearestMipMapNearest:
 36 |                 return'THREE.NearestMipmapNearestFilter';
 37 |             case Types.TextureMinFilter.NearestMipMapLinear:
 38 |                 return'THREE.NearestMipmapLinearFilter';
 39 |             case Types.TextureMinFilter.Linear:
 40 |             default:
 41 |                 return'THREE.LinearFilter';
 42 |             case Types.TextureMinFilter.LinearMipMapNearest:
 43 |                 return'THREE.LinearMipmapNearestFilter';
 44 |             case Types.TextureMinFilter.LinearMipMapLinear:
 45 |                 return'THREE.LinearMipmapLinearFilter';
 46 |             }
 47 |         };
 48 |         const convertWrapMode = (wrap: Types.TextureWrapMode | undefined) => {
 49 |             switch(wrap) {
 50 |             case Types.TextureWrapMode.Clamp:
 51 |                 return 'THREE.ClampToEdgeWrapping';
 52 |             case Types.TextureWrapMode.Repeat:
 53 |             default:
 54 |                 return 'THREE.RepeatWrapping';
 55 |             case Types.TextureWrapMode.Mirror:
 56 |                 return 'THREE.MirroredRepeatWrapping';
 57 |             }
 58 |         };
 59 | 
 60 |         const textureOnLoadScript = (texture: Types.TextureDefinition, bufferIndex: number, textureChannel: number) => {
 61 |             const magFilter = convertMagFilter(texture.Mag);
 62 |             const minFilter = convertMinFilter(texture.Min);
 63 |             const wrapMode = convertWrapMode(texture.Wrap);
 64 | 
 65 |             const textureFileOrigin = texture.File;
 66 |             const hasCustomSettings = texture.MagLine !== undefined || texture.MinLine !== undefined || texture.WrapLine !== undefined || textureFileOrigin !== undefined;
 67 |             const powerOfTwoWarning = `\
 68 | function isPowerOfTwo(n) {
 69 |     return n && (n & (n - 1)) === 0;
 70 | };
 71 | if (!isPowerOfTwo(texture.image.width) || !isPowerOfTwo(texture.image.height)) {
 72 |     let diagnostics = [];
 73 |     ${texture.MagLine !== undefined ? `diagnostics.push({
 74 |             line: ${texture.MagLine},
 75 |             message: 'Texture is not power of two, custom texture settings may not work.'
 76 |         });` : ''
 77 | }
 78 |     ${texture.MinLine !== undefined ? `diagnostics.push({
 79 |             line: ${texture.MinLine},
 80 |             message: 'Texture is not power of two, custom texture settings may not work.'
 81 |         });` : ''
 82 | }
 83 |     ${texture.WrapLine !== undefined ? `diagnostics.push({
 84 |             line: ${texture.WrapLine},
 85 |             message: 'Texture is not power of two, custom texture settings may not work.'
 86 |         });` : ''
 87 | }
 88 |     let diagnosticBatch = {
 89 |         filename: '${textureFileOrigin}',
 90 |         diagnostics: diagnostics
 91 |     };
 92 |     if (vscode !== undefined) {
 93 |         vscode.postMessage({
 94 |             command: 'showGlslDiagnostic',
 95 |             type: 'warning',
 96 |             diagnosticBatch: diagnosticBatch
 97 |         });
 98 |     }
 99 | };
100 | buffers[${bufferIndex}].ChannelResolution[${textureChannel}] = new THREE.Vector3(texture.image.width, texture.image.height, 1);
101 | buffers[${bufferIndex}].Shader.uniforms.iChannelResolution.value = buffers[${bufferIndex}].ChannelResolution;
102 | `;
103 | 
104 |             return `\
105 | function(texture) {
106 |     ${hasCustomSettings ? powerOfTwoWarning : ''}
107 |     texture.magFilter = ${magFilter};
108 |     texture.minFilter = ${minFilter};
109 |     texture.wrapS = ${wrapMode};
110 |     texture.wrapT = ${wrapMode};
111 | }`;
112 |         };
113 |         const makeTextureLoadErrorScript = (filename: string) => { 
114 |             return `\
115 | function(err) {
116 |     console.log(err);
117 |     if (vscode !== undefined) {
118 |         vscode.postMessage({
119 |             command: 'errorMessage',
120 |             message: 'Failed loading texture file ${filename}'
121 |         });
122 |     }
123 | }`;
124 |         };
125 | 
126 |         for (const i in buffers) {
127 |             const buffer = buffers[i];
128 |             const textures =  buffer.TextureInputs;
129 |             for (const texture of textures) {
130 |                 const channel = texture.Channel;
131 | 
132 |                 const textureBufferIndex = texture.BufferIndex;
133 |                 const localPath = texture.LocalTexture;
134 |                 const remotePath = texture.RemoteTexture;
135 | 
136 |                 if (texture.Type !== undefined && texture.Type === Types.TextureType.CubeMap) {
137 |                     if (localPath === undefined || (localPath.match(/{}/g) || []).length !== 1) {
138 |                         const diagnosticBatch: Types.DiagnosticBatch = {
139 |                             filename: texture.File,
140 |                             diagnostics: [{
141 |                                 line: texture.TypeLine || 0,
142 |                                 message: 'Only local paths with a single wildcard "{}" are supported for the CubeMap texture type.'
143 |                             }]
144 |                         };
145 |                         context.showDiagnostics(diagnosticBatch, DiagnosticSeverity.Error);
146 |                         continue;
147 |                     }
148 | 
149 |                     const getTexturesFromPrefixes = async (pattern: string, prefixes: [string, string, string, string, string, string]) => {
150 |                         const textures = [];
151 |                         for (const dir of prefixes) {
152 |                             const directionFile = pattern.replace('{}', dir);
153 |                             try {
154 |                                 await fs.promises.access(directionFile);
155 |                             }
156 |                             catch {
157 |                                 return;
158 |                             }
159 |                             textures.push(directionFile);
160 |                         }
161 |                         return textures;
162 |                     };
163 | 
164 |                     const possiblePrefixes: [string, string, string, string, string, string][] = [
165 |                         ['e', 'w', 'u', 'd', 'n', 's'],
166 |                         ['east', 'west', 'up', 'down', 'north', 'south'],
167 |                         ['px', 'nx', 'py', 'ny', 'pz', 'nz'],
168 |                         ['posx', 'negx', 'posy', 'negy', 'posz', 'negz']
169 |                     ];
170 | 
171 |                     let textures: string[] | undefined = undefined;
172 |                     for (const prefixes of possiblePrefixes) {
173 |                         textures = await getTexturesFromPrefixes(localPath, prefixes);
174 |                         if (textures !== undefined) {
175 |                             break;
176 |                         }
177 |                     }
178 | 
179 |                     if (textures === undefined) {
180 |                         const diagnosticBatch: Types.DiagnosticBatch = {
181 |                             filename: texture.File,
182 |                             diagnostics: [{
183 |                                 line: texture.TypeLine || 0,
184 |                                 message: 'Could not find all cubemap files for the given path with wildcard.'
185 |                             }]
186 |                         };
187 |                         context.showDiagnostics(diagnosticBatch, DiagnosticSeverity.Error);
188 |                         continue;
189 |                     }
190 | 
191 |                     textures = textures.map((texture: string) => { return  makeAvailableResource(texture); });
192 |                     const textureLoadScript = `new THREE.CubeTextureLoader().load([ "${textures.join('", "')}" ], ${textureOnLoadScript(texture, Number(i), channel)}, undefined, ${makeTextureLoadErrorScript(localPath)})`;
193 |                 
194 |                     this.content += `\
195 | buffers[${i}].Shader.uniforms.iChannel${channel} = { type: 't', value: ${textureLoadScript} };`;
196 |                 }
197 |                 else {
198 |                     let textureLoadScript: string | undefined;
199 |                     let textureSizeScript: string = 'null';
200 |                     if (textureBufferIndex !== undefined) {
201 |                         const magFilter = convertMagFilter(texture.Mag);
202 |                         const minFilter = convertMinFilter(texture.Min);
203 |                         const wrapMode = convertWrapMode(texture.Wrap);
204 |             
205 |                         textureLoadScript = `\
206 | (() => {
207 |     let texture = buffers[${textureBufferIndex}].Target.texture;
208 |     texture.magFilter = ${magFilter};
209 |     texture.minFilter = ${minFilter};
210 |     texture.wrapS = ${wrapMode};
211 |     texture.wrapT = ${wrapMode};
212 |     return texture;
213 | })()`;
214 |                         textureSizeScript = `new THREE.Vector3(buffers[${textureBufferIndex}].Target.width, buffers[${textureBufferIndex}].Target.height, 1)`;
215 |                     }
216 |                     else if (localPath !== undefined && texture.Mag !== undefined && texture.Min !== undefined && texture.Wrap !== undefined) {
217 |                         const resolvedPath = makeAvailableResource(localPath);
218 |                         textureLoadScript = `texLoader.load('${resolvedPath}', ${textureOnLoadScript(texture, Number(i), channel)}, undefined, ${makeTextureLoadErrorScript(resolvedPath)})`;
219 |                     }
220 |                     else if (remotePath !== undefined && texture.Mag !== undefined && texture.Min !== undefined && texture.Wrap !== undefined) {
221 |                         textureLoadScript = `texLoader.load('${remotePath}', ${textureOnLoadScript(texture, Number(i), channel)}, undefined, ${makeTextureLoadErrorScript(remotePath)})`;
222 |                     }
223 | 
224 |                     if (textureLoadScript !== undefined) {
225 |                         this.content += `\
226 | buffers[${i}].ChannelResolution[${channel}] = ${textureSizeScript};
227 | buffers[${i}].Shader.uniforms.iChannelResolution.value = buffers[${i}].ChannelResolution;
228 | buffers[${i}].Shader.uniforms.iChannel${channel} = { type: 't', value: ${textureLoadScript} };`;
229 |                     }
230 |                 }
231 |             }
232 | 
233 |             if (buffer.UsesSelf) {
234 |                 this.content += `
235 | buffers[${i}].Shader.uniforms.iChannel${buffer.SelfChannel} = { type: 't', value: buffers[${i}].PingPongTarget.texture };\n`;
236 |             }
237 | 
238 |             if (buffer.UsesKeyboard) {
239 |                 this.content += `
240 | buffers[${i}].Shader.uniforms.iKeyboard = { type: 't', value: keyBoardTexture };\n`;
241 |             }
242 |         }
243 |     }
244 | 
245 |     public generateContent(): string {
246 |         return this.content;
247 |     }
248 | 
249 |     public addTextureContent(textureExtensionExtension: TextureExtensionExtension) {
250 |         this.content += textureExtensionExtension.generateTextureContent();
251 |     }
252 | }
253 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "name": "shader-toy",
  3 |     "displayName": "Shader Toy",
  4 |     "description": "Live preview of GLSL shaders similar to shadertoy",
  5 |     "version": "0.11.3",
  6 |     "publisher": "stevensona",
  7 |     "license": "MIT",
  8 |     "repository": {
  9 |         "url": "https://github.com/stevensona/shader-toy.git"
 10 |     },
 11 |     "bugs": {
 12 |         "url": "https://github.com/stevensona/shader-toy/issues"
 13 |     },
 14 |     "engines": {
 15 |         "vscode": "^1.79.1"
 16 |     },
 17 |     "categories": [
 18 |         "Other"
 19 |     ],
 20 |     "main": "./dist/extension.js",
 21 |     "contributes": {
 22 |         "configuration": {
 23 |             "properties": {
 24 |                 "shader-toy.forceAspectRatio": {
 25 |                     "type": "array",
 26 |                     "items": [
 27 |                         {
 28 |                             "type": "number"
 29 |                         },
 30 |                         {
 31 |                             "type": "number"
 32 |                         }
 33 |                     ],
 34 |                     "default": [
 35 |                         0,
 36 |                         0
 37 |                     ],
 38 |                     "description": "Force the rendering into a specific aspect ratio. Set either to zero or negative to ignore."
 39 |                 },
 40 |                 "shader-toy.showCompileErrorsAsDiagnostics": {
 41 |                     "type": "boolean",
 42 |                     "default": true,
 43 |                     "description": "Show all compile errors directly in the editor as diagnostics."
 44 |                 },
 45 |                 "shader-toy.omitDeprecationWarnings": {
 46 |                     "type": "boolean",
 47 |                     "default": false,
 48 |                     "description": "Omit warnings when using a deprecated feature, replacing those with a single warning on activating the extension. Be careful with this setting, as shaders might break unpredictably in future updates."
 49 |                 },
 50 |                 "shader-toy.enableGlslifySupport": {
 51 |                     "type": "boolean",
 52 |                     "default": false,
 53 |                     "description": "Enable support for glslify, which will transform shader code after all transformations this extension does. Line numbers for errors are currently disable when this option is enabled."
 54 |                 },
 55 |                 "shader-toy.reloadAutomatically": {
 56 |                     "type": "boolean",
 57 |                     "default": true,
 58 |                     "description": "Master switch for all automatic reloads."
 59 |                 },
 60 |                 "shader-toy.reloadOnEditText": {
 61 |                     "type": "boolean",
 62 |                     "default": true,
 63 |                     "description": "Reload OpenGL viewport when the opened file contents are changed."
 64 |                 },
 65 |                 "shader-toy.reloadOnEditTextDelay": {
 66 |                     "type": "number",
 67 |                     "default": 1,
 68 |                     "description": "Delay in seconds between an edit of the opened file and the reload of OpenGL viewport."
 69 |                 },
 70 |                 "shader-toy.reloadOnChangeEditor": {
 71 |                     "type": "boolean",
 72 |                     "default": false,
 73 |                     "description": "Reload OpenGL viewport when editor changes."
 74 |                 },
 75 |                 "shader-toy.reloadOnSaveFile": {
 76 |                     "type": "boolean",
 77 |                     "default": true,
 78 |                     "description": "Reload OpenGL viewport when editor is saved."
 79 |                 },
 80 |                 "shader-toy.resetStateOnChangeEditor": {
 81 |                     "type": "boolean",
 82 |                     "default": true,
 83 |                     "description": "Reset state of time, mouse and keyboard when reloading OpenGL viewport through an editor change."
 84 |                 },
 85 |                 "shader-toy.showScreenshotButton": {
 86 |                     "type": "boolean",
 87 |                     "default": true,
 88 |                     "description": "Shows a screenshot button in the OpenGL viewport which allows to save the current frame as a png file."
 89 |                 },
 90 |                 "shader-toy.screenshotResolution": {
 91 |                     "type": "array",
 92 |                     "items": [
 93 |                         {
 94 |                             "type": "number"
 95 |                         },
 96 |                         {
 97 |                             "type": "number"
 98 |                         }
 99 |                     ],
100 |                     "default": [
101 |                         0,
102 |                         0
103 |                     ],
104 |                     "description": "Manually set the resolution of a screenshot. Set either to zero or negative to use the viewports resolution."
105 |                 },
106 |                 "shader-toy.showRecordButton": {
107 |                     "type": "boolean",
108 |                     "default": true,
109 |                     "description": "Shows a record button in the OpenGL viewport which allows to start a recording of the viewport."
110 |                 },
111 |                 "shader-toy.recordTargetFramerate": {
112 |                     "type": "number",
113 |                     "default": 30,
114 |                     "description": "Framerate that is targeted when using the record button."
115 |                 },
116 |                 "shader-toy.recordVideoContainer": {
117 |                     "type": "string",
118 |                     "default": "webm",
119 |                     "description": "Video file container. Currently only webm is supported, but mp4support is coming."
120 |                 },
121 |                 "shader-toy.recordVideoCodec": {
122 |                     "type": "string",
123 |                     "default": "vp8",
124 |                     "enum": ["vp8", "vp9", "h264", "avc1"],
125 |                     "description": "Video codec. vp8, vp9, h264 and avc1 are all supported. Default it vp8."
126 |                 },
127 |                 "shader-toy.recordVideoBitRate": {
128 |                     "type": "number",
129 |                     "default": 2500000,
130 |                     "description": "Video encoding bit rate in bits/seconds."
131 |                 },
132 |                 "shader-toy.recordMaxDuration": {
133 |                     "type": "number",
134 |                     "default": 0,
135 |                     "description": "Maximum recording duration in seconds. 0 (the default) will keep recording until the record button is pressed again."
136 |                 },
137 |                 "shader-toy.recordOffline": {
138 |                     "type": "boolean",
139 |                     "default": false,
140 |                     "description": "Enable high-quality offline recording."
141 |                 },
142 |                 "shader-toy.recordOfflineFormat": {
143 |                     "type": "string",
144 |                     "default": "webm",
145 |                     "description": "Offline recording quality. Possible value are webm, gif, png and jpg."
146 |                 },
147 |                 "shader-toy.recordOfflineQuality": {
148 |                     "type": "number",
149 |                     "default": 80,
150 |                     "description": "Offline recording format. 0 is lowest and 100 highest. Applies when format is webm or jpg."
151 |                 },
152 |                 "shader-toy.showPauseButton": {
153 |                     "type": "boolean",
154 |                     "default": true,
155 |                     "description": "Shows a pause button in the OpenGL viewport which allows to pause the rendering."
156 |                 },
157 |                 "shader-toy.pauseWholeRender": {
158 |                     "type": "boolean",
159 |                     "default": true,
160 |                     "description": "Determines whether pausing will pause only time thus still render and allow input, or pause everything."
161 |                 },
162 |                 "shader-toy.pauseMaintainedOnReload": {
163 |                     "type": "boolean",
164 |                     "default": false,
165 |                     "description": "If unticked the render wil un-pause when reloading, otherwise it will stay paused if it was paused before."
166 |                 },
167 |                 "shader-toy.printShaderFrameTime": {
168 |                     "type": "boolean",
169 |                     "default": true,
170 |                     "description": "Display shader frame time graph in corner of display."
171 |                 },
172 |                 "shader-toy.warnOnUndefinedTextures": {
173 |                     "type": "boolean",
174 |                     "default": true,
175 |                     "description": "If enabled the user is warned when a channel is used in code but there is no definition for said channel, likely resulting in a bug in the shader."
176 |                 },
177 |                 "shader-toy.enabledAudioInput": {
178 |                     "type": "boolean",
179 |                     "default": false,
180 |                     "description": "Allow using media files as inputs in shaders. Note that the feature is experimental and should be used with caution."
181 |                 },
182 |                 "shader-toy.audioDomainSize": {
183 |                     "type": "number",
184 |                     "default": 512,
185 |                     "description": "Size of the domain used for four transformation when using audio as an input."
186 |                 },
187 |                 "shader-toy.testCompileIncludedFiles": {
188 |                     "type": "boolean",
189 |                     "default": true,
190 |                     "description": "If enabled all included files will be compiled on their own. Some included files may not compile on their own and require this to be disabled."
191 |                 },
192 |                 "shader-toy.shaderToyStrictCompatibility": {
193 |                     "type": "boolean",
194 |                     "default": false,
195 |                     "description": "This setting will assume your shaders follow the standards set on the online version of ShaderToy, e.g. you have a mainImage function defined. Use this if you have issues with shaders from shadertoy.com in the VSCode extension, but not if you regularly use shaders defining a regular main function."
196 |                 }
197 |             }
198 |         },
199 |         "commands": [
200 |             {
201 |                 "command": "shader-toy.showGlslPreview",
202 |                 "title": "Shader Toy: Show GLSL Preview"
203 |             },
204 |             {
205 |                 "command": "shader-toy.showStaticGlslPreview",
206 |                 "title": "Shader Toy: Show Static GLSL Preview"
207 |             },
208 |             {
209 |                 "command": "shader-toy.createPortableGlslPreview",
210 |                 "title": "Shader Toy: Create Portable GLSL Preview"
211 |             },
212 |             {
213 |                 "command": "shader-toy.pauseGlslPreviews",
214 |                 "title": "Shader Toy: Pause/Play GLSL Previews"
215 |             },
216 |             {
217 |                 "command": "shader-toy.saveGlslPreviewScreenShots",
218 |                 "title": "Shader Toy: Save GLSL Preview Screenshots"
219 |             }
220 |         ],
221 |         "menus": {
222 |             "editor/context": [
223 |                 {
224 |                     "command": "shader-toy.showGlslPreview",
225 |                     "group": "ShaderToy-Core"
226 |                 },
227 |                 {
228 |                     "command": "shader-toy.showStaticGlslPreview",
229 |                     "group": "ShaderToy-Core"
230 |                 },
231 |                 {
232 |                     "command": "shader-toy.createPortableGlslPreview",
233 |                     "group": "ShaderToy"
234 |                 },
235 |                 {
236 |                     "command": "shader-toy.pauseGlslPreviews",
237 |                     "group": "ShaderToy"
238 |                 },
239 |                 {
240 |                     "command": "shader-toy.saveGlslPreviewScreenShots",
241 |                     "group": "ShaderToy"
242 |                 }
243 |             ]
244 |         }
245 |     },
246 |     "scripts": {
247 |         "vscode:prepublish": "webpack --mode production",
248 |         "compile": "tsc -p ./",
249 |         "watch": "tsc -watch -p ./",
250 |         "webpack": "webpack --mode development",
251 |         "webpack-dev": "webpack --mode development --watch",
252 |         "pretest": "npm run compile",
253 |         "test": "node ./out/test/run_tests.js",
254 |         "deploy": "vsce publish",
255 |         "format": "eslint --fix \"src/**\" --config .eslintrc.json"
256 |     },
257 |     "dependencies": {
258 |         "compare-versions": "^6.1.1",
259 |         "glslify": "^7.1.1",
260 |         "mime": "^4.0.7"
261 |     },
262 |     "devDependencies": {
263 |         "@types/glob": "^9.0.0",
264 |         "@types/mime": "^4.0.0",
265 |         "@types/mocha": "^10.0.10",
266 |         "@types/node": "^24.3.0",
267 |         "@types/vscode": "^1.103.0",
268 |         "@typescript-eslint/eslint-plugin": "^8.40.0",
269 |         "@typescript-eslint/parser": "^8.40.0",
270 |         "@vscode/test-electron": "^2.5.2",
271 |         "@vscode/vsce": "^3.6.0",
272 |         "eslint": "^8.40.0",
273 |         "glob": "^11.0.3",
274 |         "mocha": "^11.7.1",
275 |         "ts-loader": "^9.5.4",
276 |         "typescript": "^5.9.2",
277 |         "webpack": "^5.101.3",
278 |         "webpack-cli": "^6.0.1"
279 |     },
280 |     "icon": "resources/thumb.png"
281 | }
282 | 


--------------------------------------------------------------------------------
/src/shadertoymanager.ts:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import * as vscode from 'vscode';
  4 | import * as fs from 'fs';
  5 | import * as path from 'path';
  6 | import { RenderStartingData, DiagnosticBatch } from './typenames';
  7 | import { WebviewContentProvider } from './webviewcontentprovider';
  8 | import { Context } from './context';
  9 | import { removeDuplicates } from './utility';
 10 | 
 11 | type Webview = {
 12 |     Panel: vscode.WebviewPanel,
 13 |     OnDidDispose: () => void
 14 | };
 15 | type StaticWebview = Webview & {
 16 |     Document: vscode.TextDocument
 17 | };
 18 | 
 19 | export class ShaderToyManager {
 20 |     context: Context;
 21 | 
 22 |     startingData = new RenderStartingData();
 23 | 
 24 |     webviewPanel: Webview | undefined;
 25 |     staticWebviews: StaticWebview[] = [];
 26 | 
 27 |     constructor(context: Context) {
 28 |         this.context = context;
 29 |     }
 30 | 
 31 |     public migrateToNewContext = async (context: Context) => {
 32 |         this.context = context;
 33 |         if (this.webviewPanel && this.context.activeEditor) {
 34 |             await this.updateWebview(this.webviewPanel, this.context.activeEditor.document);
 35 |         }
 36 |         for (const staticWebview of this.staticWebviews) {
 37 |             await this.updateWebview(staticWebview, staticWebview.Document);
 38 |         }
 39 |     };
 40 | 
 41 |     public showDynamicPreview = async () => {
 42 |         if (this.context.getConfig<boolean>('reloadOnChangeEditor') !== true) {
 43 |             this.context.activeEditor = vscode.window.activeTextEditor;
 44 |         }
 45 | 
 46 |         if (this.webviewPanel) {
 47 |             this.webviewPanel.Panel.dispose();
 48 |         }
 49 |         const newWebviewPanel = this.createWebview('GLSL Preview', undefined);
 50 |         this.webviewPanel = {
 51 |             Panel: newWebviewPanel,
 52 |             OnDidDispose: () => {
 53 |                 this.webviewPanel = undefined;
 54 |             }
 55 |         };
 56 |         newWebviewPanel.onDidDispose(this.webviewPanel.OnDidDispose);
 57 |         if (this.context.activeEditor !== undefined) {
 58 |             this.webviewPanel = await this.updateWebview(this.webviewPanel, this.context.activeEditor.document);
 59 |         }
 60 |         else {
 61 |             vscode.window.showErrorMessage('Select a TextEditor to show GLSL Preview.');
 62 |         }
 63 |     };
 64 | 
 65 |     public showStaticPreview = async () => {
 66 |         if (vscode.window.activeTextEditor !== undefined) {
 67 |             const document = vscode.window.activeTextEditor.document;
 68 |             if (this.staticWebviews.find((webview: StaticWebview) => { return webview.Document === document; }) === undefined) {
 69 |                 const newWebviewPanel = this.createWebview('Static GLSL Preview', undefined);
 70 |                 const onDidDispose = () => {
 71 |                     const staticWebview = this.staticWebviews.find((webview: StaticWebview) => { return webview.Panel === newWebviewPanel; });
 72 |                     if (staticWebview !== undefined) {
 73 |                         const index = this.staticWebviews.indexOf(staticWebview);
 74 |                         this.staticWebviews.splice(index, 1);
 75 |                     }
 76 |                 };
 77 |                 this.staticWebviews.push({
 78 |                     Panel: newWebviewPanel,
 79 |                     OnDidDispose: onDidDispose,
 80 |                     Document: document
 81 |                 });
 82 |                 const staticWebview = this.staticWebviews[this.staticWebviews.length - 1];
 83 |                 this.staticWebviews[this.staticWebviews.length - 1] = await this.updateWebview(staticWebview, vscode.window.activeTextEditor.document);
 84 |                 newWebviewPanel.onDidDispose(onDidDispose);
 85 |             }
 86 |         }
 87 |     };
 88 | 
 89 |     public createPortablePreview = async () => {
 90 |         if (vscode.window.activeTextEditor !== undefined) {
 91 |             const document = vscode.window.activeTextEditor.document;
 92 |             const webviewContentProvider = new WebviewContentProvider(this.context, document.getText(), document.fileName);
 93 |             await webviewContentProvider.parseShaderTree(false);
 94 |             const htmlContent = webviewContentProvider.generateWebviewContent(undefined, this.startingData);
 95 |             const originalFileExt = path.extname(document.fileName);
 96 |             const previewFilePath = document.fileName.replace(originalFileExt, '.html');
 97 |             fs.promises.writeFile(previewFilePath, await htmlContent)
 98 |                 .catch((reason: { message: string }) => {
 99 |                     console.error(reason.message);
100 |                 });
101 |         }
102 |     };
103 | 
104 |     public onDocumentChanged = async (documentChange: vscode.TextDocumentChangeEvent) => {
105 |         this.onDocumentEvent(documentChange.document);
106 |     };
107 | 
108 |     public onDocumentSaved = async (document: vscode.TextDocument) => {
109 |         this.onDocumentEvent(document);
110 |     };
111 | 
112 |     public onDocumentEvent = async (document: vscode.TextDocument) => {
113 |         if (this.context.getConfig<boolean>('reloadAutomatically')) {
114 |             const staticWebview = this.staticWebviews.find((webview: StaticWebview) => { return webview.Document === document; });
115 |             const isActiveDocument = this.context.activeEditor !== undefined && document === this.context.activeEditor.document;
116 |             if (isActiveDocument || staticWebview !== undefined) {
117 |                 if (this.webviewPanel !== undefined && this.context.activeEditor !== undefined) {
118 |                     this.webviewPanel = await this.updateWebview(this.webviewPanel, this.context.activeEditor.document);
119 |                 }
120 | 
121 |                 this.staticWebviews.map((staticWebview: StaticWebview) => this.updateWebview(staticWebview, staticWebview.Document));
122 |             }
123 |         }
124 |     };
125 | 
126 |     public onEditorChanged = async (newEditor: vscode.TextEditor | undefined) => {
127 |         if (newEditor !== undefined && newEditor.document.getText() !== '' && newEditor !== this.context.activeEditor) {
128 |             this.context.activeEditor = newEditor;
129 | 
130 |             if (this.context.getConfig<boolean>('reloadAutomatically') && this.context.getConfig<boolean>('reloadOnChangeEditor')) {
131 |                 if (this.context.getConfig<boolean>('resetStateOnChangeEditor')) {
132 |                     this.resetStartingData();
133 |                 }
134 |                 if (!this.context.getConfig<boolean>('pauseMaintainedOnReload')) {
135 |                     this.resetPauseState();
136 |                 }
137 |                 if (this.webviewPanel !== undefined) {
138 |                     this.webviewPanel = await this.updateWebview(this.webviewPanel, this.context.activeEditor.document);
139 |                 }
140 |             }
141 |         }
142 |     };
143 | 
144 |     public postCommand = (command : string) => {
145 |         if (this.webviewPanel !== undefined) {
146 |             this.webviewPanel.Panel.webview.postMessage({command: command});
147 |         }
148 |         this.staticWebviews.forEach((webview: StaticWebview) => webview.Panel.webview.postMessage({command: command}));
149 |     };
150 | 
151 |     private resetStartingData = () => {
152 |         const paused = this.startingData.Paused;
153 |         this.startingData = new RenderStartingData();
154 |         this.startingData.Paused = paused;
155 |     };
156 |     private resetPauseState = () => {
157 |         this.startingData.Paused = false;
158 |     };
159 | 
160 |     private createWebview = (title: string, localResourceRoots: vscode.Uri[] | undefined) => {
161 |         if (localResourceRoots !== undefined) {
162 |             const extensionRoot = vscode.Uri.file(this.context.getVscodeExtensionContext().extensionPath);
163 |             localResourceRoots.push(extensionRoot);
164 |         }
165 |         const options: vscode.WebviewOptions = {
166 |             enableScripts: true,
167 |             localResourceRoots: localResourceRoots
168 |         };
169 |         const newWebviewPanel = vscode.window.createWebviewPanel(
170 |             'shadertoy',
171 |             title,
172 |             { viewColumn: vscode.ViewColumn.Two, preserveFocus: true },
173 |             options
174 |         );
175 |         newWebviewPanel.iconPath = this.context.getResourceUri('thumb.png');
176 |         newWebviewPanel.webview.onDidReceiveMessage(
177 |             (message: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
178 |                 switch (message.command) {
179 |                 case 'reloadWebview':
180 |                     if (this.webviewPanel !== undefined && this.webviewPanel.Panel === newWebviewPanel && this.context.activeEditor !== undefined) {
181 |                         this.updateWebview(this.webviewPanel, this.context.activeEditor.document);
182 |                     }
183 |                     else {
184 |                         this.staticWebviews.forEach((staticWebview: StaticWebview) => {
185 |                             if (staticWebview.Panel === newWebviewPanel) {
186 |                                 this.updateWebview(staticWebview, staticWebview.Document);
187 |                             }
188 |                         });
189 |                     }
190 |                     return;
191 |                 case 'updateTime':
192 |                     this.startingData.Time = message.time;
193 |                     return;
194 |                 case 'setPause':
195 |                     this.startingData.Paused = message.paused;
196 |                     return;
197 |                 case 'updateMouse':
198 |                     this.startingData.Mouse = message.mouse;
199 |                     this.startingData.NormalizedMouse = message.normalizedMouse;
200 |                     return;
201 |                 case 'updateKeyboard':
202 |                     this.startingData.Keys = message.keys;
203 |                     return;
204 |                 case 'updateFlyControlTransform':
205 |                     this.startingData.FlyControlPosition = message.position;
206 |                     this.startingData.FlyControlRotation = message.rotation;
207 |                     return;
208 |                 case 'updateUniformsGuiOpen':
209 |                     this.startingData.UniformsGui.Open = message.value;
210 |                     return;
211 |                 case 'updateUniformsGuiValue':
212 |                     this.startingData.UniformsGui.Values.set(message.name, message.value);
213 |                     return;
214 |                 case 'showGlslDiagnostic':
215 |                 {
216 |                     const diagnosticBatch: DiagnosticBatch = message.diagnosticBatch;
217 |                     let severity: vscode.DiagnosticSeverity;
218 | 
219 |                     switch (message.type) {
220 |                     case 'error':
221 |                         severity = vscode.DiagnosticSeverity.Error;
222 |                         break;
223 |                     case 'warning':
224 |                         severity = vscode.DiagnosticSeverity.Warning;
225 |                         break;
226 |                     case 'hint':
227 |                         severity = vscode.DiagnosticSeverity.Hint;
228 |                         break;
229 |                     case 'information':
230 |                     default:
231 |                         severity = vscode.DiagnosticSeverity.Information;
232 |                         break;
233 |                     }
234 | 
235 |                     this.context.showDiagnostics(diagnosticBatch, severity);
236 |                     return;
237 |                 }
238 |                 case 'showGlslsError':
239 |                 {
240 |                     const file: string = message.file;
241 |                     const line: number = message.line;
242 | 
243 |                     this.context.revealLine(file, line);
244 |                     return;
245 |                 }
246 |                 case 'errorMessage':
247 |                     vscode.window.showErrorMessage(message.message);
248 |                     return;
249 |                 }
250 |             },
251 |             undefined,
252 |             this.context.getVscodeExtensionContext().subscriptions
253 |         );
254 |         return newWebviewPanel;
255 |     };
256 | 
257 |     private updateWebview = async <T extends Webview | StaticWebview>(webviewPanel: T, document: vscode.TextDocument): Promise<T> => {
258 |         this.context.clearDiagnostics();
259 |         const webviewContentProvider = new WebviewContentProvider(this.context, document.getText(), document.fileName);
260 |         const localResources = await webviewContentProvider.parseShaderTree(false);
261 | 
262 |         let localResourceRoots: string[] = [];
263 |         for (const localResource of localResources) {
264 |             const localResourceRoot = path.dirname(localResource);
265 |             localResourceRoots.push(localResourceRoot);
266 |         }
267 |         localResourceRoots = removeDuplicates(localResourceRoots);
268 | 
269 |         // Recreate webview if allowed resource roots are not part of the current resource roots
270 |         const previousLocalResourceRoots = webviewPanel.Panel.webview.options.localResourceRoots || [];
271 |         const previousHadLocalResourceRoot = (localResourceRootAsUri: string) => {
272 |             const foundElement = previousLocalResourceRoots.find(uri => uri.toString() === localResourceRootAsUri);
273 |             return foundElement !== undefined;
274 |         };
275 |         const previousHadAllLocalResourceRoots = localResourceRoots.every(localResourceRoot => previousHadLocalResourceRoot(vscode.Uri.file(localResourceRoot).toString()));
276 |         if (!previousHadAllLocalResourceRoots) {
277 |             const localResourceRootsUri = localResourceRoots.map(localResourceRoot => vscode.Uri.file(localResourceRoot));
278 |             const newWebviewPanel = this.createWebview(webviewPanel.Panel.title, localResourceRootsUri);
279 |             webviewPanel.Panel.dispose();
280 |             newWebviewPanel.onDidDispose(webviewPanel.OnDidDispose);
281 |             webviewPanel.Panel = newWebviewPanel;
282 |         }
283 | 
284 |         webviewPanel.Panel.webview.html = await webviewContentProvider.generateWebviewContent(webviewPanel.Panel.webview, this.startingData);
285 |         return webviewPanel;
286 |     };
287 | }
288 | 


--------------------------------------------------------------------------------