-
%22%20transform%3D%22translate(4.2%204.2)%20scale(8.30469)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23020404%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(2.5265%20127.50032%20-36.21068%20.71754%2024%2090)%22%2F%3E%3Cellipse%20fill%3D%22%237c7e7e%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(54.64017%20.89204%20-.55554%2034.02855%20218.8%2082.3)%22%2F%3E%3Cpath%20fill%3D%22%23951843%22%20d%3D%22M211.8%201l35-31.5L284.1%2011l-35%2031.4z%22%2F%3E%3Cellipse%20fill%3D%22%237c7e7e%22%20cx%3D%2292%22%20rx%3D%2218%22%20ry%3D%2222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
AI supercharged water simulations
As the story is about water, I wanted to use some AI accelerated realtime fluid simulations.
-
%22%20transform%3D%22matrix(7.5%200%200%207.5%203.8%203.8)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23ffffe7%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(73.66063%20-5.9266%2019.70852%20244.95383%20238.6%2019.7)%22%2F%3E%3Cellipse%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-56.75033%204.04122%20-9.15944%20-128.6247%2041.4%2085.2)%22%2F%3E%3Cellipse%20fill%3D%22%23feffb7%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-19.11958%20-254.2822%2031.72915%20-2.38573%20240.2%2067.2)%22%2F%3E%3Cellipse%20fill%3D%22%239b9ba8%22%20cx%3D%22169%22%20cy%3D%22138%22%20rx%3D%2226%22%20ry%3D%22254%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Weekly update #22
Spring is here and so is the yard work. So this week has been slow for the project. Here is a quick overview of what is going on.
-

AI generated, animated logo
Naturally the project also needed an AI generated animated logo! I used Midjourney to create the logo and After Effects to add in the text and handle the animation.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23b3747d%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(76.5%20312%20767.8)%20scale(895.16941%20411.54715)%22%2F%3E%3Cellipse%20fill%3D%22%23000c07%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-309.32378%20111.42576%20-600.40083%20-1666.7443%20249.2%20834.3)%22%2F%3E%3Cellipse%20fill%3D%22%23d17f76%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(148.7%20400.1%20225)%20scale(192.74208%20388.32413)%22%2F%3E%3Cellipse%20fill%3D%22%2346605c%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-412.26038%20-293.87012%20158.14204%20-221.85208%20735.6%20738.8)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
AI powered fluid simulations
I took an upcoming AI powered fluid simulation tool for a test dive to see if it would allow me to add realistic, interactive smoke to the game.
-
%22%20transform%3D%22translate(4.1%204.1)%20scale(8.27344)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23b4b4b4%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(26.73448%2021.65338%20-51.49004%2063.5725%2094%2010)%22%2F%3E%3Cellipse%20fill%3D%22%23282828%22%20cx%3D%22162%22%20cy%3D%22102%22%20rx%3D%2272%22%20ry%3D%2266%22%2F%3E%3Cellipse%20fill%3D%22%23262626%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-17%20161.7%20-772)%20scale(63.94423%2028.83786)%22%2F%3E%3Cellipse%20fill%3D%22%231d1d1d%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-34.48342%20143.32143%20-22.01947%20-5.29793%209.1%209.4)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Maglev train – an animated location
For the in-game overworld map I decided to create a maglev station. This would be a nice and simple location to create some nice animations in!
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%2392273c%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-651.32862%20-161.18754%2048.51848%20-196.0541%201355.5%20460.4)%22%2F%3E%3Cellipse%20fill%3D%22%23001c14%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-291.19157%2079.115%20-201.34028%20-741.05535%2094.2%20466)%22%2F%3E%3Cellipse%20fill%3D%22%23395850%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(65.7%2039.7%20550.3)%20scale(561.16189%20189.51526)%22%2F%3E%3Cellipse%20fill%3D%22%235b0018%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(5.3711%20171.03907%20-422.89822%2013.2802%201420.3%20110)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Advanced animated neon lights material
This week, I decided to continue along the lines of the flickering screens. But this time I would tackle complex neon sign / light animations.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23b06b3a%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-330.22002%2063.32086%20-146.98483%20-766.52991%201015.5%20764.6)%22%2F%3E%3Cellipse%20fill%3D%22%23000003%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-181.66666%20-2076.45942%20408.05028%20-35.69977%201897.2%20457.3)%22%2F%3E%3Cellipse%20fill%3D%22%23061119%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-111.60801%201769.27183%20-289.1108%20-18.2375%20157.5%20750.8)%22%2F%3E%3Cellipse%20fill%3D%22%23486159%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(167.94477%2094.97372%20-346.75452%20613.17606%20824.5%204.2)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
From image to probes
Maybe instead of matching the ambient lighting and adding multiple spotlights, there was a way to turn the actual AI generated image into lighting probe data. That would make the realtime 3D meshes match the environments absolutely perfectly!
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23d8efb0%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(925.18081%20-392.5199%20233.78142%20551.0296%201983%204.3)%22%2F%3E%3Cellipse%20fill%3D%22%23182a36%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(241.5707%20371.34004%20-483.2963%20314.40247%20342%20353.5)%22%2F%3E%3Cellipse%20fill%3D%22%23112300%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-95.8%201495.7%20-350.6)%20scale(225.41939%20851.67613)%22%2F%3E%3Cellipse%20fill%3D%22%23c36932%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-1286.2275%20311.17118%20-66.45843%20-274.70624%20730%20991.5)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Depth of field
I got a comment at work about the characters not matching perfectly with the slightly blurry backgrounds. I thought if some depth of field was at all possible as the backgrounds are not really 3D and might have some blur baked in.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23dbeba8%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-31.1%20621.2%20-1131.7)%20scale(532.54849%20637.72773)%22%2F%3E%3Cpath%20fill%3D%22%23000208%22%20fill-opacity%3D%22.5%22%20d%3D%22M-58.4%20789.1l1212.5%20394-165.9%20510.5-1212.5-394z%22%2F%3E%3Cellipse%20fill%3D%22%2332271d%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(377.58863%20-245.11598%20631.1717%20972.28772%202391.9%20905.3)%22%2F%3E%3Cellipse%20fill%3D%22%23b66323%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(61.04865%20-254.28593%201299.58578%20312.00294%201742.2%201069.4)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Very experimental grass system
For scenes that have fluffy grass, I felt that the grass could be extra fluffy. Some sort of “fur” setup. It was not that easy.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23001302%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(505.10499%20110.78311%20-311.75527%201421.4183%20297.5%20646.8)%22%2F%3E%3Cellipse%20fill%3D%22%2374baa3%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-290.41442%20517.51242%20-348.18047%20-195.38977%201411%20724.6)%22%2F%3E%3Cpath%20fill%3D%22%2382606c%22%20fill-opacity%3D%22.5%22%20d%3D%22M2120.5%201006L958.7-146.5%202564.4%2014.2z%22%2F%3E%3Cellipse%20fill%3D%22%23127b5a%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(98.56037%20-1210.463%20240.9223%2019.61678%20817.2%20455.2)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
AI Assisted Gamedev: Adding reflections
With the pipeline I currently had set up, it is easy to add 3D characters on top of 2D images with shadows and interactive lighting. But what about reflective surfaces? Let’s go!
















