x * viewMatrix * wp; #include }`; const SKY_FS = `#include varying vec3 vD; void main(){ #include float lon = atan(vD.z, vD.x) / 6.28318 * 72.0; float lat = asin(clamp(vD.y, -1.0, 1.0)) / 1.5708 * 18.0; vec2 g = abs(fract(vec2(lon, lat) - 0.5) - 0.5) / max(fwidth(vec2(lon, lat)), vec2(1e-4)); float l = 1.0 - min(1.0, min(g.x, g.y) / 1.2); float up = smoothstep(-0.02, 0.15, vD.y); vec3 col = vec3(0.0) + vec3(0.03, 0.16, 0.22) * l * up * (1.0 - vD.y * 0.5) + vec3(0.0, 0.03, 0.05) * (1.0 - smoothstep(0.0, 0.25, abs(vD.y))); gl_FragColor = vec4(col, 1.0); }`; export async function mountSoluvWorld(container) { const t0 = performance.now(); injectStyle(); container.classList.add('sw-root'); const wrap = document.createElement('div'); wrap.className = 'sw-wrap'; wrap.innerHTML = `
${qs.has('place') ? '' : ''} Room
`; container.appendChild(wrap); const canvas = wrap.querySelector('canvas'), statusEl = wrap.querySelector('.sw-status'), badge = wrap.querySelector('.sw-badge'), numBtn = wrap.querySelector('.sw-num'); const gl2 = canvas.getContext('webgl2', { antialias: true }) ; if (!gl2) { statusEl.textContent = 'This browser has no WebGL2: open the flat room instead (Room button).'; throw new Error('no WebGL2'); } const renderer = new THREE.WebGLRenderer({ canvas, context: gl2, antialias: true, logarithmicDepthBuffer: true }); renderer.setPixelRatio(Math.min(2, devicePixelRatio || 1)); const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); const camera = new THREE.PerspectiveCamera(50, 1, 0.05, 40000); // the map: one 2000 x 2000-block slab (2 minimums thick), grid drawn in the shader const groundMat = new THREE.ShaderMaterial({ vertexShader: GROUND_VS, fragmentShader: GROUND_FS }); const ground = new THREE.Mesh(new THREE.BoxGeometry(MAP, 2 * MINIMUM, MAP), groundMat); ground.position.y = -MINIMUM; ground.name = 'map 2000x2000'; scene.add(ground); // the sky: a black grid dome that travels with the camera, so there is no ceiling anywhere const sky = new THREE.Mesh(new THREE.SphereGeometry(15000, 64, 32), new THREE.ShaderMaterial({ vertexShader: SKY_VS, fragmentShader: SKY_FS, side: THREE.BackSide, depthWrite: false })); sky.name = 'sky grid (follows camera, unlimited)'; sky.renderOrder = -10; scene.add(sky); applyMinimum(ground, THREE); // walls: wall 1 at the centre; more walls ring the plaza, every one facing the centre const walls = []; for (let n = 1; n <= pillars; n++) { let pos = [0, 0, 0], rot = 0; if (n > 1) { let k = n - 2, ring = 1; while (k >= ring * 8) { k -= ring * 8; r