JavaScript Demoscene Effects & Games, Demos, Examples, Sources © Paweł Drabowicz
2137
visits since 2022-04
THREE.JS / AMMO.JS / WEBGL
2023-09-23
PRZYKŁAD / EXAMPLE 6 (2023-10-02)
Three.JS + Rapier + Meta VR Quest 2PRZYKŁAD / EXAMPLE 5 (2023-09-23)
Three.JS + Meta VR Quest 2PRZYKŁAD / EXAMPLE 4 (2023-09-16)
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.
PRZYKŁAD / EXAMPLE 3 (2023-07-22)
Pierwszy przykład użycia Three.JS 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 Three.JS 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.
PRZYKŁAD / EXAMPLE 1 + 2 (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!
CLICK TO VIEW - EXAMPLE 6 (RAIER + VR)
CLICK TO VIEW - EXAMPLE 4 (AMMO.JS + ANAGLYPH)
CLICK TO VIEW - EXAMPLE 3 (AMMO.JS)
CLICK TO VIEW - EXAMPLE 2 (THREE.JS)
CLICK TO VIEW - EXAMPLE 1 (THREE.JS)
PINBALL DREAMS 0.6 (ONLINE GAME)
2022-10-07
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.
CLICK TO VIEW
ASTEROIDS (ONLINE GAME)
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.
CLICK TO VIEW
3D CUBE TEXTURE SHADER (WebGL)
2023-03-26
Ostatnio modne jest prezentowanie produktów przy użyciu grafiki 3D, z tej okazji przedstawiam prosty przykład użycia WebGL, który pozwala na użycie akceleracji sprzętowej. WebGL (Web Graphics Library) to biblioteka wbudowana w nowoczesne przeglądarki www będąca analogiem do DierctX i OpenGL'a.
WebGL nie jest cudownym sposobem na wejście w świat grafiki 3D, jest to biblioteka służąca głównie do rasteryzacji wielokątów (zapełnienie pikselami wielokątów), jest ciężka w użyciu, kto jest ciekawy niech spojrzy do źródła.
Użycie biblioteki polega w głównej części na użyciu Vertex shadera (określanie parametrów wierzchołków) i Fragment shadera (sposób wyświetlania pikseli). Vertex shader i Fragment shader musi posiadać swój podprogram napisany w języku C, który musimy przesłać do karty graficznej.
Jak zawsze nie użyłem żadnych zewnętrznych bibliotek. Przykład przedstawia teksturowany sześcian z użytym cieniowaniem Phonga. Wektory normalne `normalki` podane są na sztywno (wektory normalne są prostopadłe do powierzchni wielokątów, służą do określenia padania światła na wielokąt).
Kolejny przykład z WebGL będzie wykorzystywał bibliotekę ThreeJS. Pisanie w czystym WebGL jest żmudne, więc trzeba napisać bibliotekę pomocniczą albo skorzystać z standardowej, rozwijanej od lat.
Recently it has become fashionable to present products using 3D graphics, and on this occasion I present a simple example of the use of WebGL, which allows the use of hardware acceleration.
WebGL (Web Graphics Library) is a library built into modern web browsers that is an analogue to DierctX and OpenGL. WebGL is not a miraculous way to enter the world of 3D graphics, it is a library mainly for rasterising polygons (filling polygons with pixels), it is hard to use, whoever is curious should take a look at the source.
The use of the library is mainly based on the use of a Vertex shader (specifying vertex parameters) and a Fragment shader (how the pixels are displayed). The Vertex shader and Fragment shader must have their own subroutine written in C, which we need to send to the graphics card.
As always, I have not used any external libraries. The example shows a textured cube with Phong shading used. The normal vectors are given rigidly. The next example will be using the ThreeJS library, using WebGL as I wrote is difficult so you either have to write your own library or use the standard one that has been developed for years.
CLICK TO VIEW (Phong)
CLICK TO VIEW (Color)
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.
CLICK TO VIEW (GREY)
CLICK TO VIEW (COLOR)
2D SPHERE (LENS) + OFFSET TUNNEL
2023-03-11
KULA 2D (SOCZEWKA) imitująca obiekt trójwymiarowy, to przydatny efekt, gdy chcemy uniknąć użycia grafiki 3d i wszystkiego co się z nią wiąże (sporo obliczeń, teksturowanie).
Efekt soczewki polega na wyliczeniu tablicy w oparciu o mnożenie i pierwiastkowanie, na podstawie której przekształcamy teksturę.
Złudzenie obrotu wykonujemy poprzez zmianę offsetu, podobnie jak w tunelu z tła. Zmiana rozmiaru obiektu wymaga przeliczenia tablicy przekształceń.
Rasteryzacja kuli polega na rysowaniu kolejnych pikseli linii skanującej (poziomej), gdy odległość danego piksela od środka koła jest większa od promienia koła to piksel nie należy do obiektu.
W tym przypadku koło imitujące kulę jest pokryte przekształconą teksturą. Gdy na kule narzucimy tło, uzyskamy zagięcie obrazu analogiczne jak w szklanej kuli.
2D SPHERE (LENS) imitating a three-dimensional object is a useful effect when we want to avoid the use of 3D graphics and everything related to it (a lot of calculations, texturing).
The lens effect is to compute an array based on multiplication and square root, which we use to transform the texture.
The illusion of rotation is made by changing the offset, similarly to the background tunnel. Resizing an object requires a transformation table recalculation.
Sphere rasterization consists in drawing successive pixels of the scanning line (horizontal), when the distance of a given pixel from the center of the circle is greater than the radius of the circle, then the pixel does not belong to the object.
In this case, the circle imitating a sphere is covered with a transformed texture. When we impose a background on the spheres, we obtain a bending of the image analogous to that in a glass sphere.
CLICK TO VIEW
TUNEL NA OFFSETACH / TUNNEL OFFSET VORTEX
2023-08-11
PRZYKŁAD / EXAMPLE 3 (2023-09-16)
TUNNEL + OBRACAJĄCA SIĘ KAMERA - Długo myślałam jak zrobić tunel z możliwością obrotu kamery. W końcu się udało. Zasada jest inna niż w w prostszej wersji tunelu, tutaj trzeba zwektoryzować tunel, nie wystarczy użyć arcusa tangensa drugiego i Pi. Całość chodzi marnie i w lowres’ie, ale naświetli temat, bo jest o tym mało informacji. Lot w głąb zrobiłem dla uproszczenia przez zmianę offsetu, bo nie miałem już sił i zapału żeby kombinować z ruchem i obrotem kamery.TUNNEL + CAMERA ROTATION - I thought for a long time how to make a tunnel with the possibility of rotating the camera. Finally succeeded. The principle is different than in the simpler version of the tunnel, here you need to vectorize the tunnel, it is not enough to use the arctangent of the second and Pi. The whole thing is poor and low-res, but it will shed light on the topic because there is little information about it. I flew into the depths to simplify things by changing the offset, because I no longer had the strength and enthusiasm to mess with the camera's movement and rotation.
PRZYKŁAD / EXAMPLE 2 (2022-08-15)
TUNEL NA OFFSETACH (VORTEX) to kolejny efekt jaki chciałem napisać od dawna. Efekt tunelu uzyskujemy dzięki zwinięciu tekstury przy użyciu funkcji arcus tangens oraz pierwiastka kwadratowego. Wrażenie lotu w tunelu powstaje poprzez przesuwanie tekstury o określony offset. Najtrudniejsze w implementacji było uzyskanie akceptowalnej ilości klatek na sekundę. Niezbędną prędkość działania otrzymałem poprzez tablicowanie wyliczonych pikseli oraz przezroczystości dla cieniowania głębi tunelu. ZAPAMIĘTAJ!! Co bardzo ważne, nie należy rysować pikseli, a zmieniać kolory istniejących! Jak zawsze dla ciekawskich komentarze w źródle strony.TUNNEL OFFSET (VORTEX) is another effect that I have wanted to write for a long time. The tunnel effect is achieved by folding the texture using the arctangent and square root functions. The impression of flight in a tunnel is created by shifting the texture by a certain offset. The most difficult thing to implement was getting an acceptable number of frames per second. I obtained the necessary speed of operation by arraying the calculated pixels and transparency for shading the depth of the tunnel. REMEMBER!! What is very important, do not draw pixels, but change the colors of existing ones! As always for curious comments in the source of the page.
CLICK TO VIEW (ALPHA)
CLICK TO VIEW (CAMERA)
CLICK TO VIEW (NORMAL)
SNES MODE 7 / INFINITY PLANE
2023-08-19 - 2023-02-05
INFINITY PLANE.. w końcu się udało.. Najwięcej trudności sprawiły mi obroty.
To wczesna wersja więc program ma swoje ułomności, jego zaletą jest, że działa.. :)
Jakby dodać mapę wysokości wyszedłby Voxel Space Engine.
W niektórych miejscach zamiast mnożenia użyłem przesunięć bitów.
Strzałkami prawo i lewo można zmieniać kierunek lotu.
INFINITY PLANE.. I finally made it.. The rotations were the most difficult for me.
It's an early version so the program has its shortcomings, but it works.. :)
Adding a height map would result in Voxel Space Engine.
In some places, instead of multiplication, I used bitshifts.
Use the right and left arrows to change the direction of flight.
CLICK TO VIEW (GAME)
CLICK TO VIEW (SPHERE)
CLICK TO VIEW (MARS)
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.
CLICK TO VIEW (TWISTER)
CLICK TO VIEW (TWISTER + SINE SCROLL)
METABLOBS
2022-08-06
METABLOBS to ciekawy efekt ilustrujący oddziaływanie na siebie obiektów cząsteczkowych.
Do uzyskania efektu należy policzyć odległości każdego piksela od odległości wszystkich metaball`i.
Kolejnym krokierm jest wyliczenia pierwiastka kwadratowego otrzymanych odległości.
Wynik pierwiastkowania mnożymy przez wszystkie kolejne wyniki pierwiastkowania.
Iloczyn odległości posłuży do wyliczenia koloru pikseli łączenia się elementów.
Ustawienie wsztystkich parametrów jest dość skomplikowane.
METABLOBS is an interesting effect that illustrates the interaction of molecular objects.
To obtain the effect, the distance of each pixel from the distance of all metablobs should be counted.
The next step is to calculate the square root of the obtained distances.
Multiply the square root result by all successive square root results.
The product of the distance will be used to calculate the pixel color of the joining elements.
Setting all parameters is quite complicated.
CLICK TO VIEW
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.
CLICK TO VIEW
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.
CLICK TO VIEW - SCROLL SINE #3
CLICK TO VIEW - SCROLL SINE #2
CLICK TO VIEW - SCROLL TEXT #1
3D TORUS TEXTURE FLAT SHADER
2022-10-25
TEKSTUROWANY I CIENIOWANY TORUS 3D to kolejny przykład wykorzystania języka JavaScript do wyświetlania grafiki trójwymiarowej.
Torus to bryła obrotowa, powstająca przez obrót koła wokół osi Y (w tym przypadku). Największym problemem było teksturowanie, a konkretnie
mapowanie UV. To co sądziłem, że zajmie mi chwilę, zajęło 4 razy więcej czasu. Myliły się proporcje, zmienne U i V. Dla przypomnienia, zmienna U
to inaczej X, a V to inaczej Y ale w stosunku do tekstury, a nie obiektu 3d.
TEXTURED AND SHADED TORUS 3D is another example of using JavaScript to display three-dimensional graphics.
A torus is a solid of revolution, created by rotating a circle around the Y axis (in this case). The biggest problem was texturing,
specifically UV mapping. What I thought would take me a while took 4 times more time. The proportions, the U and V variables were wrong.
As a reminder, the U variable is analog of X, and V analog of Y, but in relation to the texture, not to 3d object.
CLICK TO VIEW (TEXTURE)
CLICK TO VIEW (SHADER)
CLICK TO VIEW (DYNAMIC)
CLICK TO VIEW (ENGINE)
3D CUBE TEXTURE SHADER
2022-08-15
TEKSTUROWANY I CIENIOWANY SZEŚCIAN 3D czyli kolejny przykład wykorzystania JavaScript do wyświetlania grafiki trójwymiarowej z wykorzystaniem teksturowania i cieniowania.
Program nie używa zewnętrznych bibliotek (np. three.js), wykorzystuje podstawowy tryb graficzny Canvas2D, który w przeciwieństwie do WebGL nie pozwala na użycie akceleracji sprzętowej.
Najtrudniejsza w realizacji była funkcja teksturowania co wymagało przypomnienia działań na macierzach.
Teksturowanie to inaczej transformacja tekstury (kwadratu) w czworobok o różnych kątach nachylenia ramion.
Wyliczona macierz transformacji, pozwala na transformację prostokąta w romb, co wymusza rysowanie dwóch rombów, pierwszy dopasowany jest do lewego, drugi do prawego boku teksturowanej ściany.
Kolejny krok to przycięcie każdego z nich poprzez podział ściany na dwa trójkąty. Podział czworokąta na dwa trójkąty pozwala uzyskać akceptowalny efekt teksturowania.
3D CUBE TEXTURE SHADER is an example of using JavaScript to display three-dimensional graphics with the use of texturing and shading.
The program does not use external libraries (e.g. three.js), it uses the basic graphic mode of Canvas2D, which, unlike WebGL, does not allow the use of hardware acceleration.
The most difficult to implement was the texture mapping function, which required reminding of the matrix operations.
Texturing is the transformation of a texture (square) into a quadrilateral with different angles of inclination of the arms.
Computed transformation matrix, allows you to transform a rectangle into a diamond, which forces you to draw two diamonds, the first one fits the left side,
the second one fits the right side of the textured wall. The next step is to trim each of them by dividing the wall into two triangles.
Dividing a quadrilateral into two triangles allows you to obtain an acceptable texturing effect.
CLICK TO VIEW
3D CUBE POLYGON SHADER
2022-05-13
SZEŚCIAN 3D napisany w JavaScript przy użyciu Canvas2D.
Przykład rzutowania perspektywicznego, obrotów, przesunięć, sortowania i cieniowania wielokątów.
Dla ciekawskich komentarze w źródle strony.
Cieniowanie wielokątów wykonałem w oparciu o odległość wierzchołków Z od obserwatora,
którą poprzednio wyliczyłem do sortowania ścian, tj. ściany najbliżej obserwatora rysujemy na końcu
(odległość wielokąta od obserwatora to średnia wartość współrzędnych Z).
CUBE 3D written in JavaScript using Canvas 2D.
Example of perspective projection, rotation, shifting, sorting and shading of polygons.
For curious comments in the source of the page.
I made the shading of the polygons based on the distance of the Z vertices from the observer,
which I previously calculated for sorting the walls, i.e. the walls closest to the observer are drawn at the end
(the distance of the polygon from the observer is the average value of the Z coordinates).
CLICK TO VIEW
3D CUBE POLYGON
2022-05-13
3D Cube, Javascript, Canvas2D.
CLICK TO VIEW
3D CUBE OUTLINE
2022-05-13
3D Cube, Javascript, Canvas2D.
CLICK TO VIEW
FIREWORKS
2023-01-01
Fireworks, Javascript, Canvas2D.
CLICK TO VIEW
ROTO ZOOM
2022-09-08
Image rotation, Javascript, Canvas2D, Classic demoscene effect.
CLICK TO VIEW