[READ-ONLY] Mirror of https://github.com/flo-bit/tiny-planets. procedurally generated tiny planets in the browsers
flo-bit.dev/tiny-planets/
low-poly
planets
procedural-generation
threejs
add atmo v1
+202
+202
src/script.ts
+202
src/script.ts
···
58
58
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
59
59
scene.add(ambientLight);
60
60
61
+
62
+
const atmosphereShader = {
63
+
uniforms: {
64
+
lightDirection: { value: new THREE.Vector3(1.0, 1.0, 0.0).normalize() }, // Sunlight direction
65
+
atmosphereColor: { value: new THREE.Vector3(0.3, 0.6, 1.0) }, // Blue tint for atmosphere
66
+
67
+
},
68
+
vertexShader: `
69
+
varying vec3 vNormal;
70
+
varying vec3 vViewLightDirection; // Light direction relative to the camera
71
+
varying vec3 vViewPosition; // View position
72
+
73
+
uniform vec3 lightDirection; // Light direction in world space
74
+
75
+
void main() {
76
+
// Transform the vertex normal to world space
77
+
vNormal = normalize(normalMatrix * normal);
78
+
// Transform the light direction to view space
79
+
vViewLightDirection = (viewMatrix * vec4(lightDirection, 0.0)).xyz;
80
+
vViewPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
81
+
82
+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
83
+
}
84
+
`,
85
+
fragmentShader: `
86
+
varying vec3 vNormal;
87
+
varying vec3 vViewLightDirection;
88
+
varying vec3 vViewPosition;
89
+
uniform vec3 atmosphereColor;
90
+
91
+
void main() {
92
+
93
+
// Normalize the normal and the view direction
94
+
vec3 viewDirection = normalize(vViewPosition);
95
+
96
+
// Calculate how much of the surface is perpendicular to the view direction
97
+
float viewFactor = dot(normalize(vNormal), -viewDirection);
98
+
99
+
// Calculate the dot product of the light direction and the surface normal
100
+
float lightFactor = dot(normalize(vNormal), normalize(vViewLightDirection));
101
+
102
+
// Use smoothstep to soften the transition from light to dark side
103
+
lightFactor = smoothstep(-0.2, 0.4, lightFactor);
104
+
105
+
// Ensure a minimum glow, even on the dark side
106
+
float minGlow = 0.2; // Adjust this to control how much it glows on the dark side
107
+
lightFactor = mix(minGlow, 1.0, lightFactor);
108
+
109
+
// Adjust the intensity for the atmosphere's glow, including the minimum glow
110
+
float dotProduct = dot(normalize(vNormal), vec3(0, 0.0, 1.0));
111
+
float intensity = pow(dotProduct, 8.0);
112
+
intensity *= lightFactor;
113
+
114
+
viewFactor = clamp(1.0 - viewFactor, 0.0, 1.0);
115
+
116
+
// Use smoothstep for a smooth transition on the edges
117
+
float atmosphereFactor = smoothstep(0.0, 0.6, viewFactor);
118
+
119
+
// Output the final color
120
+
gl_FragColor = vec4(atmosphereColor, intensity * atmosphereFactor);
121
+
// Set the final fragment color with the computed intensity
122
+
//gl_FragColor = vec4(0.3, 0.6, 1.0, 1.0) * intensity;
123
+
}`,
124
+
side: THREE.FrontSide,
125
+
transparent: true,
126
+
depthWrite: false,
127
+
};
128
+
129
+
// Create the atmosphere material
130
+
const atmosphereMaterial = new THREE.ShaderMaterial(atmosphereShader);
131
+
132
+
// Create the atmosphere geometry
133
+
const atmosphereGeometry = new THREE.IcosahedronGeometry(1.2, 20);
134
+
const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
135
+
atmosphere.renderOrder = 1;
136
+
scene.add(atmosphere);
137
+
138
+
139
+
140
+
// const atmosphereShader = {
141
+
// uniforms: {
142
+
// lightDirection: { value: new THREE.Vector3(1.0, 1.0, 0.0).normalize() }, // Sunlight direction
143
+
// atmosphereColor: { value: new THREE.Vector3(0.3, 0.6, 1.0) }, // Blue tint for atmosphere
144
+
// },
145
+
// vertexShader: `
146
+
// varying vec3 vNormal;
147
+
// varying vec3 vViewPosition;
148
+
149
+
// void main() {
150
+
// // Pass the vertex normal to the fragment shader
151
+
// vNormal = normalize(normalMatrix * normal);
152
+
153
+
// // Get the view-space position (relative to the camera)
154
+
// vViewPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
155
+
156
+
// // Standard vertex position transformation
157
+
// gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
158
+
// }
159
+
// `,
160
+
// fragmentShader: `
161
+
// varying vec3 vNormal;
162
+
// varying vec3 vViewPosition;
163
+
164
+
// uniform vec3 atmosphereColor;
165
+
166
+
// void main() {
167
+
// // Normalize the normal and the view direction
168
+
// vec3 viewDirection = normalize(vViewPosition);
169
+
170
+
// // Calculate how much of the surface is perpendicular to the view direction
171
+
// float viewFactor = dot(normalize(vNormal), -viewDirection);
172
+
173
+
// // Invert and clamp the viewFactor to ensure a smooth fade on the edges
174
+
// viewFactor = clamp(1.0 - viewFactor, 0.0, 1.0);
175
+
176
+
// // Use smoothstep for a smooth transition on the edges
177
+
// float atmosphereFactor = smoothstep(0.2, 0.8, viewFactor);
178
+
179
+
// // Apply the blue tint more strongly on the edges
180
+
// vec3 finalColor = mix(vec3(1.0), atmosphereColor, atmosphereFactor);
181
+
182
+
// // Output the final color
183
+
// gl_FragColor = vec4(finalColor, atmosphereFactor);
184
+
// }
185
+
// `,
186
+
// side: THREE.FrontSide,
187
+
// transparent: true,
188
+
// depthWrite: false,
189
+
// };
190
+
191
+
// // Create atmosphere material using the shader
192
+
// const atmosphereMaterial = new THREE.ShaderMaterial(atmosphereShader);
193
+
194
+
// // Create your atmosphere geometry and apply the material
195
+
// const atmosphereGeometry = new THREE.SphereGeometry(1.3, 32, 32);
196
+
// const atmosphereMesh = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
197
+
// atmosphereMesh.renderOrder = 1;
198
+
// scene.add(atmosphereMesh);
199
+
200
+
// const atmosphereShader = {
201
+
// uniforms: {
202
+
// lightDirection: { value: new THREE.Vector3(1.0, 1.0, 0.0).normalize() }, // Sunlight direction
203
+
// },
204
+
// vertexShader: `
205
+
// varying vec3 vNormal;
206
+
// varying vec3 vViewLightDirection; // Light direction relative to the camera
207
+
208
+
// uniform vec3 lightDirection; // Light direction in world space
209
+
210
+
// void main() {
211
+
// // Transform the vertex normal to world space
212
+
// vNormal = normalize(normalMatrix * normal);
213
+
// // Transform the light direction to view space
214
+
// vViewLightDirection = (viewMatrix * vec4(lightDirection, 0.0)).xyz;
215
+
216
+
// gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
217
+
// }
218
+
// `,
219
+
// fragmentShader: `
220
+
// varying vec3 vNormal;
221
+
// varying vec3 vViewLightDirection;
222
+
223
+
// void main() {
224
+
// // Calculate the dot product of the light direction and the surface normal
225
+
// float lightFactor = dot(normalize(vNormal), normalize(vViewLightDirection));
226
+
227
+
// // Use smoothstep to soften the transition from light to dark side
228
+
// lightFactor = smoothstep(0.0, 0.5, lightFactor);
229
+
230
+
// // Ensure a minimum glow, even on the dark side
231
+
// float minGlow = 0.5; // Adjust this to control how much it glows on the dark side
232
+
// lightFactor = mix(minGlow, 1.0, lightFactor);
233
+
234
+
// // Adjust the intensity for the atmosphere's glow, including the minimum glow
235
+
// float intensity = pow(0.7 - dot(normalize(vNormal), vec3(0, 0, 1.0)), 2.0);
236
+
// intensity *= lightFactor;
237
+
238
+
// // Calculate an alpha value for fog-like fading effect near the edges
239
+
// // This will make the atmosphere more transparent at the edges
240
+
// float alpha = lightFactor * 0.6; // Adjust alpha factor for stronger or softer fade
241
+
242
+
// // Set the final fragment color with the computed intensity and alpha
243
+
// gl_FragColor = vec4(0.3, 0.6, 1.0, alpha) * intensity;
244
+
// }`,
245
+
// side: THREE.BackSide, // Only render the back faces of the atmosphere
246
+
// transparent: true, // Enable transparency for the fade effect
247
+
// };
248
+
249
+
// // Create the atmosphere material
250
+
// const atmosphereMaterial = new THREE.ShaderMaterial(atmosphereShader);
251
+
252
+
// // Create the atmosphere geometry
253
+
// const atmosphereGeometry = new THREE.IcosahedronGeometry(1, 20);
254
+
// const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
255
+
// const scale = 1.2;
256
+
// atmosphere.scale.set(scale, scale, scale);
257
+
// scene.add(atmosphere);
258
+
61
259
let total = 0;
62
260
let lastDelta = 0;
63
261
renderer.setAnimationLoop((delta) => {
···
85
283
createPlanet("forest");
86
284
} else if (event.key === "3") {
87
285
createPlanet("snowForest");
286
+
}
287
+
288
+
if (event.key === "a") {
289
+
atmosphere.visible = !atmosphere.visible;
88
290
}
89
291
});
90
292