JavaScript, ThreeJS, Rapier, WebGL, GLSL, Demoscene Effects & Games, Demos, Examples, Sources
© Paweł Drabowicz
PINBALL DREAMS
2024-01-18
PINBALL DREAMS to przeglądarkowa wersja gry mojego autorstwa
napisana w JavaScript (pierwowzór powstał na komputery Amiga).
Gra umożliwia granie poprzez ekran telefonu oraz klawiaturę komputera.
Jest jeszcze sporo do zrobienia tj. implementacja bonusów, poprawa przesuwu ekranu i dźwięku oraz dodanie obietnic, gdyż zdarzają się przekłamania symulacji.
W skrócie należy obliczyć położenie kuli przed jej narysowaniem.
JavaScript nie zawsze zdąży obliczyć całość przed narysowaniem kolejnej ramki.
Za niedługi czas zaprezentuje finalną wersję stołu Ignition, a następnie zabiorę się za inny temat.
PINBALL DREAMS is the browser port of the game written by me
in JavaScript (released for Amiga computers).
The game allows you to play through the phone screen and computer keyboard.
There is still a lot to do, such as implementing bonuses, improving screen scrolling and sound.
I have to implement JS promises because there are some instances of simulation glitches.
In short, you need to calculate the position of the ball before drawing it.
JavaScript may not always calculate the whole thing before drawing the next frame.
ASTEROIDS
2022-07-22
ASTEROIDS to przeglądarkowa gra mojego autorstwa
napisana w JavaScript (pierwowzór wykonany przez Atari w 1979 roku).
Gra umożliwia wspólne granie dwóch osób na jednej klawiaturze.
Rozgrywka wymagała napisania bezwładności statku, kolizji, efektów cząsteczkowych oraz procedur obrotów i przesunięć wielokątów.
Cieszy mnie, że rozgrywka zachowała grywalność!
Grę można znacznie rozbudować zamieniając symboliczne asteroidy na obracające się sześciany lub inne bryły trójwymiarowe.
Obecna wersja umożliwia grę tylko przy użyciu klawiatury,
w czasie testów napisałem sterowanie statkiem przy użyciu żyroskopu telefonu komórkowego,
jednak sterowanie było na tyle problematyczne, że porzuciłem ten pomysł.
ASTEROIDS online game written by me
in JavaScript (the original written by Atari in 1979).
The game allows two people to play together on one keyboard.
The gameplay involved writing the ship's inertia, collisions, particle effects, and polygon rotation and displacement procedures.
I am glad that the gameplay remains playable!
The game can be significantly expanded by turning symbolic asteroids into rotating cubes or other three-dimensional solids.
The current version allows you to play only using the keyboard, during tests I wrote the ship control using a mobile phone gyroscope,
but the control was so problematic that I abandoned this idea.
OVERDRIVE RACING / MINI KARTS
2024-07-13
MINI KARTS to konwersja gry Mario Karts wykorzystującej tryb Mode 7 z konsoli Super Nintendo.
Mode 7 umożliwia wyświetlanie grafiki trójwymiarowej. Prace nad projektem trwają.
Najtrudniejszym elementem programu jest wyliczenie pozycji obiektów (tzw. spritów) na ekranie.
Obliczenie pozycji bolidów na ekranie wymaga wyliczenia perspektywy, którą najłatwiej oprzeć na trójkącie prostokątnym dla którego łatwo obliczyć wartości DeltaX i DeltaY.
Wstępną pozycję bolidów, obliczamy używając wzorów na rzutowanie perspektywiczne, którego wynik łączymy z DeltaX i DeltaY (wartości perspektywy dla linii pionowych i poziomych).
Procedura wyliczająca nadal nie jest idealna, ale można powiedzieć że działa.
Do wykonania zostaje dodanie fizyki, broni, wymiana grafiki oraz usunięcie problemów z perspektywą.
Jeśli uda wszystko dokończyć, możliwe będzie przepisanie gry na WebGL / GLSL (dla renderowania przez GPU, a nie CPU).
MINI KARTS is a conversion of the Mario Karts game using Mode 7 from the Super Nintendo console.
Mode 7 allows you to display three-dimensional graphics. Work on the project is ongoing.
The most difficult element of the program is calculating the positions of objects (so-called sprites) on the screen.
Calculating the position of the cars on the screen requires calculating the perspective, which is easiest to base on a right triangle for which it is easy to calculate the DeltaX and DeltaY values.
We calculate the initial position of the cars using the perspective projection formulas, the result of which is combined with DeltaX and DeltaY (perspective values for vertical and horizontal lines).
The calculation procedure is still not perfect, but we can say that it works.
What needs to be done is to add physics, weapons, replace graphics and remove perspective problems.
If everything is completed, it will be possible to rewrite the game to WebGL / GLSL (for GPU rendering, not CPU).
WebGL/GLSL - Examples - Ray Marching and Image Processing
2024-02-03 - 2024-10-12
Język GLSL (Graphics Library Shader Language) to składowa OpenGL/WebGL wykorzystywany jest w kopaniu kryptowalut oraz grafiki komputerowej (pozwala programować GPU).
Prezentowany efekcik opiera się na przetwarzaniu obrazu w oparciu o Shader Fragmentów (kolorów pikseli). Shader to program wykonywany na GPU.
Najtrudniejszym do napisania było wczytanie tekstur i przesłanie ich do Fragment Shader`a.
Nie udało mi się wykorzystać tablicy LUT (look up table) do zapisu pre-kalkulacji, ale w tym przykladzie nie było to konieczne.
GPU w przeciwieństwie do CPU może posiadać nie kilka, a kilkadziesiąt tysięcy rdzeni działających rownolegle co czyni go często najszybszym elementem komputera.
GLSL (Graphics Library Shader Language) is a component of OpenGL/WebGL and is used in cryptocurrency mining and computer graphics (it allows GPU programming).
The presented effect is based on image processing based on Shader Fragments (pixel colors). A shader is a program executed on the GPU.
The hardest thing to write was loading the textures and sending them to the fragment shader.
I was unable to use the LUT (look up table) to save pre-calculations, but in this example it was not necessary.
The GPU, unlike the CPU, may have not a few, but tens of thousands of cores operating in parallel, which often makes it the fastest element of the computer.
WebGL/ThreeJS - Example 2 - Import FBX
2023-05-20
Kolejna scenka wykonana przy użyciu biblioteki ThreeJS wykorzystującej WebGL i Javascript.
Zawarte w przykładzie obiekty są w formacie FBX.
Użyj myszy lub ekranu, aby rozejrzeć się dookoła!
Another scene made using the ThreeJS library using WebGL and Javascript.
The objects in the example are in FBX format.
Use your mouse or screen to look around!
WebGL/ThreeJS - Example 1 - Import FBX
2023-04-20
Pierwsza scenka wykonana przy użyciu biblioteki ThreeJS wykorzystującej WebGL i JavaScript.
Zawarte w przykładzie obiekty są w formacie FBX.
The first scene created using the ThreeJS library using WebGL and Javascript.
The objects included in the example are in FBX format.
WebGL/ThreeJS + ammo.js + anaglyph 3d - Example 4 - Physics
2023-09-23
Użycie ThreeJS oraz AmmoJS do generowania obrazu 3D dla okularów anaglifowych (okulary ze szkiełkiem zielonym i czerwonym).
Obraz generowany jest poprzez złożenie obrazów z dwóch kamer odsuniętych od siebie, aby otrzymać obraz z dwóch punktów.
Efekt najlepiej oglądać na dużym ekranie.
Using ThreeJS and AmmoJS to generate a 3D image for anaglyph glasses (glasses with green and red glass).
The image is generated by combining images from two cameras moved apart to obtain an image from two points.
The effect is best viewed on a big screen.
WebGL/ThreeJS + ammo.js - Example 3 - Physics
2023-07-22
Pierwszy przykład użycia ThreeJS oraz biblioteki ammo.js służącej do symulowania oddziaływań fizycznych między obiektami 3D.
Największym problemem jest mała liczba przykładów i literatury. Kolejnym krokiem będzie dodanie fizyki do obiektów wykonanych w programach 3D, np. LightWave 3D.
W skrócie, najpierw deklarujemy zmienne jak zmienne transformacji, kamery, sceny, mesh`y, RigIdBody. Następnie inicjujemy Ammo, po czym deklarujemy scenę, oświetlenie,
renderowanie, sterowanie. Tworzymy obiekt, pobieramy jego geometrię i na tej podstawie tworzymy Shade (kształt obiektu). Następnie podajemy pozycję i masę obiektu,
dodajemy bezwładność, generujemy Body (ciało) sztywnego obiektu. Należy pamiętać, że obiekt na którego oddziaływują inne obiekty (kolizje),
musi mieć sztywne ciało RigIdBody dodane do tablicy obiektów, a część widoczna obiektu musi być dodana do sceny. Użycie ammo.js daje sporo satysfakcji,
ale nie na tyle proste jakby się chciało.
The first example of using ThreeJS and the ammo.js library for simulating physical interactions between 3D objects.
The biggest problem is the small number of examples and literature. The next step will be to add physics to objects made in 3D programs, e.g. LightWave 3D.
In short, we first declare variables like transform variables, cameras, scenes, meshes, RigIdBody. Then we initialize Ammo, after which we declare the scene,
lighting, rendering, controls. We create an object, we get its geometry and on this basis we create a Shade (the shape of the object).
Then we enter the position and mass of the object, add the inertia, and generate the Body of a rigid object.
Please note that an object affected by other objects (collisions) must have a RigIdBody added to the object array,
and the visible part of the object must be added to the scene. Using ammo.js gives a lot of satisfaction, but not as easy as you would like.
BUMP MAPPING 2D / MAPA WYPUKŁOŚCI
2023-04-28
BUMP MAPPING 2D (mapowanie wypukłości) to proces pozwalający nadać wypukłości płaskiej teksturze.
Efekt mapowania wypukłości polega na utworzeniu mapy wysokości (HIGH MAP), mapy oświetlenia (LIGHT MAP), mapy współczynników odbicia światła (SPECULAR MAP).
Mapę określającą odbicia światła liczymy dla każdego piksela (n), odejmując jasność następnego piksela (n+1) od jasności piksela poprzedniego (n-1).
Wyliczone dla każdego piksela różnice jasności pozwolą utworzyć mapę wypukłości (BUMP MAP).
Obliczanie różnicy jasności wykonujemy dla osi X oraz Y, zaczynając od drugiego piksela (n), aby umożliwić pobranie jasności z piksela (n-1) i kończąc w przedostatnim pikselu (n[max]-1).
Nierozłącznym elementem przy mapowaniu wypukłości jest ruchome źródło światła, ukazuje ono załamywanie się światła na wyliczonych wypukłościach.
BUMP MAPPING 2D is a process to give bumps a flat texture.
The effect of bump mapping consists in creating a height map (HIGH MAP), a lighting map (LIGHT MAP), a map of light reflection coefficients (SPECULAR MAP).
We calculate the reflection map for each pixel (n) by subtracting the brightness of the next pixel (n+1) from the brightness of the previous pixel (n-1).
The brightness differences calculated for each pixel will allow you to create a BUMP MAP.
Calculation of the brightness difference is performed for the X and Y axes, starting from the second pixel (n) to allow the brightness to be retrieved from the pixel (n-1) and ending at the penultimate pixel (n[max]-1).
An inseparable element in bump mapping is a moving light source, it shows the refraction of light on the calculated bumps.
PLASMA
2023-11-25
Tym razem mniej ambitnie... napisałem prosty efekt o potocznej nazwie Plazma.
Prezentowany obraz powstaje poprzez nakładanie wykresów funkcji
np. sinus zniekształconych poprzez dodawanie wartości czasu i numerów pikseli.
Less ambitious this time... I wrote a simple effect commonly called Plasma.
The presented image is created by superimposing function graphs,
e.g. sine, distorted by adding time values and pixel numbers..
TWISTER
2022-10-14
TWISTER to klasyczny efekt często spotykany w produkcjach demoscenowych.
Twister powstaje poprzez rysowanie pięciu ścian (w tym przypadku), ściana jest rysowana dopóki współrzędna x prawej krawędzi jest większa od współrzędnej x lewej krawędzi.
Skręcenie ścian powstaje przy pomocy funkcji sinus i cosinus, które nakładając się na siebie powodują deformację położenia na osi x.
Efekt cieniowania powstaje poprzez wyliczenie szerokości ściany co pozwala określić kolor aktualnie rysowanej linii.
Rozwinięciem efektu jest dodanie płynnie przesuwającego się tekstu przylegającego do płaszczyzny wybranej ściany.
TWISTER is a classic effect often found in demoscene productions.
Twister is created by drawing five faces (in this case), the face is drawn until the x-coordinate of the right edge is greater than the x-coordinate of the left edge.
The twisting of the walls is created by means of the sine and cosine functions, which overlap each other cause deformation of the position on the x axis.
The shading effect is created by calculating the width of the wall, which allows to determine the color of the currently drawn line.
The extension of the effect is adding smoothly moving text adjacent to the plane of the selected wall.
CIRCLE SCROLL
2023-01-30
Witam, tym razem przedstawiam efekt CIRCLE SCROLL, czyli przesuwanie tekstu po okręgu.
Aby uzyskać efekt, użyłem funkcji save, translate, rotate, drawimage i restore.
Przykład jest czytelny, ale niezbyt szybki. Kąty są wstępnie obliczone.
Hello, this time I present CIRCLE SCROLL effect, i.e. moving the text around a circle.
To get the effect i used save, translate, rotate, drawImage and restore functions.
The example is readable but not very fast. Angles are pre-calculated.
SINE SCROLL / TEXT SCROLL
2022-05-31
SINUS SCROLL to klasyczny efekt stosowany na demoscenie przy przesuwaniu tekstu.
Znośną prędkość programu uzyskałem dzięki funkcji context.drawImage (rysowanie liter) oraz context.setTransform (odbicie lustrzane).
Czcionka wczytywana jest z pliku fonts.gif,
falowanie tekstu powstaje przez zmianę położenia plastrów liter.
Wywołanie rysowania kolejnej klatki (ramki) odbywa się za pomocą funkcji window.requestAnimationFrame(draw).
SINE SCROLL is a classic effect used on demoscene for text scrolling.
I got the program's acceptable speed thanks to the functions context.drawImage (drawing letters) and context.setTransform (mirroring).
The font is loaded from the fonts.gif file, text waving is created by changing the position of the letter slices.
The next frame (frame) is drawn using the window.requestAnimationFrame (draw) function.
3D CUBE OUTLINE
2022-05-13
3D Cube, Javascript, Canvas2D.
CLICK TO VIEWSNOW
2023-12-06
Padający śnieg powstał z potrzeby chwili. Efekcik napisany w formie łatwego do instalacji plug-in`u. Potrzebujesz śniegu na swojej stronie, możesz użyć tego.
The falling snow was created out of need of the moment. The effect is written in the form of an easy-to-install plug-in. Need snow on your site, you can use this.
FIREWORKS
2023-01-01
Fireworks, Javascript, Canvas2D.
CLICK TO VIEWROTO ZOOM
2022-09-08
Image rotation, Javascript, Canvas2D, Classic demoscene effect.
CLICK TO VIEW