Examples from the playground

clouds
https://www.babylonjs-playground.com/#EWME8L#26

Exported Raymarching Blackhole Shader to Playground

https://www.babylonjs-playground.com/#XH185X#21

Original Shader: https://shadertoy.com/view/3slcWr

2 Likes

I added more uniforms to control Ring size, color, Darkness etc. Also modified camera movement to give the feeling of falling in Black hole:

Try live here: https://www.hiteshsahu.com/HeartOfDarkness

Neon City Shader

Original Post: https://shadertoy.com/view/wdfGW4
Edit it here: https://babylonjs-playground.com/#XH185X#19

5 Likes

Infinite CIty Shader

https://www.babylonjs-playground.com/#XH185X#25

OP: Shader - Shadertoy BETA

5 Likes

There were some errors in the console log, I tried to correct them:

https://www.babylonjs-playground.com/#0856JH#26

1 Like

the working version is here StarFighter
and it’s coded to run in a PG :wink:

3 Likes

Found this one that I never finished up but has a lot of good things in it.

Formation Flocking,
Simple Flight AI
Target Tracking/Path Prediction

4 Likes

Doesn’t work on mobile

Haha Nice

1 Like

Ha its one of my scenes again ^_^. Man you find a lot of my stuff.

1 Like

this one was created by me, but i was stuck on the water refraction and failed…
so it’s only a half-done PG, it only has a displacement feature.

the original demo: Earth bathymetry
this is a modifed framework based on THREEJS, I know the principle of how it works so wanted to reproduce it on PG.

4 Likes

Failed Newton Cradle using Ammo JS Physics Engine:

https://www.babylonjs-playground.com/#8WC6ZN#112

image

3 Likes

Beat Saber attempt https://www.babylonjs-playground.com/#PTV7W#24

Same effect using Dynamic Texture and a for loop

https://www.babylonjs-playground.com/#5ZCGRM#359

https://www.babylonjs-playground.com/#B6M2DD#4

PBR Lava

9 Likes

This is truly impressive wow!!! I would like to try to incorporate this in my BabylonJS project. However, whenever I put this in all my other objects disappear. Is there a way to put this animation in the background while I can still see my shapes?

Its post processing so it will add effect on top of whatever is rendered in your scene. And since this shader is not transparent so nothing on your scene is visible.

You can use a Shader Material to render shader in a plane and put that plane behind your scene. It will give a fake background of earth as seen from sky:

Replace that cube with your mesh.

2 Likes

How can I add my own textures?

My first playground entry. Was playing with the JS13K contest so wanted to mess with a simple mechanic, no physics and JSFXR. Just click on the ground and watch the swords fall!

The code is hideous, but it’s just a first pass. It’s a hodge podge of many other playgrounds, which is one of the coolest things about BabylonJS, soooo many great users adding to the knowledge base. I also use two different models (a sword from KayKit - Mini Game Variety Pack by Kay Lousberg). I could probably have just made one model and unhid the damage part but still need to figure that part out.

Watch Out for Swords

3 Likes