2b:null 2c:["$","title",null,{"children":"Rotated World XYZ | Yichen Mo | Observable"}] 31:Tb51,fragmentShader = /* glsl */ ` uniform sampler2D mirrorSampler; uniform float alpha; uniform float time; uniform float size; uniform float distortionScale; uniform sampler2D normalSampler; uniform vec3 sunColor; uniform vec3 sunDirection; uniform vec3 eye; uniform vec3 waterColor; varying vec4 mirrorCoord; varying vec4 worldPosition; vec4 getNoise( vec2 uv ) { vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0); vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 ); vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 ); vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 ); vec4 noise = texture2D( normalSampler, uv0 ) + texture2D( normalSampler, uv1 ) + texture2D( normalSampler, uv2 ) + texture2D( normalSampler, uv3 ); return noise * 0.5 - 1.0; } void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor ) { vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) ); float direction = max( 0.0, dot( eyeDirection, reflection ) ); specularColor += pow( direction, shiny ) * sunColor * spec; diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse; } #include #include #include #include #include #include #include #include void main() { #include vec4 noise = getNoise( worldPosition.xy * size ); vec3 surfaceNormal = normalize( noise.xyz * vec3( 1.5, 1.0, 1.5 ) ); vec3 diffuseLight = vec3(0.0); vec3 specularLight = vec3(0.0); vec3 worldToEye = eye-worldPosition.xyz; vec3 eyeDirection = normalize( worldToEye ); sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight ); float distance = length(worldToEye); vec2 distortion = surfaceNormal.xy * ( 0.001 + 1.0 / distance ) * distortionScale; vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) ); float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 ); float rf0 = 0.3; float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 ); vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor; vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance); vec3 outgoingLight = albedo; gl_FragColor = vec4( outgoingLight, alpha ); #include #include }`32:[] 2f:{"id":"99033f9052722ac2","slug":"rotated-world-xyz","title":"Rotated World XYZ","thumbnail":"4114989883ca0b653b6153db0adabc1dcc9b2bc9fd93cba472b5666de98002ea","access_level":"public","create_time":"$D2021-06-21T03:33:18.164Z","update_time":"$D2021-06-22T06:33:38.972Z","view_time":null,"first_public_time":"$D2021-06-22T02:53:38.538Z","fork":{"id":"a6287888568d39c3","slug":"test-three-js-in-observable","title":"Test Three js in Observable","owner":{"id":"ea2866f5d71f3f90","login":"svv2014","name":"Vadim"}},"stars":0,"starred":false,"owner":{"type":"team","id":"15774dbc250e75d8","login":"amomorning","name":"Yichen Mo","avatar_url":"https://avatars-next.observableusercontent.com/29a2819a8f51a1e4dcfeadb6d5c6b71f707f55c4f99bdde0829507dc3a72f980","tier":"starter_2024"},"version":256,"publish_version":256,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c6c35946c020ccb","login":"amomorning","name":"Yichen Mo","avatar_url":"https://avatars-next.observableusercontent.com/29a2819a8f51a1e4dcfeadb6d5c6b71f707f55c4f99bdde0829507dc3a72f980","tier":null}],"members":[{"type":"individual","id":"5c6c35946c020ccb","login":"amomorning","name":"Yichen Mo","avatar_url":"https://avatars-next.observableusercontent.com/29a2819a8f51a1e4dcfeadb6d5c6b71f707f55c4f99bdde0829507dc3a72f980","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Rotated World XYZ","cells":[{"id":0,"value":"md`# Rotated World XYZ`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"parameters = ({\n elevation: 2,\n azimuth: 180\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"renderer.domElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"{\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n\n camera.position.set(30, 100, 20);\n scene.add(camera);\n hemiLight.intensity = 0.6;\n hemiLight.color = new THREE.Color(0xB5EBFF);\n scene.add(hemiLight);\n dirLight.intensity = 0.4;\n scene.add(dirLight);\n\n scene.add(water);\n\n scene.add(sky);\n\n const geometry = new THREE.BoxGeometry(30, 30, 30);\n const material = new THREE.MeshStandardMaterial({ roughness: 0 });\n const cube = new THREE.Mesh(geometry, material);\n scene.add(cube);\n\n function animate() {\n const time = performance.now() * 0.001;\n\n cube.position.z = Math.sin(time) * 20 + 5;\n cube.rotation.x = time * 0.5;\n cube.rotation.y = time * 0.5;\n\n water.material.uniforms['time'].value += 1.0 / 60.0;\n\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"sky = {\n const module = await import('three@0.129.0/examples/jsm/objects/Sky.js');\n const sky = new module.Sky();\n sky.scale.setScalar(10000);\n\n const skyUniforms = sky.material.uniforms;\n\n skyUniforms['turbidity'].value = 10;\n skyUniforms['rayleigh'].value = 2;\n skyUniforms['mieCoefficient'].value = 0.005;\n skyUniforms['mieDirectionalG'].value = 0.8;\n skyUniforms['up'].value = new THREE.Vector3(0, 0, 1);\n\n const pmremGenerator = new THREE.PMREMGenerator(renderer);\n sky.environment = pmremGenerator.fromScene(sky).texture;\n return sky;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"{\n const theta = THREE.MathUtils.degToRad(parameters.azimuth);\n const phi = THREE.MathUtils.degToRad(90 - parameters.elevation);\n\n let sun = new THREE.Vector3();\n sun.setFromSphericalCoords(1, theta, phi); // theta and phi need to swip\n console.log(sun);\n\n sky.material.uniforms['sunPosition'].value.copy(sun);\n water.material.uniforms['sunDirection'].value.copy(sun).normalize();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"water = {\n const waterGeometry = new THREE.PlaneGeometry(10000, 10000);\n const module = await import('three@0.129.0/examples/jsm/objects/Water.js');\n const waterurl =\n 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/waternormals.jpg';\n const water = new module.Water(waterGeometry, {\n textureWidth: 512,\n textureHeight: 512,\n waterNormals: new THREE.TextureLoader().load(waterurl, function(texture) {\n texture.wrapS = texture.wrapT = THREE.RepeatWrapping;\n }),\n sunDirection: new THREE.Vector3(),\n eye: new THREE.Vector3(0, 0, -5),\n sunColor: 0xffffff,\n waterColor: 0x001e0f,\n distortionScale: 7\n });\n water.material.fragmentShader = fragmentShader;\n water.material.needUpdate = true;\n return water;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"{\n const module = await import('three@0.129.0/examples/jsm/controls/OrbitControls.js');\n THREE.OrbitControls = module.OrbitControls;\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n\n controls.enableZoom = true; // disables zoom\n controls.enablePan = false; // disables pan\n controls.enableRotate = true; // determines if camera can rotate\n controls.update();\n return controls;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"import { camera, renderer, THREE } from '@amomorning/three'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"import { dirLight, hemiLight } from '@amomorning/three'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"