-
Notifications
You must be signed in to change notification settings - Fork 125
/
index.html
160 lines (152 loc) · 9.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<title>J3D WebGL Experiments by Bartek Drpzdz</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="home/home.css">
</head>
<body>
<ul>
<li>
<h1>J3D WebGL Experiments</h1>
<h4>This is an archive featuring interactive experiments I created in 2011, at the time when I was learning <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API" rel="nooperner">WebGL</a>, <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" rel="nooperner">shader programming</a> and <a href="https://gamemath.com/" rel="nooperner">3D math</a>.</h4>
<h6>The demos below and the 3d rendering engine code that runs them are inspired by various features of <a href="https://unity.com/" rel="nooperner">Unity</a>. I used Unity since <a href="https://everyday3d.com/flash-vs-unity3d">2009</a> and it was one of my favourite pieces of software at the time.</h6>
<h6>Ten years later, in 2022, I reviewed the demos, fixed a few little things that needed to be updated and added this home page. All the demos work pretty well after all these years, thanks to the stability of <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">web standards</a>. I will revisit them in 2032 and see how it goes :)</h6>
<h6>For more information you can read <a href="https://www.everyday3d.com/j3d-taming-webgl/">this</a> and <a href="https://everyday3d.com/webgl-experiments-2">that</a> blog posts, look at the source code on <a href="https://github.com/drojdjou/J3D">Github</a>. There's also a video from a presentation I made about J3D at <a href="https://www.youtube.com/watch?v=MfTMxJWAsW4">JSLA</a> in May 2012.</h6>
<h6>Meanwhile, click on the thumbnails below and enjoy some old school WebGL!</h6>
<em>Bartek Drozdz</em>
</li>
<li><a href="demo/000_HelloCube.html">
<img src="thumbs/001_hellocube.jpg">
<h3>Hello Cube</h3>
<p>A basic animation featuring a scene with a camera and a cube. Basically, the "Hello world!" of WebGL.</p>
</a></li>
<li><a href="demo/001_Lights.html">
<img src="thumbs/002_lights.jpg">
<h3>Lights</h3>
<p>A demo showcasing how different types of light sources work with different types of materials.</p>
</a></li>
<li><a href="demo/002_Scene.html">
<img src="thumbs/003_scene.jpg">
<h3>Scene</h3>
<p>A simple scene exported from Unity3d and imported into WebGL using a custom JSON format I created. The demo also features detecting mouse pointer collision with 3d objects.</p>
</a></li>
<li><a href="demo/003_Cubemap.html">
<img src="thumbs/004_skybox.jpg">
<h3>Cubemap</h3>
<p>A 6-sided cubemap used to create a skybox and a reflective shader.</p>
</a></li>
<li><a href="demo/003b_Spheremap.html">
<img src="thumbs/004b_spheremap.jpg">
<h3>Spheremap</h3>
<p>Similar to the cubemap demo, but it uses a 2d texture instead of a cubemap to create the reflection effect. A simple image, if it is not an equirectangular panorama, can't generate a good looking skybox so there's no background.</p>
</a></li>
<li><a href="demo/004_Glass.html">
<img src="thumbs/005_glass.jpg">
<h3>Glass</h3></a>
<p>The shader is somewhat siilar to the reflection effect above, but it features a translucent (glass) effect using refraction, reflection, fresnel & chromatic dispersion functions.This demo was featured on <a href="https://experiments.withgoogle.com/glass-shader">Chrome Expriments</a>.</p>
</li>
<li><a href="demo/005_Particles.html">
<img src="thumbs/006_particles.jpg">
<h3>Particles</h3>
<p>Moving though a field composed of 1 million particles.</p>
</a></li>
<li><a href="demo/006_Particle_animation.html">
<img src="thumbs/007_stream.jpg">
<h3>Particle Animation</h3>
<p>A stream of particles moving along a path gives a comet-like visual effect.</p>
</a></li>
<li><a href="demo/007_TileAndOffset.html">
<img src="thumbs/007_tile-offset.jpg">
<h3>Tile and Offset</h3>
<p>Learning how to use shader uniforms to tile & offset a texture on an object.</p>
</a></li>
<li><a href="demo/008_Lightmap.html">
<img src="thumbs/009_lightmap.jpg">
<h3>Lightmap</h3></a>
<p>An entire room, with textured walls, furniture and lightmaps created in Cinema4D and imported from Unity3D into WebGL. Move the mouse cursor to look around, WASD to move, click to turn a flashlight on. This demo was featured on <a href="https://experiments.withgoogle.com/lighmapped-scene">Chrome Expriments</a>.</p>
</li>
<li><a href="demo/009_BasicFilter.html">
<img src="thumbs/010_basicfilter.jpg">
<h3>Basic Filter</h3>
<p>A filter is a shader that runs on top of a rendered scene to apply an additional effect. It is also referred to as a "second pass". In this case the filter adds a pixelation effect that can be customized in realtime.</p>
</a></li>
<li><a href="demo/010_ToonShading.html">
<img src="thumbs/011_toon.jpg">
<h3>Toon Shading</h3>
<p>Using a color band texture to give a 3d object cartoon-ish look. Click to cycle between a few different color versions.</p>
</a></li>
<li><a href="demo/011_Plasma.html">
<img src="thumbs/012_plasma.jpg">
<h3>Plasma</h3></a>
<p>This is an old school <a href="https://en.wikipedia.org/wiki/Plasma_effect">demo scene effect</a>. It uses a color band and a shader alogorithm to generate a "liquid" looking visual effect. Click to cycle between a few different color versions.</p>
</li>
<li><a href="demo/012_ParticleRain.html">
<img src="thumbs/013_rain.jpg">
<h3>Particle Rain</h3>
<p>Another version of a "second pass" filter effect. This time the filter is composed of falling particles creating an effect of a silhouette in heavy rain.</p>
</a></li>
<li><a href="demo/013_Paper.html">
<img src="thumbs/014_paper.jpg">
<h3>Paper</h3></a>
<p>Geometry modifier example. This is a WebGL adaptation of an <a href="https://everyday3d.com/paper-simulation-as3dmod">old Flash experiment</a> I did back in 2008. This demo was featured on <a href="https://experiments.withgoogle.com/paper-simulation">Chrome Expriments</a>.</p>
</li>
<li><a href="demo/014_Head.html">
<img src="thumbs/015_head.jpg">
<h3>3D Head</h3></a>
<p>Using a classic <a href="http://ir-ltd.net/infinite-3d-head-scan-released/">3d head scan</a> I experiment with some shader effect. Click to cycle between several versions.</p>
</li>
<li><a href="demo/015_Persistence.html">
<img src="thumbs/016_persistence.jpg">
<h3>Persistence</h3>
<p>Another type of filter effect featuring slowly fading trace of the moving object.</p>
</a></li>
<li><a href="demo/016_BlurFilter.html">
<img src="thumbs/017_blur.jpg">
<h3>Blur Filter</h3>
<p>Blurring is achieve using a filter as well, but this one need 2 passes - one for blurring along the X axis and another one to blur along Y.</p>
</a></li>
<li><a href="demo/017_SceneManagement.html">
<img src="thumbs/018_sceneman.jpg">
<h3>Benchmark</h3>
<p>How many cubes can be rendered before the framerate drops to 0? Find out in this demo!</p>
</a></li>
<li><a href="demo/018_Sphere.html">
<img src="thumbs/019_sphere.png">
<h3>Planet</h3>
<p>A model of planet earth rendered with a bump map shader to create relief effect. The clouds that are probably too far from the surface, but make for a cool 3d effect. Also uses browser geolocation to put you on the globe (please allow the browser to read your location for that).</p>
</a></li>
<li><a href="demo/019_Terrain.html">
<img src="thumbs/020_terrain.jpg">
<h3>Terrain</h3>
<p>Experimenting with procedural terrain. This is inspired by a terrain engine that was available in Unity.</p>
</a></li>
<li><a href="demo/020_Webcam.html">
<img src="thumbs/023_webrtc.jpg">
<h3>Webcam 'TV-glitch' effect</h3>
<p>A TV-glitch filter applied to a webcam feed. One of my first experiments with webcam in WebGL right after the WebRTC API was introduced in Chrome. Today, all major browser should support it.</p>
</a></li>
<li><a href="demo/021_Webcam_Particles.html">
<img src="thumbs/024_webcamParticles.jpg">
<h3>Webcam 'Matrix' Effect</h3>
<p>Basically same thing as the webcam effect above, but with a different filter. This time it is a Matrix style "green letter rain" effect.</p>
</a></li>
<li><a href="demo/022_Slideshow.html">
<img src="thumbs/025_slideshow.jpg">
<h3>Slideshow</h3>
<p>Applying the glitch effect to move between photos in an image gallery.</p>
</a></li>
<li><a href="demo/023_Water.html">
<img src="thumbs/026_water.jpg">
<h3>Water</h3></a>
<p>Using a <a href="https://en.wikipedia.org/wiki/Perlin_noise">perlin</a> noise generator and bump mapping to create a water effect. Definitely not the best realtime water you will see, but it was my first attempt.</p>
</li>
<li><a href="demo/024_Spacerun.html">
<img src="thumbs/027_spacerun.jpg">
<h3>Spacerun</h3>
<p>The final and most ambitious experiment with J3D, it uses a lot of the things I learned workijng on all the demos above. It is a mini game where you need to control a space ship to avoid asteroids - grey shapes - and capture gems - orange and green shapes.</p>
</a></li>
</ul>
</body>
</html>