sky-render.html

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>LittleJS Sky Test</title>
7	<style>
8	body { margin: 0; overflow: hidden; }
9	canvas { display: block; }
10	</style>
11	</head>
12	<body>
13	<script type="module">
14	// Import LittleJS
15	import * as LITTLEJS from 'https://cdn.jsdelivr.net/npm/littlejsengine@0.1.2/dist/littlejs.min.js';
16
17	// Create a canvas and start the engine
18	const canvas = document.createElement('canvas');
19	document.body.appendChild(canvas);
20	LITTLEJS.start(canvas, { antialias: true });
21
22	// Wait for LittleJS to be ready
23	setTimeout(() => {
24	console.log('LittleJS started!');
25
26	// Create a simple sky shader
27	const shader = new LITTLEJS.Shader(
28	`#version 300 es
29	in vec3 position;
30	out vec2 vUv;
31	uniform mat4 modelViewMatrix;
32	uniform mat4 projectionMatrix;
33	void main() {
34	vUv = position.xy * 0.5 + 0.5;
35	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
36	}`,
37	`#version 300 es
38	precision highp float;
39	in vec2 vUv;
40	out vec4 fragColor;
41	uniform vec3 uTop;
42	uniform vec3 uHorizon;
43	void main() {
44	// Simple gradient from horizon to top
45	float t = smoothstep(0.0, 1.0, vUv.y);
46	vec3 color = mix(uHorizon, uTop, t);
47	fragColor = vec4(color, 1.0);
48	}`
49	);
50
51	// Set uniforms
52	LITTLEJS.render3D.shader = shader;
53	shader.uniforms.uTop = [0.2, 0.5, 0.8]; // Blue sky
54	shader.uniforms.uHorizon = [0.6, 0.7, 0.9]; // Light blue horizon
55
56	// Draw a fullscreen quad
57	LITTLEJS.render3D.drawQuad(
58	new LITTLEJS.Vector3(-1, -1, -1),
59	new LITTLEJS.Vector3(1, -1, -1),
60	new LITTLEJS.Vector3(1, 1, -1),
61	new LITTLEJS.Vector3(-1, 1, -1)
62	);
63
64	console.log('Sky rendered!');
65	}, 100);
66	</script>
67	</body>
68	</html>