// // Initialize a texture and load an image. // When the image finished loading copy it into the texture. // function loadTexture(gl, url) { const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); // Because images have to be download over the internet // they might take a moment until they are ready. // Until then put a single pixel in the texture so we can // use it immediately. When the image has finished downloading // we'll update the texture with the contents of the image. const level = 0; const internalFormat = gl.RGBA; const width = 1; const height = 1; const border = 0; const srcFormat = gl.RGBA; const srcType = gl.UNSIGNED_BYTE; const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, pixel); var image = new Image(); var promise = new Promise(function(resolver, rejector) { image.onload = function() { gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image); // WebGL1 has different requirements for power of 2 images // vs non power of 2 images so check if the image is a // power of 2 in both dimensions. if (false && isPowerOf2(image.width) && isPowerOf2(image.height)) { // Yes, it's a power of 2. Generate mips. gl.generateMipmap(gl.TEXTURE_2D); } else { // No, it's not a power of 2. Turn of mips and set // wrapping to clamp to edge gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); } resolver(); }; }); image.src = url; return { 'texture': texture, 'promise': promise }; } function isPowerOf2(value) { return (value & (value - 1)) == 0; } document.addEventListener('DOMContentLoaded', function() { var canvas = document.querySelector('canvas'); var gl = canvas.getContext('webgl'); var program = gl.createProgram(); loadShaders(); initCoords(); var textureInfo = loadTexture(gl, textureDataURL); var texture = textureInfo.texture; var locationOfSurfaceSampler = gl.getUniformLocation(program, 'surfaceSampler'); var locationOfCloudSampler = gl.getUniformLocation(program, 'cloudSampler'); var viewport; var settings = new SettingsUI(); // Tell WebGL we want to affect texture unit 0 gl.activeTexture(gl.TEXTURE0); // Bind the texture to texture unit 0 gl.bindTexture(gl.TEXTURE_2D, texture); gl.uniform1i(locationOfSurfaceSampler, 0); function loadCloudTexture() { gl.activeTexture(gl.TEXTURE1); var cloudInfo = loadTexture(gl, cloudDataURL); var cloudTexture = cloudInfo.texture; // Bind the texture to texture unit 0 gl.bindTexture(gl.TEXTURE_2D, cloudTexture); gl.uniform1i(locationOfCloudSampler, 1); return cloudInfo.promise; } function initCoords() { let position = gl.getAttribLocation(program, 'position'); let array = new Float32Array([-1, 3, -1, -1, 3, -1]); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW); gl.vertexAttribPointer(position, 2 /*components per vertex */, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(position); } function loadShaders() { loadShader('x-shader/x-vertex', gl.VERTEX_SHADER); loadShader('x-shader/x-fragment', gl.FRAGMENT_SHADER); gl.linkProgram(program); gl.useProgram(program); } function loadShader(scriptType, shaderType) { var script = document.querySelector('script[type="' + scriptType + '"]'); var src = script.innerText; let sid = gl.createShader(shaderType); gl.shaderSource(sid, src); gl.compileShader(sid); gl.attachShader(program, sid); } textureInfo.promise.then(function() { loadCloudTexture().then(function() { var viewport = new Viewport(gl, program, canvas); new ViewPoint(gl, program, viewport); new Lighting(gl, program, viewport); new OverallBrightness(gl, program, viewport); new SurfaceRotation(gl, program, viewport); }); }); });class Viewport { constructor(gl, program, canvas) { this.gl = gl; this.canvas = canvas; this.uniforms = { 'centre': gl.getUniformLocation(program, 'centre'), 'scale': gl.getUniformLocation(program, 'scale') }; var outer = this; window.addEventListener('resize', function() { outer._resized(); }); this._resized(); this._initScaleUI(); this._refreshScaleFactor(); } _initScaleUI() { var settings = document.querySelector('#settings section'); var div = document.createElement('div'); div.setAttribute('class', 'labelled-range'); div.innerHTML = `Scale `; settings.appendChild(div); var scaleInput = document.getElementById('scale-factor'); var outer = this; scaleInput.addEventListener('input', function() { outer._refreshScaleFactor(); }); } _refreshScaleFactor() { var scaleInput = document.getElementById('scale-factor'); var newValue = parseFloat(scaleInput.value); if (!isNaN(newValue)) { this.scaleFactor = newValue; this._resized(); } } _getScaleFromDimensions() { var w = this.canvas.clientWidth; var h = this.canvas.clientHeight; return this.scaleFactor /(w + h); } _resized() { var w = this.canvas.clientWidth; var h = this.canvas.clientHeight; this.canvas.setAttribute('width', w); this.canvas.setAttribute('height', h); var centre = [w * 0.5, h * 0.5]; var scale = this._getScaleFromDimensions(); this.gl.uniform2fv(this.uniforms.centre, centre); this.gl.uniform1f(this.uniforms.scale, scale); this.draw(); } draw() { var w = this.canvas.clientWidth; var h = this.canvas.clientHeight; this.gl.viewport(0, 0, w, h); this.gl.clearColor(0, 0, 0, 0); this.gl.drawArrays(this.gl.TRIANGLES, 0, 3); } }class ViewPoint { constructor(gl, program, viewport) { this.gl = gl; this.viewport = viewport; this.uniforms = { 'viewPoint': gl.getUniformLocation(program, 'viewPoint'), 'viewPointMagnitudeSquared': gl.getUniformLocation(program, 'viewPointMagnitudeSquared') }; this._initViewPointUI(); } _initViewPointUI() { var settings = document.querySelector('#settings section'); var div = document.createElement('div'); div.innerHTML = `

