diff --git a/examples/_screens/1.png b/examples/_screens/1.png new file mode 100644 index 0000000..3152497 Binary files /dev/null and b/examples/_screens/1.png differ diff --git a/examples/_screens/10.png b/examples/_screens/10.png new file mode 100644 index 0000000..b3b682f Binary files /dev/null and b/examples/_screens/10.png differ diff --git a/examples/_screens/11.png b/examples/_screens/11.png new file mode 100644 index 0000000..9d7ee7a Binary files /dev/null and b/examples/_screens/11.png differ diff --git a/examples/_screens/2.png b/examples/_screens/2.png new file mode 100644 index 0000000..ed3616c Binary files /dev/null and b/examples/_screens/2.png differ diff --git a/examples/_screens/3.png b/examples/_screens/3.png new file mode 100644 index 0000000..7edec34 Binary files /dev/null and b/examples/_screens/3.png differ diff --git a/examples/_screens/4.png b/examples/_screens/4.png new file mode 100644 index 0000000..778d2e6 Binary files /dev/null and b/examples/_screens/4.png differ diff --git a/examples/_screens/5.png b/examples/_screens/5.png new file mode 100644 index 0000000..7eef6f8 Binary files /dev/null and b/examples/_screens/5.png differ diff --git a/examples/_screens/6.png b/examples/_screens/6.png new file mode 100644 index 0000000..a19f23b Binary files /dev/null and b/examples/_screens/6.png differ diff --git a/examples/_screens/7.png b/examples/_screens/7.png new file mode 100644 index 0000000..36c58e0 Binary files /dev/null and b/examples/_screens/7.png differ diff --git a/examples/_screens/8.png b/examples/_screens/8.png new file mode 100644 index 0000000..6a06248 Binary files /dev/null and b/examples/_screens/8.png differ diff --git a/examples/_screens/9.png b/examples/_screens/9.png new file mode 100644 index 0000000..f9441b8 Binary files /dev/null and b/examples/_screens/9.png differ diff --git a/examples/_screens/tba.png b/examples/_screens/tba.png new file mode 100644 index 0000000..d190655 Binary files /dev/null and b/examples/_screens/tba.png differ diff --git a/examples/effects/main.mjs b/examples/effects/main.mjs index c49898a..ca01d91 100644 --- a/examples/effects/main.mjs +++ b/examples/effects/main.mjs @@ -68,7 +68,6 @@ floor.scale = [40, 1, 40] // Setup UX and start const note = document.createElement('div') -note.innerHTML = 'B' note.style.width = '100%' note.style.textAlign = 'center' note.style.fontSize = '2vw' @@ -94,31 +93,31 @@ function switchEffect(effectNum) { switch (effectNum) { case 0: customEdgeEffect(6.0, 2.0) - note.innerHTML = 'Effect: Custom' + note.innerHTML = 'Effect: Custom
Press space to change' break case 1: ctx.setEffectGlitch() - note.innerHTML = 'Effect: Glitch' + note.innerHTML = 'Effect: Glitch
Press space to change' break case 2: ctx.setEffectDuotone() - note.innerHTML = 'Effect: DuoTone' + note.innerHTML = 'Effect: DuoTone
Press space to change' break case 3: ctx.setEffectScanlines() - note.innerHTML = 'Effect: Scanlines' + note.innerHTML = 'Effect: Scanlines
Press space to change' break case 4: ctx.setEffectNoise() - note.innerHTML = 'Effect: Noise' + note.innerHTML = 'Effect: Noise
Press space to change' break case 5: ctx.setEffectContrast() - note.innerHTML = 'Effect: Contrast' + note.innerHTML = 'Effect: Contrast
Press space to change' break case 6: ctx.removeEffect() - note.innerHTML = 'Effect: None' + note.innerHTML = 'Effect: None
Press space to change' break } } diff --git a/examples/index.html b/examples/index.html index cfb7556..8061d8d 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,42 +1,173 @@ - - - - GSOTS-3D Examples - - - - -
-

🥽 GSOTS-3D — Examples & Samples

- - These are some examples & samples in order to see GSOTS-3D in action and demonstrate features & usage. Some of the - scenes are interactive, so you can move around them. - -

- On desktop, click into the scene and use the mouse to look around, and the WASD or arrow keys to move around.
On - mobile, you can touch the right side of the screen to look around, and the left side to move forward & back. -

- -

- All examples are written as vanilla JavaScript (using the ESM bundle), so you can view the source code and see - what is going on 🙂 -

- - -
- - + + + + + GSOTS-3D Examples + + + + + +
+

🥽 GSOTS-3D — Examples & Samples

+ + These are some examples & samples in order to see GSOTS-3D in action and demonstrate various features and how to use + them. + Some of the scenes are interactive, so you can move around them. + +

+ On desktop, click into the scene and use the mouse to look around, the WASD or arrow keys will move the camera + around.
On + mobile, you can touch the right side of the screen to look around, and the left side to move forward & back. +

+ +

+ All examples are written as vanilla ES6 JavaScript (using the ESM bundle of GSOTS), so you can view the source + code and see + what is going on. Code for all examples is always in a single main.js, and the HTML file uses the + same simple + skeleton. +

+ +
+
+ +

Hello World

+ +

Minimal 10 lines of code GSOTS example, a single sphere

+ +
+
+ +

Demo Scene 1

+ +

Room with various objects for no reason than to showcase library features

+ +
+
+ +

Demo Scene 2

+ +

Showcasing dynamic reflections & normal mapping

+ +
+
+ +

Physics demo

+ +

Using cannon-es for physics

+ +
+
+ +

Dice Physics

+ +

Dice falling onto a table with real time physics

+ +
+
+ +

Particle system

+ +

Showcases some particle system features

+ +
+
+ +

Utah teapots

+ +

Who can resist this classic 3D model

+ +
+
+ +

Full Screen Effects

+ +

Showing full screen post processing effects

+ +
+
+ +

Shadow test

+ +

Simple test scene for debugging shadows

+ +
+
+ +

Planet Earth

+ +

Very simple demo with the earth spinning in space

+ +
+
+ +

Model Builder

+ +

See source for how to use the custom model builder

+ +
+
+ +

Noise TBA

+ +

Coming soon

+ +
+
+ + + +
+ + + \ No newline at end of file diff --git a/readme.md b/readme.md index 4d5384f..c97ba68 100644 --- a/readme.md +++ b/readme.md @@ -25,7 +25,9 @@ Feature Set: ## 🕹️ Demos & Samples -### [Live Demos](https://code.benco.io/gsots3d/examples/) - These work in your browser! +### [Live Demo & Example Gallery](https://code.benco.io/gsots3d/examples/) + +This is a gallery of examples which will run live in the browser. [Try it out!](<(https://code.benco.io/gsots3d/examples/)>) ## 🖼️ Screenshots