First commit
This commit is contained in:
180
media/textures/clean/index.html
Normal file
180
media/textures/clean/index.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Procedural Cubemap with Correct Orientation</title>
|
||||
<style>
|
||||
body {
|
||||
background: #222;
|
||||
color: white;
|
||||
font-family: monospace, monospace;
|
||||
padding: 10px;
|
||||
}
|
||||
canvas {
|
||||
margin: 10px 0;
|
||||
border: 1px solid #555;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
function lerp(a, b, t) {
|
||||
return a + (b - a) * t;
|
||||
}
|
||||
|
||||
function smoothstep(edge0, edge1, x) {
|
||||
if (x <= edge0) return 0;
|
||||
if (x >= edge1) return 1;
|
||||
const t = (x - edge0) / (edge1 - edge0);
|
||||
return t * t * (3 - 2 * t);
|
||||
}
|
||||
|
||||
function directionForFacePixel(face, u, v) {
|
||||
// u, v in [-1, 1], v goes **top to bottom** (normal image coords)
|
||||
switch (face) {
|
||||
case 'positive_x': return [ 1, -v, -u];
|
||||
case 'negative_x': return [-1, -v, u];
|
||||
case 'positive_y': return [ u, 1, v];
|
||||
case 'negative_y': return [ u, -1, -v];
|
||||
case 'positive_z': return [ u, -v, 1];
|
||||
case 'negative_z': return [-u, -v, -1];
|
||||
default: return [0, 0, 0];
|
||||
}
|
||||
}
|
||||
|
||||
function normalize(vec) {
|
||||
const len = Math.sqrt(vec[0]*vec[0] + vec[1]*vec[1] + vec[2]*vec[2]);
|
||||
return [vec[0]/len, vec[1]/len, vec[2]/len];
|
||||
}
|
||||
|
||||
function getColorFromDirection(dir) {
|
||||
const vertical = dir[1];
|
||||
|
||||
const sunDir = normalize([0.1, 1.0, 0.3]);
|
||||
const sunIntensity = Math.max(0, dot(dir, sunDir));
|
||||
const sunGlow = smoothstep(0.7, 1.0, sunIntensity);
|
||||
|
||||
// Horizontal distance from zenith axis (Y axis)
|
||||
const horizontalDist = Math.sqrt(dir[0]*dir[0] + dir[2]*dir[2]);
|
||||
|
||||
// Horizontal warm tint factor (strong near horizon, fades smoothly)
|
||||
const horizontalWarmFactor = smoothstep(0.0, 0.9, 1 - horizontalDist);
|
||||
|
||||
|
||||
// Vertical factor to reduce warm tint near zenith (top)
|
||||
const verticalWarmFactor = smoothstep(0.0, 0.7, 1 - Math.abs(vertical));
|
||||
|
||||
// Combined warm tint factor
|
||||
const warmFactor = horizontalWarmFactor * verticalWarmFactor;
|
||||
|
||||
// Sky base colors
|
||||
const skyZenith = [135, 206, 235]; // light blue
|
||||
const skyHorizonCool = [190, 210, 220]; // softer, le
|
||||
const skyHorizonWarm = [252, 212, 164]; // warm horizon color
|
||||
|
||||
// Ocean colors
|
||||
const oceanDeep = [42, 79, 122];
|
||||
const oceanShallow = [70, 130, 180]; // softer, deeper blue instead of bright sky blue
|
||||
|
||||
|
||||
// Vertical thresholds for horizon blending
|
||||
const horizonLow = -0.35;
|
||||
const horizonHigh = 0.35;
|
||||
|
||||
// Vertical blend factor ocean <-> sky
|
||||
const tV = smoothstep(horizonLow, horizonHigh, vertical);
|
||||
|
||||
// Compute base sky color with horizontal warm tint applied before vertical blending
|
||||
// Blend between cool horizon and warm horizon colors by warmFactor horizontally
|
||||
const horizonColor = lerpColor(
|
||||
skyHorizonCool,
|
||||
skyHorizonWarm,
|
||||
Math.min(1, warmFactor * 1.5) // increase warm tint strength here
|
||||
);
|
||||
|
||||
// Shift skyHorizonCool slightly toward warmer tone:
|
||||
|
||||
|
||||
// Sky color blends from zenith to horizonColor vertically
|
||||
const skyColor = lerpColor(skyZenith, horizonColor, 1 - tV);
|
||||
|
||||
// Ocean color blends from deep to shallow vertically
|
||||
const oceanColor = lerpColor(oceanDeep, oceanShallow, 1 - tV);
|
||||
|
||||
// Final color blends ocean and sky by vertical factor tV
|
||||
let finalColor = lerpColor(oceanColor, skyColor, tV);
|
||||
|
||||
// Add subtle sun glow highlight
|
||||
const sunGlowStrength = sunGlow * 80;
|
||||
finalColor = finalColor.map(c => Math.min(255, c + sunGlowStrength));
|
||||
|
||||
return finalColor;
|
||||
}
|
||||
|
||||
// Helper vector dot product
|
||||
function dot(a, b) {
|
||||
return a[0]*b[0] + a[1]*b[1] + a[2]*b[2];
|
||||
}
|
||||
function lerpColor(a, b, t) {
|
||||
return [
|
||||
lerp(a[0], b[0], t),
|
||||
lerp(a[1], b[1], t),
|
||||
lerp(a[2], b[2], t)
|
||||
];
|
||||
}
|
||||
function createFaceCanvas(face, size) {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const imageData = ctx.createImageData(size, size);
|
||||
const data = imageData.data;
|
||||
|
||||
for (let y = 0; y < size; y++) {
|
||||
let v = 1 - 2 * (y / (size - 1)); // bottom to top [-1..1]
|
||||
|
||||
for (let x = 0; x < size; x++) {
|
||||
const u = 2 * (x / (size - 1)) - 1; // left to right [-1..1]
|
||||
|
||||
// Flip vertical coordinate for specific faces here:
|
||||
let vFlipped = v;
|
||||
if (face === 'positive_x' || face === 'negative_x' || face === 'positive_z' || face === 'negative_z') {
|
||||
vFlipped = -v;
|
||||
}
|
||||
|
||||
let dir = directionForFacePixel(face, u, vFlipped);
|
||||
dir = normalize(dir);
|
||||
|
||||
const col = getColorFromDirection(dir);
|
||||
|
||||
const i = 4 * (y * size + x);
|
||||
data[i] = Math.round(col[0]);
|
||||
data[i + 1] = Math.round(col[1]);
|
||||
data[i + 2] = Math.round(col[2]);
|
||||
data[i + 3] = 255;
|
||||
}
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", function () {
|
||||
const size = 256; // increase for higher resolution
|
||||
const faces = ['positive_x', 'negative_x', 'positive_y', 'negative_y', 'positive_z', 'negative_z'];
|
||||
|
||||
for (const face of faces) {
|
||||
document.body.appendChild(document.createTextNode(face));
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
const canvas = createFaceCanvas(face, size);
|
||||
document.body.appendChild(canvas);
|
||||
document.body.appendChild(document.createElement('br'));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user