Add shaders in the web-app and process lighting there

This commit is contained in:
Blue (Lukas Rieger) 2020-02-11 21:10:59 +01:00
parent db208d4b8f
commit 27129b0e53
5 changed files with 229 additions and 14 deletions

View File

@ -43,7 +43,7 @@ import {
Texture, Texture,
TextureLoader, TextureLoader,
VertexColors, VertexColors,
WebGLRenderer, WebGLRenderer, ShaderMaterial,
} from 'three'; } from 'three';
import Compass from './modules/Compass.js'; import Compass from './modules/Compass.js';
@ -55,6 +55,11 @@ import Settings from './modules/Settings.js';
import Controls from './Controls.js'; import Controls from './Controls.js';
import TileManager from './TileManager.js'; import TileManager from './TileManager.js';
import HIRES_VERTEX_SHADER from './shaders/HiresVertexShader.js';
import HIRES_FRAGMENT_SHADER from './shaders/HiresFragmentShader.js';
import LOWRES_VERTEX_SHADER from './shaders/LowresVertexShader.js';
import LOWRES_FRAGMENT_SHADER from './shaders/LowresFragmentShader.js';
import { stringToImage, pathFromCoords } from './utils.js'; import { stringToImage, pathFromCoords } from './utils.js';
import SKYBOX_NORTH from '../../assets/skybox/north.png'; import SKYBOX_NORTH from '../../assets/skybox/north.png';
@ -367,16 +372,6 @@ export default class BlueMap {
let opaque = t['color'][3] === 1; let opaque = t['color'][3] === 1;
let transparent = t['transparent']; let transparent = t['transparent'];
let material = new MeshLambertMaterial({
transparent: transparent,
alphaTest: transparent ? 0 : (opaque ? 1 : 0.01),
depthWrite: true,
depthTest: true,
blending: NormalBlending,
vertexColors: VertexColors,
side: FrontSide,
wireframe: false
});
let texture = new Texture(); let texture = new Texture();
texture.image = stringToImage(t['texture']); texture.image = stringToImage(t['texture']);
@ -391,9 +386,29 @@ export default class BlueMap {
texture.flatShading = true; texture.flatShading = true;
texture.needsUpdate = true; texture.needsUpdate = true;
material.map = texture; let uniforms = {
material.needsUpdate = true; texture: {
type: 't',
value: texture
},
sunlightStrength: {
value: 1
}
};
let material = new ShaderMaterial({
uniforms: uniforms,
vertexShader: HIRES_VERTEX_SHADER,
fragmentShader: HIRES_FRAGMENT_SHADER,
transparent: transparent,
depthWrite: true,
depthTest: true,
vertexColors: VertexColors,
side: FrontSide,
wireframe: false,
});
material.needsUpdate = true;
materials[i] = material; materials[i] = material;
} }
@ -404,7 +419,9 @@ export default class BlueMap {
} }
async loadLowresMaterial() { async loadLowresMaterial() {
this.lowresMaterial = new MeshLambertMaterial({ this.lowresMaterial = new ShaderMaterial({
vertexShader: LOWRES_VERTEX_SHADER,
fragmentShader: LOWRES_FRAGMENT_SHADER,
transparent: false, transparent: false,
depthWrite: true, depthWrite: true,
depthTest: true, depthTest: true,

View File

@ -0,0 +1,56 @@
/*
* This file is part of BlueMap, licensed under the MIT License (MIT).
*
* Copyright (c) Blue (Lukas Rieger) <https://bluecolored.de>
* Copyright (c) contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the 'Software'), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
const HIRES_FRAGMENT_SHADER = `
uniform sampler2D texture;
uniform float sunlightStrength;
varying vec3 vPosition;
varying vec3 vNormal;
varying vec2 vUv;
varying vec3 vColor;
varying float vAo;
varying float vSunlight;
varying float vBlocklight;
void main() {
vec4 color = texture2D(texture, vUv);
if (color.a == 0.0) discard;
//apply vertex-color
color.rgb *= vColor;
//apply ao
color.rgb *= vAo;
//apply light
float light = max(vSunlight * sunlightStrength, vBlocklight);
color.rgb *= light / 15.0;
gl_FragColor = color;
}
`;
export default HIRES_FRAGMENT_SHADER;

View File

@ -0,0 +1,55 @@
/*
* This file is part of BlueMap, licensed under the MIT License (MIT).
*
* Copyright (c) Blue (Lukas Rieger) <https://bluecolored.de>
* Copyright (c) contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the 'Software'), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
const HIRES_VERTEX_SHADER = `
attribute float ao;
attribute float sunlight;
attribute float blocklight;
varying vec3 vPosition;
varying vec3 vNormal;
varying vec2 vUv;
varying vec3 vColor;
varying float vAo;
varying float vSunlight;
varying float vBlocklight;
void main() {
vPosition = position;
vNormal = normal;
vUv = uv;
vColor = color;
vAo = ao;
vSunlight = sunlight;
vBlocklight = blocklight;
gl_Position =
projectionMatrix *
modelViewMatrix *
vec4(position, 1);
}
`;
export default HIRES_VERTEX_SHADER;

View File

@ -0,0 +1,42 @@
/*
* This file is part of BlueMap, licensed under the MIT License (MIT).
*
* Copyright (c) Blue (Lukas Rieger) <https://bluecolored.de>
* Copyright (c) contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the 'Software'), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
const LOWRES_FRAGMENT_SHADER = `
varying vec3 vPosition;
varying vec3 vNormal;
varying vec2 vUv;
varying vec3 vColor;
void main() {
vec4 color = vec4(vColor, 1.0);
float diff = sqrt(max(dot(vNormal, vec3(0.3637, 0.7274, 0.5819)), 0.0)) * 0.4 + 0.6;
color *= diff;
gl_FragColor = color;
}
`;
export default LOWRES_FRAGMENT_SHADER;

View File

@ -0,0 +1,45 @@
/*
* This file is part of BlueMap, licensed under the MIT License (MIT).
*
* Copyright (c) Blue (Lukas Rieger) <https://bluecolored.de>
* Copyright (c) contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the 'Software'), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
const LOWRES_VERTEX_SHADER = `
varying vec3 vPosition;
varying vec3 vNormal;
varying vec2 vUv;
varying vec3 vColor;
void main() {
vPosition = position;
vNormal = normal;
vUv = uv;
vColor = color;
gl_Position =
projectionMatrix *
modelViewMatrix *
vec4(position, 1);
}
`;
export default LOWRES_VERTEX_SHADER;