Skip to content

Commit

Permalink
docs: update README and screenshots
Browse files Browse the repository at this point in the history
  • Loading branch information
jsulpis committed Nov 27, 2023
1 parent 1141361 commit cfa2776
Show file tree
Hide file tree
Showing 14 changed files with 16 additions and 11 deletions.
25 changes: 15 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
## Procedural

<div align="center">
<img src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/procedural-ui.jpg" alt="screenshot of the procedural shader" />
<img src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/procedural-ui.jpg" alt="screenshot of the procedural shader with the UI" />

<br/>
<br/>
Expand All @@ -13,9 +13,9 @@

<br/>

This is a GLSL fragment shader I originally made on [Shadertoy](https://www.shadertoy.com/view/Ds3XRl) when learning raymarching. Later I switched to analytic raycasting for better performance. It's made by raycasting simple spheres with a bunch of fbm noises used for the normals and colors, and a complete hack for the atmosphere.
This is a GLSL fragment shader I originally made on [Shadertoy](https://www.shadertoy.com/view/Ds3XRl) when learning raymarching. Later I switched to analytic raycasting for better performance. It's made by raycasting simple spheres with a bunch of fbm noises used for the normals and colors, and a fake atmosphere computed with distance functions.

I wanted to display it on a web page so that I can make a nice GUI to tweak some uniforms. Here it is !
I wanted to display it on a web page so that I can make a nice GUI to tweak the uniforms. Here it is !

It runs at 60fps on my old low-end phone, so it should also be quite smooth on whatever device you have.

Expand All @@ -24,7 +24,7 @@ It runs at 60fps on my old low-end phone, so it should also be quite smooth on w
## Textures

<div align="center">
<img src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/earth-ui.jpg" alt="screenshot of the earth shader" />
<img src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/earth-ui.jpg" alt="screenshot of the earth shader with the UI" />

<br/>
<br/>
Expand All @@ -34,17 +34,22 @@ It runs at 60fps on my old low-end phone, so it should also be quite smooth on w

<br/>

This one uses textures (colors, specular, bump) borrowed and adapted from NASA [Visible Earth](https://visibleearth.nasa.gov/collection/1484/blue-marble) collection in order to render a realistic view of our home planet. Still with a few controls, and no quality setting because it should already run at full fps on most devices.
After the procedural version, I found a bunch of textures to display a realistic view of some planets of our solar system. Still with a few controls, and no quality setting because it should already run at full fps on most devices.

## Note

If you want a minimalist setup to render GLSL shaders on a canvas like this one, you can check out the [little study](https://github.com/jsulpis/webgl-libs-comparison) I made before this project.

## More samples
## More renders

<div>
<img height="200" alt="screenshot with different settings" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/earth-1.jpg">
<img height="200" alt="screenshot with different settings" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/procedural-1.jpg">
<img height="200" alt="screenshot with different settings" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/procedural-2.jpg">
<img height="200" alt="screenshot with different settings" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/procedural-3.jpg">
<img height="200" alt="a render of the Earth" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/earth.jpg">
<img height="200" alt="a render of the Moon" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/moon.jpg">
<img height="200" alt="a render of Mercury" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/mercury.jpg">
<img height="200" alt="a render of Venus" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/venus.jpg">
<img height="200" alt="a render of Mars" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/mars.jpg">
<img height="200" alt="a render of Jupiter" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/jupiter.jpg">
<img height="200" alt="a render of the procedural planet" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/procedural-1.jpg">
<img height="200" alt="a render of the procedural planet" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/procedural-2.jpg">
<img height="200" alt="a render of the procedural planet" src="https://raw.githubusercontent.com/jsulpis/realtime-planet-shader/main/screenshots/procedural-3.jpg">
</div>
Binary file removed screenshots/earth-1.jpg
Binary file not shown.
Binary file modified screenshots/earth-ui.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/earth.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/jupiter.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/mars.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/mercury.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/moon.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/procedural-1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/procedural-2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/procedural-3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/procedural-ui.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/venus.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/pages/mars.astro
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import Layout from "../layouts/Layout.astro";
uniforms: {
...defaultUniforms,
uAtmosphereColor: [0.9, 0.15, 0],
uAtmosphereDensity: 0.1,
uAtmosphereDensity: 0.2,
uQuality: Math.min(window.devicePixelRatio, 2),
uPlanetColor,
uStars,
Expand Down

0 comments on commit cfa2776

Please sign in to comment.