View Point x y z

`; settings.appendChild(div); var outer = this; ['x', 'y', 'z'].forEach(function(axis) { var input = document.getElementById('viewpoint-' + axis); outer[axis + 'Input'] = input; input.addEventListener('input', function() { outer._viewPointUpdated(); }); }); this._viewPointUpdated(); } _viewPointUpdated() { var newViewPoint = [ parseFloat(this.xInput.value), parseFloat(this.yInput.value), parseFloat(this.zInput.value) ]; this._setViewPoint(newViewPoint); this.viewport.draw(); } _setViewPoint(newViewPoint) { // Ignore the call if the parameter is invalid. if (!(newViewPoint) instanceof Array || isNaN(newViewPoint[0]) || isNaN(newViewPoint[1]) || isNaN(newViewPoint[2])) { return; } this.gl.uniform3fv(this.uniforms.viewPoint, newViewPoint); var squaredValue = 0; for (var i = 0; i < 3; i++) { squaredValue += newViewPoint[i] * newViewPoint[i]; } this.gl.uniform1f(this.uniforms.viewPointMagnitudeSquared, squaredValue); } }class Lighting { constructor(gl, program, viewport) { this.gl = gl; this.viewport = viewport; this.uniforms = { 'lightDirection': gl.getUniformLocation(program, 'lightDirection') }; this._initLocationSettingsUI(); this._lightUpdated(); } _initLocationSettingsUI() { var settings = document.querySelector('#settings section'); var div = document.createElement('div'); div.setAttribute('class', 'light-settings'); div.innerHTML = `

Light Direction x y z

`; settings.appendChild(div); var outer = this; ['x', 'y', 'z'].forEach(function(key) { var input = document.querySelector('#light-' + key); outer['input' + key.toUpperCase()] = input; input.addEventListener('input', function() { outer._lightUpdated(); }); }); } _lightUpdated() { var lightDirection = [ parseFloat(this.inputX.value), parseFloat(this.inputY.value), parseFloat(this.inputZ.value) ]; var m = 0; for (var i = 0; i < lightDirection.length; i++) { // if any values aren't valid, don't update the light direction. if (typeof lightDirection[i] !== 'number' || isNaN(lightDirection[i])) return; m += lightDirection[i] * lightDirection[i]; } // don't set light direction to a vector that has magnitude 0. if (m === 0) return; else { // normalize the vector. m = Math.sqrt(m); for (var i = 0; i < lightDirection.length; i++) { lightDirection[i] /= m; } } this.gl.uniform3fv(this.uniforms.lightDirection, lightDirection); this.viewport.draw(); } }class OverallBrightness { constructor(gl, program, viewport) { this.gl = gl; this.viewport = viewport; this.uniforms = { 'overallBrightnessCoefficient': gl.getUniformLocation(program, 'overallBrightnessCoefficient') }; this._initUI(); } _initUI() { var settings = document.querySelector('#settings section'); var div = document.createElement('div'); div.setAttribute('class', 'labelled-range'); div.innerHTML = ` Brightness `; settings.appendChild(div); this.input = document.getElementById("overall-brightness-coefficient"); var outer = this; this.input.addEventListener('input', function() { outer._brightnessUpdated(); }); this._brightnessUpdated(); } _brightnessUpdated() { var val = parseFloat(this.input.value); if (!isNaN(val)) { this.gl.uniform1f(this.uniforms.overallBrightnessCoefficient, val); this.viewport.draw(); } } }class SurfaceRotation { constructor(gl, program, viewport) { this.gl = gl; this.viewport = viewport; this.uniforms = { surfaceRotation: gl.getUniformLocation(program, 'surfaceRotation'), }; this._initUI(); } _initUI() { var settings = document.querySelector('#settings section'); var div = document.createElement('div'); div.setAttribute('class', 'labelled-range'); div.innerHTML = `Surface Rotation `; settings.appendChild(div); this.input = document.getElementById('surface-rotation'); var outer = this; function updated() { var newValue = parseFloat(outer.input.value); outer.gl.uniform1f(outer.uniforms.surfaceRotation, newValue); outer.viewport.draw(); } this.input.addEventListener('input', updated); updated(); } }document.addEventListener('DOMContentLoaded', function() { var settings = document.getElementById('settings'); function removeDialog() { var dialog = document.getElementById('dialog'); dialog.remove(); settings.removeEventListener('mousedown', removeDialog); settings.removeEventListener('touchstart', removeDialog); } document.getElementById('dialog-ok').addEventListener('click', removeDialog); settings.addEventListener('mousedown', removeDialog); settings.addEventListener('touchstart', removeDialog); });class SettingsUI { constructor() { this._init(); } _toggleSettings() { this.settingsDiv.classList.toggle('expanded'); } _init() { var body = document.querySelector('body'); this.settingsDiv = document.createElement('div'); this.settingsDiv.setAttribute('id', 'settings'); this.settingsDiv.classList.add('expanded'); this.settingsDiv.innerHTML = `

`; body.appendChild(this.settingsDiv); var toggleButton = document.getElementById('toggle-settings'); var outer = this; toggleButton.addEventListener('click', function() { outer._toggleSettings(); }); } }

Realistic Earth WebGL Shader