sky-render.html

Blame: the commit that last changed each line · file · history

`39d08b63` 2026-10-20 Pavel Safronov	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>