去年，一位游戏开发人员在 Shadertoy 上连续发布了多个行星渲染器：
（作者 ArchaicVirus 是一位夜晚的游戏开发者，白天上班。有兴趣的可以加他discord，在某个shader的评论区。）
代码十分简洁，却能打造天体效果，比如地球或者木星，美轮美奂。
首先，生成球面上的高度图，然后根据高度值，赋予色彩。所以高山、海洋呈现出色带效果，富有层次。
高度用叠加多个噪声计算。sphere函数计算当前像素视线与球体交点的距离（两次勾股定理），继而计算交点相对于球心的位置（向量）。基础的noise函数传入此向量。但并非计算3D噪声，而是2D噪声通过不断旋转向量、mix变成3D噪声。
有关2D/3D noise：
这种卡通或者 pixel art 的效果，也算是一个不错的起点。最畅销游戏我的世界、星露谷、王国不都是像素艺术么！
但性能是个问题（多层噪声）。小窗预览看不出来，全屏就知道了，gpu占用有点大（核显模式24%，比空白画面上升10%，一个星球尚且如此，多个星球不得卡爆）。
而且纯算法是没有业务逻辑的，只有数学，美术无法介入。
所以，想着使用原始贴图的技术，问了问 deepseek。普通回答太敷衍了，切换深度思考，结果...... deepseek 思考了很长时间（300秒）。
问：this shadertoy generates nice planet sphere. now I want to use traditional tech, i.e. render colors as textures and use that texture on a cubic-sphere using threejs. please answer js code.
js
float hash(float n) {
return fract(sin(n) * 53738.14534123);
}
float noise(vec2 p) {
vec2 ip = floor(p);
vec2 u = fract(p);
u = u * u * (3.0 - 2.0 * u);
return mix(
mix(hash(ip.x + ip.y * 57.0), hash(ip.x + 1.0 + ip.y * 57.0), u.x),
mix(hash(ip.x + (ip.y + 1.0) * 57.0), hash(ip.x + 1.0 + (ip.y + 1.0) * 57.0), u.x),
u.y
);
}
vec4 quatFromAxisAngle(vec3 axis, float angle) {
float halfAngle = angle * 0.5;
float s = sin(halfAngle);
return vec4(axis * s, cos(halfAngle));
}
vec3 rotate(vec3 v, vec4 q) {
vec3 t = 2.0 * cross(q.xyz, v);
return v + q.w * t + cross(q.xyz, t);
}
float layeredNoise(vec3 p, float amplitude, float frequency, float persistence, int octaves) {
float n = 0.0;
for (int i = 0; i < octaves; i++) {
n += noise(p.xy * frequency) * amplitude;
amplitude *= persistence;
frequency *= 2.0;
p = rotate(p, quatFromAxisAngle(normalize(vec3(1.0, 0.5, 0.0)), radians(45.0)));
}
return n;
}
vec3 colorBanding(float n) {
vec3 color = vec3(0);
if (n > 0.95) return vec3(0.0, 0.1, 0.5);
else if (n > 0.85) color = vec3(0.0, 0.3, 0.7);
else if (n > 0.75) color = vec3(0.0, 0.5, 0.8);
else if (n > 0.65) color = vec3(0.0, 0.7, 0.7);
else if (n > 0.55) color = vec3(0.8, 0.6, 0.4);
else if (n > 0.45) color = vec3(0.0, 0.6, 0.0);
else color = vec3(0.4, 0.6, 0.1);
return color;
}
float sphere(vec3 ro, vec3 rd, float radius) {
float b = dot(ro, rd);
float c = dot(ro, ro) - radius * radius;
float h = b * b - c;
if (h < 0.0) return -1.0;
// if (true) return 15.0;
return -b - sqrt(h); // 返回交点距离
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = (fragCoord - iResolution.xy * 0.5) / iResolution.y;
// if(uv.y>0.0) {
// return;
// }
vec3 ro_planet = vec3(0.0, 0.0, 2.4);
vec3 ro_clouds = vec3(0.0, 0.0, 2.3);
vec3 rd = normalize(vec3(uv, -1.0));
float t_planet = sphere(ro_planet, rd, 1.0);
float t_clouds = sphere(ro_clouds, rd, 1.0);
if (t_clouds < 0.0) {
fragColor = vec4(1.0, 1.0, 0.0, 0.0);
// fragColor = vec4(1.0, 1.0, 0.0, 1.0);
} else {
vec3 pos = ro_planet + t_planet * rd;
vec4 q = quatFromAxisAngle(normalize(vec3(1.0, 1.0, 0.0)), iTime);
// pos = rotate(pos, q);
vec3 norm = normalize(pos);
float noiseValue = layeredNoise(norm * 3.1415, 0.75, 1.0, 0.5, 3);
vec4 color = vec4(colorBanding(noiseValue), 1.0);
if (t_planet < 0.0) {
color = vec4(0.0);
// color = vec4(0.0, 1.0, 0.0, 1.0);
}
fragColor = color;
}
}答：（思考过程太长，有兴趣看末尾截图）
ini
import * as THREE from 'three';
// Replicate GLSL functions in JavaScript
function hash(n) {
const s = Math.sin(n) * 53738.14534123;
return s - Math.floor(s);
}
function mix(a, b, t) {
return a + (b - a) * t;
}
function noise(x, y) {
const ipx = Math.floor(x);
const ipy = Math.floor(y);
const ux = x - ipx;
const uy = y - ipy;
const smoothUx = ux * ux * (3 - 2 * ux);
const smoothUy = uy * uy * (3 - 2 * uy);
const a = hash(ipx + ipy * 57);
const b = hash(ipx + 1 + ipy * 57);
const c = hash(ipx + (ipy + 1) * 57);
const d = hash(ipx + 1 + (ipy + 1) * 57);
const ab = mix(a, b, smoothUx);
const cd = mix(c, d, smoothUx);
return mix(ab, cd, smoothUy);
}
function colorBanding(n) {
if (n > 0.95) return new THREE.Color(0.0, 0.1, 0.5);
else if (n > 0.85) return new THREE.Color(0.0, 0.3, 0.7);
else if (n > 0.75) return new THREE.Color(0.0, 0.5, 0.8);
else if (n > 0.65) return new THREE.Color(0.0, 0.7, 0.7);
else if (n > 0.55) return new THREE.Color(0.8, 0.6, 0.4);
else if (n > 0.45) return new THREE.Color(0.0, 0.6, 0.0);
else return new THREE.Color(0.4, 0.6, 0.1);
}
function generatePlanetTexture(width = 1024, height = 512) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(width, height);
const data = imageData.data;
const octaves = 3;
const amplitude = 0.75;
const persistence = 0.5;
const rotationAxis = new THREE.Vector3(1, 0.5, 0).normalize();
const rotationAngle = 45 * Math.PI / 180;
const rotationQuaternion = new THREE.Quaternion().setFromAxisAngle(rotationAxis, rotationAngle);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const u = x / width;
const v = y / height;
// Convert to spherical coordinates
const phi = u * 2 * Math.PI;
const theta = v * Math.PI - Math.PI / 2;
const normal = new THREE.Vector3(
Math.cos(theta) * Math.cos(phi),
Math.cos(theta) * Math.sin(phi),
Math.sin(theta)
);
let p = normal.clone().multiplyScalar(Math.PI);
let currentAmplitude = amplitude;
let currentFrequency = 1.0;
let noiseValue = 0;
for (let i = 0; i < octaves; i++) {
const nx = p.x * currentFrequency;
const ny = p.y * currentFrequency;
noiseValue += noise(nx, ny) * currentAmplitude;
currentAmplitude *= persistence;
currentFrequency *= 2.0;
p.applyQuaternion(rotationQuaternion);
}
const color = colorBanding(noiseValue);
const idx = (y * width + x) * 4;
data[idx] = color.r * 255;
data[idx + 1] = color.g * 255;
data[idx + 2] = color.b * 255;
data[idx + 3] = 255;
}
}
ctx.putImageData(imageData, 0, 0);
return canvas;
}
// Three.js setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create sphere with generated texture
const texture = new THREE.CanvasTexture(generatePlanetTexture());
const geometry = new THREE.SphereGeometry(1, 64, 64);
const material = new THREE.MeshBasicMaterial({ map: texture });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
camera.position.z = 3;
function animate() {
requestAnimationFrame(animate);
sphere.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});效果评估与总结
无需修改就能成功运行，完美翻译shadertoy里的glsl代码并复刻效果。感觉 DeepSeek 太厉害了！
用了 THREE.CanvasTexture，比我想象的要简单。本以为要生成多张贴图或者拼Atlas，结果一张画布贴图解决，直接运用到球体，厉害。
SphereGeometry -- three.js docs
CanvasTexture -- three.js docs
优点：性能好。
缺点：1. 分辨率取决于贴图，肯定没纯噪声那么精细。
- 南北极会有拉伸？
把geometry改成平面，可以看贴图本身： geometry = new THREE.PlaneGeometry(64, 64);
竟有澳洲：
效果图：
( octave=3 效果)
( octave=8 效果)
码上掘金：
github :
手机坏了，二次验证APP无法使用，登录不了。。
等我修好手机再说。