├── marcher ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── .prettierrc ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.png │ ├── models │ │ └── envMap │ │ │ ├── 1 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ ├── 2 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ ├── 3 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ ├── 4 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ ├── 5 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ ├── 6 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ ├── 7 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ ├── 8 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ ├── pz.png │ │ │ └── std03 │ │ │ ├── nx.jpg │ │ │ ├── ny.jpg │ │ │ ├── nz.jpg │ │ │ ├── px.jpg │ │ │ ├── py.jpg │ │ │ └── pz.jpg │ └── styles │ │ ├── font │ │ ├── OpenSans-ExtraBoldItalic.ttf │ │ ├── Open_Sans │ │ │ ├── LICENSE.txt │ │ │ ├── OpenSans-Italic-VariableFont_wdth,wght.ttf │ │ │ ├── OpenSans-VariableFont_wdth,wght.ttf │ │ │ ├── README.txt │ │ │ └── static │ │ │ │ ├── OpenSans │ │ │ │ ├── OpenSans-Bold.ttf │ │ │ │ ├── OpenSans-BoldItalic.ttf │ │ │ │ ├── OpenSans-ExtraBold.ttf │ │ │ │ ├── OpenSans-ExtraBoldItalic.ttf │ │ │ │ ├── OpenSans-Italic.ttf │ │ │ │ ├── OpenSans-Light.ttf │ │ │ │ ├── OpenSans-LightItalic.ttf │ │ │ │ ├── OpenSans-Medium.ttf │ │ │ │ ├── OpenSans-MediumItalic.ttf │ │ │ │ ├── OpenSans-Regular.ttf │ │ │ │ ├── OpenSans-SemiBold.ttf │ │ │ │ └── OpenSans-SemiBoldItalic.ttf │ │ │ │ ├── OpenSans_Condensed │ │ │ │ ├── OpenSans_Condensed-Bold.ttf │ │ │ │ ├── OpenSans_Condensed-BoldItalic.ttf │ │ │ │ ├── OpenSans_Condensed-ExtraBold.ttf │ │ │ │ ├── OpenSans_Condensed-ExtraBoldItalic.ttf │ │ │ │ ├── OpenSans_Condensed-Italic.ttf │ │ │ │ ├── OpenSans_Condensed-Light.ttf │ │ │ │ ├── OpenSans_Condensed-LightItalic.ttf │ │ │ │ ├── OpenSans_Condensed-Medium.ttf │ │ │ │ ├── OpenSans_Condensed-MediumItalic.ttf │ │ │ │ ├── OpenSans_Condensed-Regular.ttf │ │ │ │ ├── OpenSans_Condensed-SemiBold.ttf │ │ │ │ └── OpenSans_Condensed-SemiBoldItalic.ttf │ │ │ │ └── OpenSans_SemiCondensed │ │ │ │ ├── OpenSans_SemiCondensed-Bold.ttf │ │ │ │ ├── OpenSans_SemiCondensed-BoldItalic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-ExtraBold.ttf │ │ │ │ ├── OpenSans_SemiCondensed-ExtraBoldItalic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-Italic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-Light.ttf │ │ │ │ ├── OpenSans_SemiCondensed-LightItalic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-Medium.ttf │ │ │ │ ├── OpenSans_SemiCondensed-MediumItalic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-Regular.ttf │ │ │ │ ├── OpenSans_SemiCondensed-SemiBold.ttf │ │ │ │ └── OpenSans_SemiCondensed-SemiBoldItalic.ttf │ │ └── Space_Grotesk │ │ │ ├── OFL.txt │ │ │ ├── README.txt │ │ │ ├── SpaceGrotesk-VariableFont_wght.ttf │ │ │ └── static │ │ │ ├── SpaceGrotesk-Bold.ttf │ │ │ ├── SpaceGrotesk-Light.ttf │ │ │ ├── SpaceGrotesk-Medium.ttf │ │ │ ├── SpaceGrotesk-Regular.ttf │ │ │ └── SpaceGrotesk-SemiBold.ttf │ │ └── main.css ├── src │ ├── fonts │ │ └── Roboto-Regular.ttf │ ├── images │ │ └── logos │ │ │ ├── three-icon.png │ │ │ └── webpack-logo.svg │ ├── index.js │ ├── js │ │ ├── View.js │ │ ├── controls │ │ │ └── OrbitControls.js │ │ ├── tsl │ │ │ └── Raymarch.js │ │ └── utils │ │ │ └── webgl-assets.js │ └── template.html └── webpack.config.js ├── scenic-backdrop ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── .prettierrc ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.png │ ├── models │ │ └── envMap │ │ │ ├── 1 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ ├── 6 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ │ │ └── 8 │ │ │ ├── nx.png │ │ │ ├── ny.png │ │ │ ├── nz.png │ │ │ ├── px.png │ │ │ ├── py.png │ │ │ └── pz.png │ ├── styles │ │ ├── font │ │ │ ├── OpenSans-ExtraBoldItalic.ttf │ │ │ ├── Open_Sans │ │ │ │ ├── LICENSE.txt │ │ │ │ ├── OpenSans-Italic-VariableFont_wdth,wght.ttf │ │ │ │ ├── OpenSans-VariableFont_wdth,wght.ttf │ │ │ │ ├── README.txt │ │ │ │ └── static │ │ │ │ │ ├── OpenSans │ │ │ │ │ ├── OpenSans-Bold.ttf │ │ │ │ │ ├── OpenSans-BoldItalic.ttf │ │ │ │ │ ├── OpenSans-ExtraBold.ttf │ │ │ │ │ ├── OpenSans-ExtraBoldItalic.ttf │ │ │ │ │ ├── OpenSans-Italic.ttf │ │ │ │ │ ├── OpenSans-Light.ttf │ │ │ │ │ ├── OpenSans-LightItalic.ttf │ │ │ │ │ ├── OpenSans-Medium.ttf │ │ │ │ │ ├── OpenSans-MediumItalic.ttf │ │ │ │ │ ├── OpenSans-Regular.ttf │ │ │ │ │ ├── OpenSans-SemiBold.ttf │ │ │ │ │ └── OpenSans-SemiBoldItalic.ttf │ │ │ │ │ ├── OpenSans_Condensed │ │ │ │ │ ├── OpenSans_Condensed-Bold.ttf │ │ │ │ │ ├── OpenSans_Condensed-BoldItalic.ttf │ │ │ │ │ ├── OpenSans_Condensed-ExtraBold.ttf │ │ │ │ │ ├── OpenSans_Condensed-ExtraBoldItalic.ttf │ │ │ │ │ ├── OpenSans_Condensed-Italic.ttf │ │ │ │ │ ├── OpenSans_Condensed-Light.ttf │ │ │ │ │ ├── OpenSans_Condensed-LightItalic.ttf │ │ │ │ │ ├── OpenSans_Condensed-Medium.ttf │ │ │ │ │ ├── OpenSans_Condensed-MediumItalic.ttf │ │ │ │ │ ├── OpenSans_Condensed-Regular.ttf │ │ │ │ │ ├── OpenSans_Condensed-SemiBold.ttf │ │ │ │ │ └── OpenSans_Condensed-SemiBoldItalic.ttf │ │ │ │ │ └── OpenSans_SemiCondensed │ │ │ │ │ ├── OpenSans_SemiCondensed-Bold.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-BoldItalic.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-ExtraBold.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-ExtraBoldItalic.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-Italic.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-Light.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-LightItalic.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-Medium.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-MediumItalic.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-Regular.ttf │ │ │ │ │ ├── OpenSans_SemiCondensed-SemiBold.ttf │ │ │ │ │ └── OpenSans_SemiCondensed-SemiBoldItalic.ttf │ │ │ └── Space_Grotesk │ │ │ │ ├── OFL.txt │ │ │ │ ├── README.txt │ │ │ │ ├── SpaceGrotesk-VariableFont_wght.ttf │ │ │ │ └── static │ │ │ │ ├── SpaceGrotesk-Bold.ttf │ │ │ │ ├── SpaceGrotesk-Light.ttf │ │ │ │ ├── SpaceGrotesk-Medium.ttf │ │ │ │ ├── SpaceGrotesk-Regular.ttf │ │ │ │ └── SpaceGrotesk-SemiBold.ttf │ │ └── main.css │ └── textures │ │ ├── bmp01.jpg │ │ ├── bmp01_.jpg │ │ └── tex12.png ├── src │ ├── fonts │ │ └── Roboto-Regular.ttf │ ├── images │ │ └── logos │ │ │ ├── three-icon.png │ │ │ └── webpack-logo.svg │ ├── index.js │ ├── js │ │ ├── View.js │ │ ├── controls │ │ │ └── OrbitControls.js │ │ ├── tsl │ │ │ └── Backdrop.js │ │ └── utils │ │ │ └── webgl-assets.js │ └── template.html └── webpack.config.js └── the-river ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── .prettierrc ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.png ├── styles │ ├── font │ │ ├── OpenSans-ExtraBoldItalic.ttf │ │ ├── Open_Sans │ │ │ ├── LICENSE.txt │ │ │ ├── OpenSans-Italic-VariableFont_wdth,wght.ttf │ │ │ ├── OpenSans-VariableFont_wdth,wght.ttf │ │ │ ├── README.txt │ │ │ └── static │ │ │ │ ├── OpenSans │ │ │ │ ├── OpenSans-Bold.ttf │ │ │ │ ├── OpenSans-BoldItalic.ttf │ │ │ │ ├── OpenSans-ExtraBold.ttf │ │ │ │ ├── OpenSans-ExtraBoldItalic.ttf │ │ │ │ ├── OpenSans-Italic.ttf │ │ │ │ ├── OpenSans-Light.ttf │ │ │ │ ├── OpenSans-LightItalic.ttf │ │ │ │ ├── OpenSans-Medium.ttf │ │ │ │ ├── OpenSans-MediumItalic.ttf │ │ │ │ ├── OpenSans-Regular.ttf │ │ │ │ ├── OpenSans-SemiBold.ttf │ │ │ │ └── OpenSans-SemiBoldItalic.ttf │ │ │ │ ├── OpenSans_Condensed │ │ │ │ ├── OpenSans_Condensed-Bold.ttf │ │ │ │ ├── OpenSans_Condensed-BoldItalic.ttf │ │ │ │ ├── OpenSans_Condensed-ExtraBold.ttf │ │ │ │ ├── OpenSans_Condensed-ExtraBoldItalic.ttf │ │ │ │ ├── OpenSans_Condensed-Italic.ttf │ │ │ │ ├── OpenSans_Condensed-Light.ttf │ │ │ │ ├── OpenSans_Condensed-LightItalic.ttf │ │ │ │ ├── OpenSans_Condensed-Medium.ttf │ │ │ │ ├── OpenSans_Condensed-MediumItalic.ttf │ │ │ │ ├── OpenSans_Condensed-Regular.ttf │ │ │ │ ├── OpenSans_Condensed-SemiBold.ttf │ │ │ │ └── OpenSans_Condensed-SemiBoldItalic.ttf │ │ │ │ └── OpenSans_SemiCondensed │ │ │ │ ├── OpenSans_SemiCondensed-Bold.ttf │ │ │ │ ├── OpenSans_SemiCondensed-BoldItalic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-ExtraBold.ttf │ │ │ │ ├── OpenSans_SemiCondensed-ExtraBoldItalic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-Italic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-Light.ttf │ │ │ │ ├── OpenSans_SemiCondensed-LightItalic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-Medium.ttf │ │ │ │ ├── OpenSans_SemiCondensed-MediumItalic.ttf │ │ │ │ ├── OpenSans_SemiCondensed-Regular.ttf │ │ │ │ ├── OpenSans_SemiCondensed-SemiBold.ttf │ │ │ │ └── OpenSans_SemiCondensed-SemiBoldItalic.ttf │ │ └── Space_Grotesk │ │ │ ├── OFL.txt │ │ │ ├── README.txt │ │ │ ├── SpaceGrotesk-VariableFont_wght.ttf │ │ │ └── static │ │ │ ├── SpaceGrotesk-Bold.ttf │ │ │ ├── SpaceGrotesk-Light.ttf │ │ │ ├── SpaceGrotesk-Medium.ttf │ │ │ ├── SpaceGrotesk-Regular.ttf │ │ │ └── SpaceGrotesk-SemiBold.ttf │ └── main.css └── textures │ ├── radiance_ │ ├── nx.png │ ├── ny.png │ ├── nz.png │ ├── px.png │ ├── py.png │ └── pz.png │ ├── stone-bw.png │ └── stone.jpg ├── src ├── fonts │ └── Roboto-Regular.ttf ├── images │ └── logos │ │ ├── three-icon.png │ │ └── webpack-logo.svg ├── index.js ├── js │ ├── View.js │ ├── tsl │ │ └── River.js │ └── utils │ │ └── webgl-assets.js └── template.html └── webpack.config.js /marcher/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@babel/eslint-parser', 3 | plugins: ['prettier'], 4 | rules: { 5 | 'prettier/prettier': 'error', 6 | }, 7 | env: { 8 | browser: true, 9 | node: true, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /marcher/.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | .DS_Store 3 | .vscode 4 | .idea 5 | .settings 6 | .project 7 | *.tar.gz 8 | *.orig 9 | *.iml 10 | node_modules 11 | dist 12 | __src -------------------------------------------------------------------------------- /marcher/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | progress=true -------------------------------------------------------------------------------- /marcher/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "printWidth": 120, 4 | "semi": true, 5 | "singleQuote": true 6 | } -------------------------------------------------------------------------------- /marcher/README.md: -------------------------------------------------------------------------------- 1 | # tsl 2 | learning tsl 3 | -------------------------------------------------------------------------------- /marcher/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsl.", 3 | "repository": { 4 | "type": "git", 5 | "url": "a tech-test tale" 6 | }, 7 | "version": "1.0.0", 8 | "description": "Space-Paste.", 9 | "main": "index.js", 10 | "author": "Frank Reitberger", 11 | "scripts": { 12 | "build": "del dist && webpack --config ./webpack.config.js --mode production", 13 | "build:debug": "del dist && webpack --config ./webpack.config.js --mode development", 14 | "start": "webpack serve --config ./webpack.config.js --mode development", 15 | "fix-js": "./node_modules/.bin/eslint src --fix" 16 | }, 17 | "babel": {}, 18 | "keywords": [ 19 | "lambdacore", 20 | "three", 21 | "threejs", 22 | "three.js", 23 | "pixi", 24 | "pixijs", 25 | "pixi.js" 26 | ], 27 | "devDependencies": { 28 | "@babel/core": "^7.17.9", 29 | "@babel/eslint-parser": "^7.17.0", 30 | "@babel/plugin-proposal-class-properties": "^7.16.7", 31 | "@babel/preset-env": "^7.16.11", 32 | "babel-loader": "^8.2.4", 33 | "copy-webpack-plugin": "^10.2.4", 34 | "cross-env": "^7.0.3", 35 | "css-loader": "^6.7.1", 36 | "cssnano": "^5.1.7", 37 | "dat.gui": "^0.7.9", 38 | "detect-gpu": "^5.0.16", 39 | "eslint": "^7.0.0", 40 | "eslint-plugin-prettier": "^4.0.0", 41 | "eslint-webpack-plugin": "^2.6.0", 42 | "file-loader": "^6.2.0", 43 | "html-webpack-plugin": "^5.5.0", 44 | "pixi.js": "^7.2.2", 45 | "postcss-loader": "^6.2.1", 46 | "postcss-preset-env": "^7.4.3", 47 | "prettier": "^2.6.2", 48 | "prettier-eslint": "^13.0.0", 49 | "shader-loader": "^1.3.1", 50 | "style-loader": "^3.3.1", 51 | "stylelint": "^14.6.1", 52 | "stylelint-prettier": "^2.0.0", 53 | "stylelint-webpack-plugin": "^3.2.0", 54 | "url-loader": "^4.1.1", 55 | "webpack": "^5.72.0", 56 | "webpack-cli": "^4.9.2", 57 | "webpack-dev-server": "4.8.1" 58 | }, 59 | "dependencies": { 60 | "gsap": "^3.12.2", 61 | "n8ao": "^1.9.2", 62 | "postprocessing": "^6.36.3", 63 | "three": "^0.170.0", 64 | "tweakpane": "^4.0.5" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /marcher/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/favicon.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/1/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/1/nx.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/1/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/1/ny.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/1/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/1/nz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/1/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/1/px.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/1/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/1/py.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/1/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/1/pz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/2/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/2/nx.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/2/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/2/ny.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/2/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/2/nz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/2/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/2/px.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/2/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/2/py.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/2/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/2/pz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/3/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/3/nx.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/3/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/3/ny.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/3/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/3/nz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/3/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/3/px.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/3/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/3/py.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/3/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/3/pz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/4/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/4/nx.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/4/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/4/ny.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/4/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/4/nz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/4/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/4/px.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/4/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/4/py.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/4/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/4/pz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/5/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/5/nx.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/5/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/5/ny.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/5/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/5/nz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/5/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/5/px.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/5/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/5/py.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/5/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/5/pz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/6/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/6/nx.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/6/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/6/ny.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/6/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/6/nz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/6/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/6/px.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/6/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/6/py.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/6/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/6/pz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/7/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/7/nx.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/7/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/7/ny.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/7/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/7/nz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/7/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/7/px.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/7/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/7/py.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/7/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/7/pz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/8/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/8/nx.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/8/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/8/ny.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/8/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/8/nz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/8/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/8/px.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/8/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/8/py.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/8/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/8/pz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/nx.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/ny.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/nz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/px.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/py.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/pz.png -------------------------------------------------------------------------------- /marcher/public/models/envMap/std03/nx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/std03/nx.jpg -------------------------------------------------------------------------------- /marcher/public/models/envMap/std03/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/std03/ny.jpg -------------------------------------------------------------------------------- /marcher/public/models/envMap/std03/nz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/std03/nz.jpg -------------------------------------------------------------------------------- /marcher/public/models/envMap/std03/px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/std03/px.jpg -------------------------------------------------------------------------------- /marcher/public/models/envMap/std03/py.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/std03/py.jpg -------------------------------------------------------------------------------- /marcher/public/models/envMap/std03/pz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/models/envMap/std03/pz.jpg -------------------------------------------------------------------------------- /marcher/public/styles/font/OpenSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/OpenSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/README.txt: -------------------------------------------------------------------------------- 1 | Open Sans Variable Font 2 | ======================= 3 | 4 | This download contains Open Sans as both variable fonts and static fonts. 5 | 6 | Open Sans is a variable font with these axes: 7 | wdth 8 | wght 9 | 10 | This means all the styles are contained in these files: 11 | OpenSans-VariableFont_wdth,wght.ttf 12 | OpenSans-Italic-VariableFont_wdth,wght.ttf 13 | 14 | If your app fully supports variable fonts, you can now pick intermediate styles 15 | that aren’t available as static fonts. Not all apps support variable fonts, and 16 | in those cases you can use the static font files for Open Sans: 17 | static/OpenSans_Condensed/OpenSans_Condensed-Light.ttf 18 | static/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf 19 | static/OpenSans_Condensed/OpenSans_Condensed-Medium.ttf 20 | static/OpenSans_Condensed/OpenSans_Condensed-SemiBold.ttf 21 | static/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf 22 | static/OpenSans_Condensed/OpenSans_Condensed-ExtraBold.ttf 23 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Light.ttf 24 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Regular.ttf 25 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Medium.ttf 26 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBold.ttf 27 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Bold.ttf 28 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBold.ttf 29 | static/OpenSans/OpenSans-Light.ttf 30 | static/OpenSans/OpenSans-Regular.ttf 31 | static/OpenSans/OpenSans-Medium.ttf 32 | static/OpenSans/OpenSans-SemiBold.ttf 33 | static/OpenSans/OpenSans-Bold.ttf 34 | static/OpenSans/OpenSans-ExtraBold.ttf 35 | static/OpenSans_Condensed/OpenSans_Condensed-LightItalic.ttf 36 | static/OpenSans_Condensed/OpenSans_Condensed-Italic.ttf 37 | static/OpenSans_Condensed/OpenSans_Condensed-MediumItalic.ttf 38 | static/OpenSans_Condensed/OpenSans_Condensed-SemiBoldItalic.ttf 39 | static/OpenSans_Condensed/OpenSans_Condensed-BoldItalic.ttf 40 | static/OpenSans_Condensed/OpenSans_Condensed-ExtraBoldItalic.ttf 41 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-LightItalic.ttf 42 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Italic.ttf 43 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-MediumItalic.ttf 44 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBoldItalic.ttf 45 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-BoldItalic.ttf 46 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBoldItalic.ttf 47 | static/OpenSans/OpenSans-LightItalic.ttf 48 | static/OpenSans/OpenSans-Italic.ttf 49 | static/OpenSans/OpenSans-MediumItalic.ttf 50 | static/OpenSans/OpenSans-SemiBoldItalic.ttf 51 | static/OpenSans/OpenSans-BoldItalic.ttf 52 | static/OpenSans/OpenSans-ExtraBoldItalic.ttf 53 | 54 | Get started 55 | ----------- 56 | 57 | 1. Install the font files you want to use 58 | 59 | 2. Use your app's font picker to view the font family and all the 60 | available styles 61 | 62 | Learn more about variable fonts 63 | ------------------------------- 64 | 65 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts 66 | https://variablefonts.typenetwork.com 67 | https://medium.com/variable-fonts 68 | 69 | In desktop apps 70 | 71 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc 72 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts 73 | 74 | Online 75 | 76 | https://developers.google.com/fonts/docs/getting_started 77 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide 78 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts 79 | 80 | Installing fonts 81 | 82 | MacOS: https://support.apple.com/en-us/HT201749 83 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux 84 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows 85 | 86 | Android Apps 87 | 88 | https://developers.google.com/fonts/docs/android 89 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts 90 | 91 | License 92 | ------- 93 | Please read the full license text (LICENSE.txt) to understand the permissions, 94 | restrictions and requirements for usage, redistribution, and modification. 95 | 96 | You can use them in your products & projects – print or digital, 97 | commercial or otherwise. 98 | 99 | This isn't legal advice, please consider consulting a lawyer and see the full 100 | license for all details. 101 | -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Bold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-BoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Italic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Light.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-LightItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Medium.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-MediumItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-BoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Italic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Light.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-LightItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Medium.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-MediumItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Bold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-BoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Italic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Light.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-LightItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Medium.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-MediumItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Regular.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Space_Grotesk/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /marcher/public/styles/font/Space_Grotesk/README.txt: -------------------------------------------------------------------------------- 1 | Space Grotesk Variable Font 2 | =========================== 3 | 4 | This download contains Space Grotesk as both a variable font and static fonts. 5 | 6 | Space Grotesk is a variable font with this axis: 7 | wght 8 | 9 | This means all the styles are contained in a single file: 10 | SpaceGrotesk-VariableFont_wght.ttf 11 | 12 | If your app fully supports variable fonts, you can now pick intermediate styles 13 | that aren’t available as static fonts. Not all apps support variable fonts, and 14 | in those cases you can use the static font files for Space Grotesk: 15 | static/SpaceGrotesk-Light.ttf 16 | static/SpaceGrotesk-Regular.ttf 17 | static/SpaceGrotesk-Medium.ttf 18 | static/SpaceGrotesk-SemiBold.ttf 19 | static/SpaceGrotesk-Bold.ttf 20 | 21 | Get started 22 | ----------- 23 | 24 | 1. Install the font files you want to use 25 | 26 | 2. Use your app's font picker to view the font family and all the 27 | available styles 28 | 29 | Learn more about variable fonts 30 | ------------------------------- 31 | 32 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts 33 | https://variablefonts.typenetwork.com 34 | https://medium.com/variable-fonts 35 | 36 | In desktop apps 37 | 38 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc 39 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts 40 | 41 | Online 42 | 43 | https://developers.google.com/fonts/docs/getting_started 44 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide 45 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts 46 | 47 | Installing fonts 48 | 49 | MacOS: https://support.apple.com/en-us/HT201749 50 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux 51 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows 52 | 53 | Android Apps 54 | 55 | https://developers.google.com/fonts/docs/android 56 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts 57 | 58 | License 59 | ------- 60 | Please read the full license text (OFL.txt) to understand the permissions, 61 | restrictions and requirements for usage, redistribution, and modification. 62 | 63 | You can use them in your products & projects – print or digital, 64 | commercial or otherwise. 65 | 66 | This isn't legal advice, please consider consulting a lawyer and see the full 67 | license for all details. 68 | -------------------------------------------------------------------------------- /marcher/public/styles/font/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Bold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Light.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Medium.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Regular.ttf -------------------------------------------------------------------------------- /marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/public/styles/font/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf -------------------------------------------------------------------------------- /marcher/public/styles/main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); 2 | @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap'); 3 | @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@800&display=swap'); 4 | 5 | html, body { 6 | margin: 0px; 7 | padding: 0px; 8 | overflow-x:hidden; 9 | overflow-y:hidden; 10 | background: #000; 11 | font-family: 'Cinzel', sans-serif; 12 | color: #fff; 13 | line-height: 1.1; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | body{ 19 | overflow: hidden; 20 | background:pink; 21 | } 22 | 23 | a { 24 | font-weight: bold; 25 | text-decoration: none; 26 | color: inherit; 27 | } 28 | 29 | .pixiBase { 30 | width:100%; 31 | height:100%; 32 | margin:0; 33 | padding:0; 34 | overflow:hidden; 35 | position:absolute; 36 | top:0; 37 | left:0; 38 | background:yellow; 39 | z-index:2; 40 | } 41 | 42 | .threeBase { 43 | width:100%; 44 | height:100%; 45 | margin:0; 46 | padding:0; 47 | overflow:hidden; 48 | position:absolute; 49 | top:0; 50 | left:0; 51 | background:yellow; 52 | z-index:2; 53 | } 54 | 55 | .textOverlay { 56 | position:absolute; 57 | display:block; 58 | width:100%; 59 | height:50px; 60 | color:white; 61 | margin:0; 62 | padding-left:10px; 63 | padding-top:10px; 64 | z-index:2; 65 | overflow:hidden; 66 | } 67 | 68 | .guiBase { 69 | width:300px; 70 | margin:0; 71 | padding:0; 72 | overflow:hidden; 73 | position:absolute; 74 | top:0; 75 | right:0; 76 | z-index:10; 77 | overflow:hidden; 78 | } 79 | 80 | .loader { 81 | margin:0; 82 | padding:0; 83 | overflow:hidden; 84 | position:absolute; 85 | z-index:16; 86 | background: rgb(96,147,174); 87 | background: linear-gradient(30deg, rgba(147,165,207,1) 0%, rgba(228,239,233,1) 100%); 88 | bottom: 0; 89 | left: 0; 90 | overflow: hidden; 91 | position: fixed; 92 | right: 0; 93 | top: 0; 94 | color:black; 95 | } 96 | 97 | #app { 98 | position: absolute; 99 | top: 50%; 100 | left: 50%; 101 | -webkit-transform: translate(-50%, -50%); 102 | transform: translate(-50%, -50%); 103 | width: 150px; 104 | height: 45px; 105 | } 106 | 107 | #percentage { 108 | position: absolute; 109 | width: 100%; 110 | height: 100%; 111 | z-index:2; 112 | text-align: center; 113 | font-size: x-small; 114 | padding-top:14%; 115 | color:#F5E9F1; 116 | text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.2); 117 | } 118 | 119 | #container { 120 | width: 70px; 121 | height: 35px; 122 | overflow: hidden; 123 | position: absolute; 124 | top: calc(50% - 17px); 125 | left: calc(50% - 35px); 126 | } 127 | 128 | #loaderBase { 129 | width: 70px; 130 | height: 70px; 131 | border-style: solid; 132 | border-top-color: #F5E9F1; 133 | border-right-color: #F5E9F1; 134 | border-left-color: transparent; 135 | border-bottom-color: transparent; 136 | border-radius: 50%; 137 | box-sizing: border-box; 138 | animation: rotate 3s ease-in-out infinite; 139 | transform: rotate(-200deg) 140 | } 141 | 142 | @keyframes rotate { 143 | 0% { border-width: 10px; } 144 | 25% { border-width: 3px; } 145 | 50% { 146 | transform: rotate(15deg); 147 | border-width: 10px; 148 | } 149 | 75% { border-width: 3px;} 150 | 100% { border-width: 10px;} 151 | } 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | #ui { 160 | display: flex; 161 | pointer-events: none; 162 | position: absolute; 163 | left: 0; 164 | top: 0; 165 | right: 0; 166 | bottom: 0; 167 | flex-direction: column; 168 | padding: 1.5em; 169 | gap: 1.5em; 170 | z-index: 14; 171 | } 172 | 173 | #info { 174 | color: white; 175 | text-shadow: 1px 1px black; 176 | border-radius: 1em; 177 | margin-right: 0.5em; 178 | } 179 | 180 | #info a { 181 | color: inherit; 182 | } 183 | 184 | #info p span { 185 | margin-right: 0.5em; 186 | } 187 | 188 | #info p:last-child { 189 | margin-bottom: 0; 190 | } 191 | 192 | .contrast #info *, 193 | .contrast footer * { 194 | text-shadow: none; 195 | color: black; 196 | } 197 | 198 | .contrast #info button { 199 | border-color: black; 200 | } 201 | 202 | .contrast #info button:hover { 203 | background-color: rgb(80, 80, 80); 204 | color: white; 205 | } 206 | 207 | .ultrahigh #info { 208 | background-color: rgba(255, 255, 255, 0.9); 209 | } 210 | 211 | #info h1 { 212 | font-family: 'Cinzel', sans-serif; 213 | margin-bottom: 0.5em; 214 | font-size: 1.5rem; 215 | } 216 | 217 | #info h2 { 218 | font-family: 'Cinzel', sans-serif; 219 | font-size: 1rem; 220 | } 221 | 222 | #info p { 223 | margin-bottom: 1em; 224 | } 225 | 226 | #info button { 227 | color: inherit; 228 | cursor: pointer; 229 | } 230 | 231 | button { 232 | border: 1px solid white; 233 | outline: none; 234 | background: none; 235 | border-radius: 3px; 236 | padding: 0.5em 1em; 237 | margin-right: 0.5em; 238 | pointer-events: auto; 239 | text-shadow: 1px 1px black; 240 | font-weight: bold; 241 | } 242 | 243 | button:hover, 244 | #info button:hover { 245 | background: linear-gradient(30deg, rgba(147,165,207, 0.75) 0%, rgba(228,239,233, 0.75) 100%); 246 | color: black; 247 | text-shadow: none; 248 | transition: background 1s ease-out; 249 | } 250 | 251 | #info a { 252 | pointer-events: auto; 253 | } 254 | 255 | footer { 256 | color: white; 257 | text-shadow: 1px 1px black; 258 | display: flex; 259 | flex: 1; 260 | align-items: end; 261 | } 262 | 263 | footer a { 264 | pointer-events: auto; 265 | } 266 | 267 | .contact { 268 | padding: 1em; 269 | font-size: 2em; 270 | } 271 | 272 | .vignette { 273 | pointer-events: none; 274 | background: transparent; 275 | height: 100%; 276 | width: 100%; 277 | box-shadow: inset 0 0 100px rgba(0,0,0,0.29); 278 | position: absolute; 279 | z-index:11; 280 | } 281 | 282 | @media (max-width: 500px) { 283 | .github-corner:hover .octo-arm { 284 | animation: none; 285 | } 286 | .github-corner .octo-arm { 287 | animation: octocat-wave 560ms ease-in-out; 288 | } 289 | } 290 | 291 | .tweak { 292 | right:0; 293 | width: 300px; 294 | box-shadow: inset 0 0 100px rgba(0,0,0,0.29); 295 | position: absolute; 296 | z-index:110; 297 | } -------------------------------------------------------------------------------- /marcher/src/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/src/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /marcher/src/images/logos/three-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/marcher/src/images/logos/three-icon.png -------------------------------------------------------------------------------- /marcher/src/images/logos/webpack-logo.svg: -------------------------------------------------------------------------------- 1 | logo-on-white-bg -------------------------------------------------------------------------------- /marcher/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { getGPUTier } from 'detect-gpu'; 3 | import View from "./js/View"; 4 | import { WebGLAssets } from './js/utils/webgl-assets'; 5 | 6 | 7 | /* Define DOM elements */ 8 | const rootElement = document.querySelector('#root'); 9 | const contentElement = document.querySelector('#content-wrapper'); 10 | 11 | let view; 12 | let gpuDetected, render = false; 13 | 14 | 15 | //////////////////////////////////////////////////////////////////// 16 | // initialize //////////////////////// //////////////////////// 17 | //////////////////////////////////////////////////////////////////// 18 | 19 | class App { 20 | 21 | 22 | 23 | //////////////////////////////////////////////////////////////////// 24 | ///// get: GPU info(s) + init //////////////////////// 25 | //////////////////////////////////////////////////////////////////// 26 | 27 | constructor() { 28 | 29 | (async () => { 30 | 31 | const data = await getGPUTier({}); 32 | this.view = new View( rootElement, data ); 33 | 34 | window.addEventListener("resize", this.resize); 35 | 36 | this.gpuDetected = true; 37 | 38 | })(); 39 | 40 | document.addEventListener("canRender", (e) => { 41 | 42 | this.render = true; 43 | 44 | } ); 45 | 46 | } 47 | 48 | 49 | 50 | //////////////////////////////////////////////////////////////////// 51 | ///// resize: core //////////////////////// 52 | //////////////////////////////////////////////////////////////////// 53 | 54 | resize = () => { 55 | if( this.gpuDetected && this.render ) this.view.onWindowResize( window.innerWidth, window.innerHeight ); 56 | } 57 | 58 | } 59 | 60 | const app = new App(); 61 | -------------------------------------------------------------------------------- /marcher/src/js/View.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import * as THREE from 'three/tsl'; 4 | import WebGPU from 'three/addons/capabilities/WebGPU.js'; 5 | import Raymarch from './tsl/Raymarch.js'; 6 | import { WebGLAssets } from './utils/webgl-assets'; 7 | import { TweenMax, Back, Expo, Sine, Bounce, Quad, Cubic } from 'gsap'; 8 | 9 | let scope = null; 10 | 11 | export default class View { 12 | 13 | constructor( rootElement, gpuTiersData ) { 14 | 15 | /* get device pixelratio */ 16 | let ratio = window.devicePixelRatio; 17 | /* set antialising */ 18 | let aa = true; 19 | 20 | if( gpuTiersData.isMobile ) { 21 | 22 | WebGLAssets.isMobile = gpuTiersData.isMobile; 23 | 24 | if (gpuTiersData.tier > 1) { 25 | 26 | if (ratio > 1) { 27 | 28 | ratio = 0.8; 29 | 30 | } else { 31 | 32 | ratio = 0.75; 33 | aa = false; 34 | } 35 | } 36 | 37 | } else { 38 | 39 | aa = true; 40 | if (ratio >= 2) ratio = 1.3; 41 | 42 | } 43 | 44 | 45 | 46 | //////////////////////////////////////////////////////////////////// 47 | // setup: //////////////////////// 48 | // threejs //////////////////////// 49 | //////////////////////////////////////////////////////////////////// 50 | 51 | scope = this; 52 | 53 | this.renderer = new THREE.WebGPURenderer({ 54 | antialias: aa, 55 | preserveDrawingBuffer: false, 56 | alpha: false, 57 | stencil:false, 58 | powerPreference: 'high-performance' 59 | }); 60 | 61 | this.renderer.setPixelRatio( ratio ); 62 | this.renderer.setSize( window.innerWidth, window.innerHeight ); 63 | this.renderer.outputColorSpace = THREE.SRGBColorSpace; 64 | 65 | rootElement.appendChild( this.renderer.domElement ); 66 | 67 | if( gpuTiersData.isMobile ) { 68 | 69 | this.renderer.setPixelRatio = ratio; 70 | } 71 | 72 | this.initView(); 73 | WebGLAssets.loaded = true; 74 | 75 | } 76 | 77 | 78 | 79 | initView() { 80 | 81 | TweenMax.to( document.getElementById("loader"), 2.0, { autoAlpha:0, ease:Sine.easeOut } ); 82 | 83 | this.bg = 0; 84 | this.width = window.innerWidth; 85 | this.height = window.innerHeight; 86 | 87 | this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 ); 88 | this.scene = new THREE.Scene(); 89 | 90 | 91 | //////////////////////////////////////////////////////////////////// 92 | // setup: //////////////////////// 93 | // raymarcher.node //////////////////////// 94 | //////////////////////////////////////////////////////////////////// 95 | 96 | const material = new THREE.MeshBasicNodeMaterial( { color: 0x00ff00 } ); 97 | 98 | this.textureCube = new THREE.CubeTextureLoader() 99 | .setPath( './models/envMap/1/' ) 100 | .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], () => { 101 | 102 | this.textureCube.anisotropy = 32; 103 | 104 | this.plane = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material ); 105 | this.plane.frustumCulled = false; 106 | this.plane.renderOrder = 0; 107 | this.scene.add( this.plane ); 108 | 109 | this.materialParams = { 110 | cubeTex: this.textureCube, 111 | } 112 | 113 | WebGLAssets.shaderParams = this.materialParams; 114 | 115 | this.textureCube1 = new THREE.CubeTextureLoader() 116 | .setPath( './models/envMap/6/' ) 117 | .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], () => { 118 | 119 | this.textureCube1.anisotropy = 32; 120 | WebGLAssets.shaderParams.cubeTex1 = this.textureCube1; 121 | 122 | this.textureCube2 = new THREE.CubeTextureLoader() 123 | .setPath( './models/envMap/8/' ) 124 | .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], () => { 125 | 126 | this.textureCube1.anisotropy = 32; 127 | WebGLAssets.shaderParams.cubeTex2 = this.textureCube2; 128 | 129 | this.raymarch = new Raymarch( material ); 130 | 131 | this.renderer.setAnimationLoop( this.animate ); 132 | 133 | }); 134 | 135 | }); 136 | 137 | }); 138 | 139 | 140 | 141 | //////////////////////////////////////////////////////////////////// 142 | // set: //////////////////////// 143 | // start rendering now //////////////////////// 144 | //////////////////////////////////////////////////////////////////// 145 | 146 | let canRenderEvent = new CustomEvent("canRender", { detail: "" }); 147 | document.dispatchEvent( canRenderEvent ); 148 | 149 | 150 | 151 | //////////////////////////////////////////////////////////////////// 152 | // trigger: (once) //////////////////////// 153 | // resize //////////////////////// 154 | //////////////////////////////////////////////////////////////////// 155 | 156 | this.onWindowResize(window.innerWidth, window.innerHeight); 157 | 158 | } 159 | 160 | 161 | 162 | //////////////////////////////////////////////////////////////////// 163 | // resize //////////////////////// 164 | // renderer, camera, postpro //////////////////////// 165 | //////////////////////////////////////////////////////////////////// 166 | 167 | onWindowResize(vpW, vpH) { 168 | 169 | this.renderer.setSize(vpW, vpH); 170 | 171 | this.camera.aspect = vpW / vpH; 172 | this.camera.updateProjectionMatrix(); 173 | 174 | } 175 | 176 | 177 | //////////////////////////////////////////////////////////////////// 178 | // update //////////////////////// 179 | //////////////////////////////////////////////////////////////////// 180 | 181 | async animate() { 182 | 183 | scope.renderer.render( scope.scene, scope.camera); 184 | 185 | } 186 | 187 | } -------------------------------------------------------------------------------- /marcher/src/js/tsl/Raymarch.js: -------------------------------------------------------------------------------- 1 | 2 | import { 3 | MeshBasicNodeMaterial, 4 | float, 5 | bool, 6 | Loop, 7 | If, 8 | Break, 9 | Fn, 10 | uv, 11 | vec3, 12 | time, 13 | sin, 14 | cos, 15 | min, 16 | mat3, 17 | mat4, 18 | max, 19 | abs, 20 | mix, 21 | equal, 22 | and, 23 | normalize, 24 | dot, 25 | cross, 26 | int, 27 | reflect, 28 | vec2, 29 | exp, 30 | vec4, 31 | refract, 32 | negate, 33 | length, 34 | screenSize, 35 | assign, 36 | mulAssign, 37 | uniform, 38 | cubeTexture, 39 | } from 'three/tsl'; 40 | 41 | import * as THREE from 'three'; 42 | import { WebGLAssets } from '../utils/webgl-assets'; 43 | import {Pane} from 'tweakpane'; 44 | 45 | export default class Raymarch { 46 | 47 | constructor( materialNode ) { 48 | 49 | this.material = materialNode; 50 | 51 | 52 | //////////////////////////////////////////////////////////////////// 53 | // setup: //////////////////////// 54 | // ui for prototyping //////////////////////// 55 | //////////////////////////////////////////////////////////////////// 56 | 57 | const pane = new Pane({container:document.getElementById("tweak")}); 58 | const doWobble = uniform( 0.0 ); 59 | const background = uniform( 0.0 ); 60 | const cubeMap = WebGLAssets.shaderParams.cubeTex; 61 | const cubeMap1 = WebGLAssets.shaderParams.cubeTex1; 62 | const cubeMap2 = WebGLAssets.shaderParams.cubeTex2; 63 | 64 | const b = pane.addBinding( 65 | doWobble, 'value', 66 | {label: 'wobble', min: 0, max: 1, step: 1} 67 | ); 68 | 69 | b.on('change', (ev) => { 70 | doWobble.value = ev.value; 71 | }); 72 | 73 | const c = pane.addBinding( 74 | background, 'value', 75 | {label: 'cubeTexture', min: 0, max: 2, step: 1} 76 | ); 77 | 78 | c.on('change', (ev) => { 79 | background.value = ev.value; 80 | }); 81 | 82 | 83 | 84 | const timer = time; 85 | 86 | const rotX = Fn(([a]) => { 87 | const c = float(cos(a)).toVar(); 88 | const s = float(sin(a)).toVar(); 89 | return mat3(1.0,0.0,0.0,0.0,c,s.negate(),0.0,s,c).toVar(); 90 | }) 91 | 92 | const rotY = Fn(([a]) => { 93 | const c = float(cos(a)).toVar(); 94 | const s = float(sin(a)).toVar(); 95 | return mat3(c,0.0,s,0.0,1.0,0.0,s.negate(),0.0,c).toVar(); 96 | }) 97 | 98 | const rotZ = Fn(([a]) => { 99 | const c = float(cos(a)).toVar(); 100 | const s = float(sin(a)).toVar(); 101 | return mat3(c,s.negate(),0.0,s,c,0.0,0.0,0.0,1.0).toVar(); 102 | }) 103 | 104 | const rot = Fn(([z,a]) => { 105 | const c = float( cos( a ) ).toVar(); 106 | const s = float( sin( a ) ).toVar(); 107 | const ic = float(float(1.0).sub(c) ).toVar(); 108 | 109 | return mat3( ic.mul( z.x ).mul( z.x ).add( c ), ic.mul( z.x ).mul( z.y ).sub( z.z.mul( s ) ), ic.mul( z.z ).mul( z.x ).add( z.y.mul( s ) ), ic.mul( z.x ).mul( z.y ).add( z.z.mul( s ) ), ic.mul( z.y ).mul( z.y ).add( c ), ic.mul( z.y ).mul( z.z ).sub( z.x.mul( s ) ), ic.mul( z.z ).mul( z.x ).sub( z.y.mul( s ) ), ic.mul( z.y ).mul( z.z ).add( z.x.mul( s ) ), ic.mul( z.z ).mul( z.z ).add( c ) ); 110 | }) 111 | 112 | 113 | const smin = Fn(([a, b, k]) => { 114 | const h = max(k.sub(abs(a.sub(b))), 0).div(k) 115 | return min(a, b).sub(h.mul(h).mul(k).mul(0.25)) 116 | }) 117 | 118 | 119 | const sdf = Fn(([pos]) => { 120 | 121 | const d = float( 100.0 ).toVar(); 122 | const p = vec3( pos ).toVar(); 123 | const tp = vec3(0.0).toVar(); 124 | const wobble = float(0.0).toVar(); 125 | const wobbleFactor = float(float(4).negate().addAssign(sin(timer).mul(8))).toVar(); 126 | 127 | const ii = int(0).toVar(); 128 | 129 | ii.addAssign(1.0); 130 | tp.assign(p.mulAssign(rotX(timer.div(ii)))); 131 | tp.mulAssign(rotZ(timer.div(ii))); 132 | 133 | const getWobble = float(doWobble).toVar(); 134 | 135 | If( getWobble.greaterThan(0.0), () => { 136 | 137 | wobble.assign(sin(float(5).add(wobbleFactor).mul(p.x)).mul(sin(float(6).mul(p.y))).mul(sin(float(4).mul(p.z)))).mul(wobbleFactor.mulAssign(0.025)); 138 | tp.x.addAssign(sin(wobble).mul(0.1)); 139 | tp.y.addAssign(sin(wobble).mul(0.12)); 140 | tp.z.addAssign(sin(wobble).mul(0.12)); 141 | 142 | }) 143 | 144 | d.assign( min(d,length( vec2(length(tp.xz).sub(1.0).mul(ii.sub(0.3)), tp.y)).sub(0.1))); 145 | 146 | ii.assign(int(1.0)); 147 | ii.addAssign(1.0); 148 | tp.assign(p.mulAssign(rotX(timer.div(ii)))); 149 | tp.mulAssign(rotZ(timer.div(ii))); 150 | 151 | If( getWobble.greaterThan(0.0), () => { 152 | 153 | wobble.assign(sin(float(5).add(wobbleFactor).mul(p.x)).mul(sin(float(6).mul(p.y))).mul(sin(float(4).mul(p.z)))).mul(wobbleFactor.mulAssign(0.025)); 154 | tp.x.addAssign(sin(wobble).mul(0.15)); 155 | tp.y.addAssign(sin(wobble).mul(0.12)); 156 | 157 | }) 158 | 159 | d.assign( min(d,length( vec2(length(tp.xz).sub(1.2).mul(ii.sub(1.3)), tp.y)).sub(0.1))); 160 | 161 | ii.assign(int(0.0)); 162 | ii.addAssign(1.0); 163 | tp.assign(p.mulAssign(rotX(timer.div(ii)))); 164 | tp.mulAssign(rotZ(timer.div(ii))); 165 | 166 | If( getWobble.greaterThan(0.0), () => { 167 | 168 | wobble.assign(sin(float(5).add(wobbleFactor).mul(p.x)).mul(sin(float(6).mul(p.y))).mul(sin(float(4).mul(p.z)))).mul(wobbleFactor.mulAssign(0.025)); 169 | tp.x.addAssign(sin(wobble).mul(0.1)); 170 | tp.z.addAssign(sin(wobble).mul(0.1)); 171 | 172 | }) 173 | 174 | d.assign( min(d,length( vec2(length(tp.xz).sub(0.5).mul(ii.sub(2.5)), tp.y)).sub(0.1))); 175 | 176 | ii.assign(int(1.0)); 177 | ii.addAssign(1.0); 178 | tp.assign(p.mulAssign(rotX(timer.div(ii)))); 179 | tp.mulAssign(rotZ(timer.div(ii))); 180 | 181 | If( getWobble.greaterThan(0.0), () => { 182 | 183 | wobble.assign(sin(float(5).add(wobbleFactor).mul(p.x)).mul(sin(float(6).mul(p.y))).mul(sin(float(4).mul(p.z)))).mul(wobbleFactor.mulAssign(0.025));/*.mul(sin(float(30).mul(p.y))).mul(sin(float(30).mul(p.z))).mul(wobbleFactor.mulAssign(0.025))*/; 184 | tp.y.addAssign(sin(wobble).mul(0.1)); 185 | tp.z.addAssign(sin(wobble).mul(0.1)); 186 | 187 | }) 188 | 189 | d.assign( min(d,length( vec2(length(tp.xz).sub(0.8).mul(ii.sub(3.5)), tp.y)).sub(0.1))); 190 | 191 | 192 | return d; 193 | }) 194 | 195 | 196 | const normalCalculation = Fn( ( [ p_immutable, d_immutable ] ) => { 197 | 198 | const d = float( 0.0 ).toVar(); 199 | d.addAssign(d_immutable); 200 | const p = vec3( 0.0 ).toVar(); 201 | p.assign(p_immutable); 202 | const s = vec3( 0.1, 0.0, 0.0 ).toVar(); 203 | 204 | return normalize( vec3( sdf( p.add( s.xyy.sub( d ) ) ), sdf( p.add( s.yxy.sub( d ) ) ), sdf( p.add( s.yyx.sub( d ) ) ) ) ); 205 | 206 | } ) 207 | 208 | 209 | const raymarch = Fn(() => { 210 | 211 | const _uv = uv().mul(screenSize.xy).mul(2).sub(screenSize.xy).div(screenSize.y); 212 | 213 | const upVec = vec3(0.0,-1.0,0.0).toVar(); 214 | const lookPos = vec3(0.0,0.0,0.0).toVar(); 215 | const eyePos = vec3(0.0,0.0,-2.4).toVar(); 216 | 217 | eyePos.mulAssign(rotX(sin(timer.mul(0.5)))); 218 | eyePos.mulAssign(rotY(sin(timer.mul(0.5)))); 219 | 220 | const rayVec = vec3(normalize(lookPos.sub(eyePos))).toVar(); 221 | 222 | const leftVec = vec3(normalize(cross(upVec,rayVec))).toVar(); 223 | const eyeUpVec = vec3(normalize(cross(rayVec,leftVec))).toVar(); 224 | 225 | rayVec.mulAssign(rot(eyeUpVec, _uv.x.mul(0.7))); 226 | rayVec.mulAssign(rot(leftVec, _uv.y.mul(1.0))); 227 | 228 | const rayPos = vec3(0.0).toVar(); 229 | rayPos.assign(eyePos); 230 | const attenuation = vec4(1.0).toVar(); 231 | const color = vec4(1.0,0.95,1.0,1.0).toVar(); 232 | const hit = bool( false ).toVar(); 233 | 234 | 235 | const marchLen = float(0.0).toVar(); 236 | 237 | Loop({ start: 1, end: 100 }, () => { 238 | 239 | const d = sdf(rayPos).toVar(); 240 | 241 | If( d.lessThan(0.0).and( hit.equal( false ) ), () => { 242 | hit.assign( true ); 243 | const n = normalCalculation( rayPos, d ).toVec3(); 244 | rayVec.assign( refract( rayVec, n, 0.66666666666 ) ); 245 | attenuation.mulAssign( color.mul( abs( dot( rayVec, n ) ) ) ); 246 | 247 | }).ElseIf( d.greaterThan( 0.0 ).and( hit.equal( true ) ), () => { 248 | hit.assign( false ); 249 | const n = normalCalculation( rayPos, d ).toVec3(); 250 | rayVec.assign( refract( rayVec, n.negate(), 0.66666666666 ) ); 251 | attenuation.mulAssign( color.mul( abs( dot( rayVec, n ) ) ) ); 252 | } ); 253 | 254 | marchLen.assign( max( 0.001, abs( d ) ) ); 255 | rayPos.addAssign( rayVec.mul(marchLen)); 256 | 257 | }) 258 | 259 | const finalColor = cubeTexture(cubeMap1, rayVec).toVar(); 260 | const getBackground = float(background).toVar(); 261 | 262 | If( getBackground.lessThan(1.0), () => { 263 | 264 | finalColor.assign(cubeTexture(cubeMap, rayVec)); 265 | 266 | }).ElseIf( getBackground.greaterThan( 1.0 ), () => { 267 | 268 | finalColor.assign(cubeTexture(cubeMap2, rayVec)); 269 | 270 | }); 271 | 272 | return finalColor.mulAssign(attenuation); 273 | 274 | })() 275 | 276 | this.material.colorNode = raymarch; 277 | 278 | } 279 | 280 | } -------------------------------------------------------------------------------- /marcher/src/js/utils/webgl-assets.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export class WebGLAssets { 4 | 5 | static loaded = true; 6 | static dictionary = {}; 7 | static intro = true; 8 | static isMobile = false; 9 | 10 | static position = null; 11 | static vUv = null; 12 | static position = null; 13 | static plane = null; 14 | static debris = null; 15 | 16 | } 17 | -------------------------------------------------------------------------------- /marcher/src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
0% 
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |

Tinker Day #24

25 |

Rings Of Power.

26 |
27 | 28 |
29 |
30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /marcher/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | const artifact = require('./package.json'); 6 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 7 | //const ESLintPlugin = require('eslint-webpack-plugin'); 8 | 9 | const fileName = `${artifact.name}-${artifact.version.slice(0, 3)}`; 10 | 11 | module.exports = (env, argv) => ({ 12 | entry: { 13 | [fileName]: './src/index.js', 14 | }, 15 | output: { 16 | filename: '[name].[fullhash].bundle.js', 17 | path: path.resolve(__dirname, 'dist'), 18 | publicPath: '', 19 | }, 20 | devServer: { 21 | historyApiFallback: true, 22 | open: true, 23 | compress: true, 24 | port: 8080, 25 | }, 26 | module: { 27 | rules: [ 28 | { 29 | test: /\.(css)$/, 30 | use: [ 31 | { loader: 'style-loader' }, 32 | { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } } 33 | ], 34 | }, 35 | { 36 | test: /\.js$/, 37 | exclude: /(node_modules)/, 38 | use: ['babel-loader'], 39 | }, 40 | { 41 | test: /\.(?:ico|gif|png|jpg|jpeg|webp|svg|stl)$/i, 42 | loader: 'file-loader', 43 | options: { 44 | name: '[path][name].[ext]', 45 | context: 'src', // prevent display of src/ in filename 46 | }, 47 | }, 48 | { 49 | test: /\.(woff(2)?|eot|ttf|otf|)$/, 50 | loader: 'url-loader', 51 | options: { 52 | limit: 8192, 53 | name: '[path][name].[ext]', 54 | context: 'src', // prevent display of src/ in filename 55 | }, 56 | }, 57 | ], 58 | }, 59 | plugins: [ 60 | new webpack.HotModuleReplacementPlugin(), 61 | /*new ESLintPlugin(),*/ 62 | new CopyWebpackPlugin({ 63 | patterns: [{ from: path.resolve(__dirname, 'public'), to: path.resolve(__dirname, 'dist') }], 64 | }), 65 | new HtmlWebpackPlugin({ 66 | title: 'Learning TSL: Rings of power.', 67 | favicon: path.resolve(__dirname, 'public/favicon.png'), 68 | template: path.resolve(__dirname, 'src/template.html'), // template file 69 | filename: 'index.html', // output file 70 | }), 71 | ], 72 | devtool: 'eval-source-map', 73 | performance: { 74 | hints: false, 75 | maxEntrypointSize: 512000, 76 | maxAssetSize: 512000, 77 | }, 78 | }); 79 | -------------------------------------------------------------------------------- /scenic-backdrop/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@babel/eslint-parser', 3 | plugins: ['prettier'], 4 | rules: { 5 | 'prettier/prettier': 'error', 6 | }, 7 | env: { 8 | browser: true, 9 | node: true, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /scenic-backdrop/.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | .DS_Store 3 | .vscode 4 | .idea 5 | .settings 6 | .project 7 | *.tar.gz 8 | *.orig 9 | *.iml 10 | node_modules 11 | dist 12 | __src -------------------------------------------------------------------------------- /scenic-backdrop/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | progress=true -------------------------------------------------------------------------------- /scenic-backdrop/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "printWidth": 120, 4 | "semi": true, 5 | "singleQuote": true 6 | } -------------------------------------------------------------------------------- /scenic-backdrop/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Installation 4 | 5 | ``` 6 | git clone the/path/to/our/actual/core/repo 7 | npm i 8 | ``` 9 | 10 | ## Usage 11 | 12 | ### Development server 13 | 14 | ```bash 15 | npm start 16 | ``` 17 | 18 | You can view the development server at `localhost:8080`. 19 | 20 | ### Production build 21 | 22 | ```bash 23 | npm run build 24 | ``` 25 | 26 | > Note: Install [http-server](https://www.npmjs.com/package/http-server) globally to deploy a simple server. 27 | 28 | ```bash 29 | npm i -g http-server 30 | ``` 31 | 32 | You can view the deploy by creating a server in `dist`. 33 | 34 | ```bash 35 | cd dist && http-server 36 | ``` 37 | 38 | ### Fix lint issues 39 | 40 | #### Javascript 41 | 42 | ```bash 43 | npm run fix-js 44 | ``` 45 | 46 | #### SCSS/CSS 47 | 48 | ```bash 49 | npm run fix-styling 50 | ``` 51 | 52 | ## Features 53 | 54 | - [Three.js](https://threejs.org/) 55 | - [Webpack](https://webpack.js.org/) 56 | - [Babel](https://babeljs.io/) 57 | - [ESLint](https://eslint.org/) 58 | - [stylelint](https://stylelint.io/) 59 | 60 | ## Dependencies 61 | 62 | ### Three.js 63 | 64 | - [`Three.js`](https://github.com/mrdoob/three.js) - Three.js framework. 65 | 66 | ### Webpack 67 | 68 | - [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler. 69 | - [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for Webpack. 70 | - [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for Webpack. 71 | 72 | ### Babel 73 | 74 | - [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript. 75 | - [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel. 76 | - [`babel-eslint`](https://github.com/babel/babel-eslint) - Lint Babel code. 77 | - [`babel-polyfill`](https://babeljs.io/docs/en/babel-polyfill) - This will emulate a full ES2015+ environment. 78 | - [`eslint`](https://github.com/eslint/eslint) - ESLint. 79 | 80 | ### Loaders 81 | 82 | - [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and Webpack. 83 | - [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS. 84 | - [`cssnano`](https://github.com/cssnano/cssnano) - Optimize and compress PostCSS. 85 | - [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Sensible defaults for PostCSS. 86 | - [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolves CSS imports into JS. 87 | - [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM. 88 | - [`file-loader`](https://webpack.js.org/loaders/file-loader/) - Copy files to build folder. 89 | - [`url-loader`](https://webpack.js.org/loaders/url-loader/) - Encode and inline files. Falls back to file-loader. 90 | 91 | ### Plugins 92 | 93 | - [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders. 94 | - [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) - Copy files to build directory. 95 | - [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template. 96 | - [`stylelint-webpack-plugin`](https://github.com/webpack-contrib/stylelint-webpack-plugin) - A Stylelint plugin for webpack. 97 | 98 | ## Author & Contributors 99 | 100 | - [`Frank Reitberger`](https://github.com/prinzipiell) 101 | 102 | -------------------------------------------------------------------------------- /scenic-backdrop/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Scenic-Backdrop.", 3 | "repository": { 4 | "type": "git", 5 | "url": "a tech-test tale" 6 | }, 7 | "version": "1.0.0", 8 | "description": "Scenic-Backdrop.", 9 | "main": "index.js", 10 | "author": "Frank Reitberger", 11 | "scripts": { 12 | "build": "del dist && webpack --config ./webpack.config.js --mode production", 13 | "build:debug": "del dist && webpack --config ./webpack.config.js --mode development", 14 | "start": "webpack serve --config ./webpack.config.js --mode development", 15 | "fix-js": "./node_modules/.bin/eslint src --fix" 16 | }, 17 | "babel": {}, 18 | "keywords": [ 19 | "lambdacore", 20 | "three", 21 | "threejs", 22 | "three.js", 23 | "pixi", 24 | "pixijs", 25 | "pixi.js" 26 | ], 27 | "devDependencies": { 28 | "@babel/core": "^7.17.9", 29 | "@babel/eslint-parser": "^7.17.0", 30 | "@babel/plugin-proposal-class-properties": "^7.16.7", 31 | "@babel/preset-env": "^7.16.11", 32 | "babel-loader": "^8.2.4", 33 | "copy-webpack-plugin": "^10.2.4", 34 | "cross-env": "^7.0.3", 35 | "css-loader": "^6.7.1", 36 | "cssnano": "^5.1.7", 37 | "dat.gui": "^0.7.9", 38 | "detect-gpu": "^5.0.16", 39 | "eslint": "^7.0.0", 40 | "eslint-plugin-prettier": "^4.0.0", 41 | "eslint-webpack-plugin": "^2.6.0", 42 | "file-loader": "^6.2.0", 43 | "html-webpack-plugin": "^5.5.0", 44 | "pixi.js": "^7.2.2", 45 | "postcss-loader": "^6.2.1", 46 | "postcss-preset-env": "^7.4.3", 47 | "prettier": "^2.6.2", 48 | "prettier-eslint": "^13.0.0", 49 | "shader-loader": "^1.3.1", 50 | "style-loader": "^3.3.1", 51 | "stylelint": "^14.6.1", 52 | "stylelint-prettier": "^2.0.0", 53 | "stylelint-webpack-plugin": "^3.2.0", 54 | "url-loader": "^4.1.1", 55 | "webpack": "^5.72.0", 56 | "webpack-cli": "^4.9.2", 57 | "webpack-dev-server": "4.8.1" 58 | }, 59 | "dependencies": { 60 | "gsap": "^3.12.2", 61 | "n8ao": "^1.9.2", 62 | "postprocessing": "^6.36.3", 63 | "three": "^0.170.0", 64 | "tweakpane": "^4.0.5" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /scenic-backdrop/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/favicon.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/1/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/1/nx.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/1/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/1/ny.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/1/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/1/nz.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/1/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/1/px.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/1/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/1/py.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/1/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/1/pz.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/6/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/6/nx.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/6/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/6/ny.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/6/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/6/nz.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/6/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/6/px.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/6/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/6/py.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/6/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/6/pz.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/8/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/8/nx.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/8/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/8/ny.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/8/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/8/nz.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/8/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/8/px.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/8/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/8/py.png -------------------------------------------------------------------------------- /scenic-backdrop/public/models/envMap/8/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/models/envMap/8/pz.png -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/OpenSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/OpenSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/README.txt: -------------------------------------------------------------------------------- 1 | Open Sans Variable Font 2 | ======================= 3 | 4 | This download contains Open Sans as both variable fonts and static fonts. 5 | 6 | Open Sans is a variable font with these axes: 7 | wdth 8 | wght 9 | 10 | This means all the styles are contained in these files: 11 | OpenSans-VariableFont_wdth,wght.ttf 12 | OpenSans-Italic-VariableFont_wdth,wght.ttf 13 | 14 | If your app fully supports variable fonts, you can now pick intermediate styles 15 | that aren’t available as static fonts. Not all apps support variable fonts, and 16 | in those cases you can use the static font files for Open Sans: 17 | static/OpenSans_Condensed/OpenSans_Condensed-Light.ttf 18 | static/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf 19 | static/OpenSans_Condensed/OpenSans_Condensed-Medium.ttf 20 | static/OpenSans_Condensed/OpenSans_Condensed-SemiBold.ttf 21 | static/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf 22 | static/OpenSans_Condensed/OpenSans_Condensed-ExtraBold.ttf 23 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Light.ttf 24 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Regular.ttf 25 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Medium.ttf 26 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBold.ttf 27 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Bold.ttf 28 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBold.ttf 29 | static/OpenSans/OpenSans-Light.ttf 30 | static/OpenSans/OpenSans-Regular.ttf 31 | static/OpenSans/OpenSans-Medium.ttf 32 | static/OpenSans/OpenSans-SemiBold.ttf 33 | static/OpenSans/OpenSans-Bold.ttf 34 | static/OpenSans/OpenSans-ExtraBold.ttf 35 | static/OpenSans_Condensed/OpenSans_Condensed-LightItalic.ttf 36 | static/OpenSans_Condensed/OpenSans_Condensed-Italic.ttf 37 | static/OpenSans_Condensed/OpenSans_Condensed-MediumItalic.ttf 38 | static/OpenSans_Condensed/OpenSans_Condensed-SemiBoldItalic.ttf 39 | static/OpenSans_Condensed/OpenSans_Condensed-BoldItalic.ttf 40 | static/OpenSans_Condensed/OpenSans_Condensed-ExtraBoldItalic.ttf 41 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-LightItalic.ttf 42 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Italic.ttf 43 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-MediumItalic.ttf 44 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBoldItalic.ttf 45 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-BoldItalic.ttf 46 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBoldItalic.ttf 47 | static/OpenSans/OpenSans-LightItalic.ttf 48 | static/OpenSans/OpenSans-Italic.ttf 49 | static/OpenSans/OpenSans-MediumItalic.ttf 50 | static/OpenSans/OpenSans-SemiBoldItalic.ttf 51 | static/OpenSans/OpenSans-BoldItalic.ttf 52 | static/OpenSans/OpenSans-ExtraBoldItalic.ttf 53 | 54 | Get started 55 | ----------- 56 | 57 | 1. Install the font files you want to use 58 | 59 | 2. Use your app's font picker to view the font family and all the 60 | available styles 61 | 62 | Learn more about variable fonts 63 | ------------------------------- 64 | 65 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts 66 | https://variablefonts.typenetwork.com 67 | https://medium.com/variable-fonts 68 | 69 | In desktop apps 70 | 71 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc 72 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts 73 | 74 | Online 75 | 76 | https://developers.google.com/fonts/docs/getting_started 77 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide 78 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts 79 | 80 | Installing fonts 81 | 82 | MacOS: https://support.apple.com/en-us/HT201749 83 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux 84 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows 85 | 86 | Android Apps 87 | 88 | https://developers.google.com/fonts/docs/android 89 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts 90 | 91 | License 92 | ------- 93 | Please read the full license text (LICENSE.txt) to understand the permissions, 94 | restrictions and requirements for usage, redistribution, and modification. 95 | 96 | You can use them in your products & projects – print or digital, 97 | commercial or otherwise. 98 | 99 | This isn't legal advice, please consider consulting a lawyer and see the full 100 | license for all details. 101 | -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Bold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-BoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Italic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Light.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-LightItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Medium.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-MediumItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-BoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Italic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Light.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-LightItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Medium.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-MediumItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Bold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-BoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Italic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Light.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-LightItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Medium.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-MediumItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Regular.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Space_Grotesk/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Space_Grotesk/README.txt: -------------------------------------------------------------------------------- 1 | Space Grotesk Variable Font 2 | =========================== 3 | 4 | This download contains Space Grotesk as both a variable font and static fonts. 5 | 6 | Space Grotesk is a variable font with this axis: 7 | wght 8 | 9 | This means all the styles are contained in a single file: 10 | SpaceGrotesk-VariableFont_wght.ttf 11 | 12 | If your app fully supports variable fonts, you can now pick intermediate styles 13 | that aren’t available as static fonts. Not all apps support variable fonts, and 14 | in those cases you can use the static font files for Space Grotesk: 15 | static/SpaceGrotesk-Light.ttf 16 | static/SpaceGrotesk-Regular.ttf 17 | static/SpaceGrotesk-Medium.ttf 18 | static/SpaceGrotesk-SemiBold.ttf 19 | static/SpaceGrotesk-Bold.ttf 20 | 21 | Get started 22 | ----------- 23 | 24 | 1. Install the font files you want to use 25 | 26 | 2. Use your app's font picker to view the font family and all the 27 | available styles 28 | 29 | Learn more about variable fonts 30 | ------------------------------- 31 | 32 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts 33 | https://variablefonts.typenetwork.com 34 | https://medium.com/variable-fonts 35 | 36 | In desktop apps 37 | 38 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc 39 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts 40 | 41 | Online 42 | 43 | https://developers.google.com/fonts/docs/getting_started 44 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide 45 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts 46 | 47 | Installing fonts 48 | 49 | MacOS: https://support.apple.com/en-us/HT201749 50 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux 51 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows 52 | 53 | Android Apps 54 | 55 | https://developers.google.com/fonts/docs/android 56 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts 57 | 58 | License 59 | ------- 60 | Please read the full license text (OFL.txt) to understand the permissions, 61 | restrictions and requirements for usage, redistribution, and modification. 62 | 63 | You can use them in your products & projects – print or digital, 64 | commercial or otherwise. 65 | 66 | This isn't legal advice, please consider consulting a lawyer and see the full 67 | license for all details. 68 | -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Bold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Light.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Medium.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Regular.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/styles/font/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf -------------------------------------------------------------------------------- /scenic-backdrop/public/styles/main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); 2 | @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap'); 3 | @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@800&display=swap'); 4 | 5 | html, body { 6 | margin: 0px; 7 | padding: 0px; 8 | overflow-x:hidden; 9 | overflow-y:hidden; 10 | background: #000; 11 | font-family: 'Cinzel', sans-serif; 12 | color: #fff; 13 | line-height: 1.1; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | body{ 19 | overflow: hidden; 20 | background:pink; 21 | } 22 | 23 | a { 24 | font-weight: bold; 25 | text-decoration: none; 26 | color: inherit; 27 | } 28 | 29 | .pixiBase { 30 | width:100%; 31 | height:100%; 32 | margin:0; 33 | padding:0; 34 | overflow:hidden; 35 | position:absolute; 36 | top:0; 37 | left:0; 38 | background:yellow; 39 | z-index:2; 40 | } 41 | 42 | .threeBase { 43 | width:100%; 44 | height:100%; 45 | margin:0; 46 | padding:0; 47 | overflow:hidden; 48 | position:absolute; 49 | top:0; 50 | left:0; 51 | background:yellow; 52 | z-index:2; 53 | } 54 | 55 | .textOverlay { 56 | position:absolute; 57 | display:block; 58 | width:100%; 59 | height:50px; 60 | color:white; 61 | margin:0; 62 | padding-left:10px; 63 | padding-top:10px; 64 | z-index:2; 65 | overflow:hidden; 66 | } 67 | 68 | .guiBase { 69 | width:300px; 70 | margin:0; 71 | padding:0; 72 | overflow:hidden; 73 | position:absolute; 74 | top:0; 75 | right:0; 76 | z-index:10; 77 | overflow:hidden; 78 | } 79 | 80 | .loader { 81 | margin:0; 82 | padding:0; 83 | overflow:hidden; 84 | position:absolute; 85 | z-index:16; 86 | background: rgb(96,147,174); 87 | background: linear-gradient(30deg, rgba(147,165,207,1) 0%, rgba(228,239,233,1) 100%); 88 | bottom: 0; 89 | left: 0; 90 | overflow: hidden; 91 | position: fixed; 92 | right: 0; 93 | top: 0; 94 | color:black; 95 | } 96 | 97 | #app { 98 | position: absolute; 99 | top: 50%; 100 | left: 50%; 101 | -webkit-transform: translate(-50%, -50%); 102 | transform: translate(-50%, -50%); 103 | width: 150px; 104 | height: 45px; 105 | } 106 | 107 | #percentage { 108 | position: absolute; 109 | width: 100%; 110 | height: 100%; 111 | z-index:2; 112 | text-align: center; 113 | font-size: x-small; 114 | padding-top:14%; 115 | color:#F5E9F1; 116 | text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.2); 117 | } 118 | 119 | #container { 120 | width: 70px; 121 | height: 35px; 122 | overflow: hidden; 123 | position: absolute; 124 | top: calc(50% - 17px); 125 | left: calc(50% - 35px); 126 | } 127 | 128 | #loaderBase { 129 | width: 70px; 130 | height: 70px; 131 | border-style: solid; 132 | border-top-color: #F5E9F1; 133 | border-right-color: #F5E9F1; 134 | border-left-color: transparent; 135 | border-bottom-color: transparent; 136 | border-radius: 50%; 137 | box-sizing: border-box; 138 | animation: rotate 3s ease-in-out infinite; 139 | transform: rotate(-200deg) 140 | } 141 | 142 | @keyframes rotate { 143 | 0% { border-width: 10px; } 144 | 25% { border-width: 3px; } 145 | 50% { 146 | transform: rotate(15deg); 147 | border-width: 10px; 148 | } 149 | 75% { border-width: 3px;} 150 | 100% { border-width: 10px;} 151 | } 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | #ui { 160 | display: flex; 161 | pointer-events: none; 162 | position: absolute; 163 | left: 0; 164 | top: 0; 165 | right: 0; 166 | bottom: 0; 167 | flex-direction: column; 168 | padding: 1.5em; 169 | gap: 1.5em; 170 | z-index: 14; 171 | } 172 | 173 | #info { 174 | color: white; 175 | text-shadow: 1px 1px black; 176 | border-radius: 1em; 177 | margin-right: 0.5em; 178 | } 179 | 180 | #info a { 181 | color: inherit; 182 | } 183 | 184 | #info p span { 185 | margin-right: 0.5em; 186 | } 187 | 188 | #info p:last-child { 189 | margin-bottom: 0; 190 | } 191 | 192 | .contrast #info *, 193 | .contrast footer * { 194 | text-shadow: none; 195 | color: black; 196 | } 197 | 198 | .contrast #info button { 199 | border-color: black; 200 | } 201 | 202 | .contrast #info button:hover { 203 | background-color: rgb(80, 80, 80); 204 | color: white; 205 | } 206 | 207 | .ultrahigh #info { 208 | background-color: rgba(255, 255, 255, 0.9); 209 | } 210 | 211 | #info h1 { 212 | font-family: 'Cinzel', sans-serif; 213 | margin-bottom: 0.5em; 214 | font-size: 1.5rem; 215 | } 216 | 217 | #info h2 { 218 | font-family: 'Cinzel', sans-serif; 219 | font-size: 1rem; 220 | } 221 | 222 | #info p { 223 | margin-bottom: 1em; 224 | } 225 | 226 | #info button { 227 | color: inherit; 228 | cursor: pointer; 229 | } 230 | 231 | button { 232 | border: 1px solid white; 233 | outline: none; 234 | background: none; 235 | border-radius: 3px; 236 | padding: 0.5em 1em; 237 | margin-right: 0.5em; 238 | pointer-events: auto; 239 | text-shadow: 1px 1px black; 240 | font-weight: bold; 241 | } 242 | 243 | button:hover, 244 | #info button:hover { 245 | background: linear-gradient(30deg, rgba(147,165,207, 0.75) 0%, rgba(228,239,233, 0.75) 100%); 246 | color: black; 247 | text-shadow: none; 248 | transition: background 1s ease-out; 249 | } 250 | 251 | #info a { 252 | pointer-events: auto; 253 | } 254 | 255 | footer { 256 | color: white; 257 | text-shadow: 1px 1px black; 258 | display: flex; 259 | flex: 1; 260 | align-items: end; 261 | } 262 | 263 | footer a { 264 | pointer-events: auto; 265 | } 266 | 267 | .contact { 268 | padding: 1em; 269 | font-size: 2em; 270 | } 271 | 272 | .vignette { 273 | pointer-events: none; 274 | background: transparent; 275 | height: 100%; 276 | width: 100%; 277 | box-shadow: inset 0 0 100px rgba(0,0,0,0.39); 278 | position: absolute; 279 | z-index:11; 280 | } 281 | 282 | @media (max-width: 500px) { 283 | .github-corner:hover .octo-arm { 284 | animation: none; 285 | } 286 | .github-corner .octo-arm { 287 | animation: octocat-wave 560ms ease-in-out; 288 | } 289 | } 290 | 291 | .tweak { 292 | right:0; 293 | width: 300px; 294 | box-shadow: inset 0 0 100px rgba(0,0,0,0.29); 295 | position: absolute; 296 | z-index:110; 297 | } -------------------------------------------------------------------------------- /scenic-backdrop/public/textures/bmp01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/textures/bmp01.jpg -------------------------------------------------------------------------------- /scenic-backdrop/public/textures/bmp01_.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/textures/bmp01_.jpg -------------------------------------------------------------------------------- /scenic-backdrop/public/textures/tex12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/public/textures/tex12.png -------------------------------------------------------------------------------- /scenic-backdrop/src/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/src/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /scenic-backdrop/src/images/logos/three-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/scenic-backdrop/src/images/logos/three-icon.png -------------------------------------------------------------------------------- /scenic-backdrop/src/images/logos/webpack-logo.svg: -------------------------------------------------------------------------------- 1 | logo-on-white-bg -------------------------------------------------------------------------------- /scenic-backdrop/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { getGPUTier } from 'detect-gpu'; 3 | import View from "./js/View"; 4 | import { WebGLAssets } from './js/utils/webgl-assets'; 5 | 6 | 7 | /* Define DOM elements */ 8 | const rootElement = document.querySelector('#root'); 9 | const contentElement = document.querySelector('#content-wrapper'); 10 | 11 | let view; 12 | let gpuDetected, render = false; 13 | 14 | 15 | //////////////////////////////////////////////////////////////////// 16 | // initialize //////////////////////// //////////////////////// 17 | //////////////////////////////////////////////////////////////////// 18 | 19 | class App { 20 | 21 | 22 | 23 | //////////////////////////////////////////////////////////////////// 24 | ///// get: GPU info(s) + init //////////////////////// 25 | //////////////////////////////////////////////////////////////////// 26 | 27 | constructor() { 28 | 29 | (async () => { 30 | 31 | const data = await getGPUTier({}); 32 | this.view = new View( rootElement, data ); 33 | 34 | window.addEventListener("resize", this.resize); 35 | 36 | this.gpuDetected = true; 37 | 38 | })(); 39 | 40 | document.addEventListener("canRender", (e) => { 41 | 42 | this.render = true; 43 | 44 | } ); 45 | 46 | } 47 | 48 | 49 | 50 | //////////////////////////////////////////////////////////////////// 51 | ///// resize: core //////////////////////// 52 | //////////////////////////////////////////////////////////////////// 53 | 54 | resize = () => { 55 | if( this.gpuDetected && this.render ) this.view.onWindowResize( window.innerWidth, window.innerHeight ); 56 | } 57 | 58 | } 59 | 60 | const app = new App(); 61 | -------------------------------------------------------------------------------- /scenic-backdrop/src/js/View.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import * as THREE from 'three/tsl'; 4 | import WebGPU from 'three/addons/capabilities/WebGPU.js'; 5 | import Backdrop from './tsl/Backdrop.js'; 6 | import { WebGLAssets } from './utils/webgl-assets'; 7 | import { TweenMax, Back, Expo, Sine, Bounce, Quad, Cubic } from 'gsap'; 8 | 9 | let scope = null; 10 | 11 | export default class View { 12 | 13 | constructor( rootElement, gpuTiersData ) { 14 | 15 | /* get device pixelratio */ 16 | let ratio = window.devicePixelRatio; 17 | /* set antialising */ 18 | let aa = true; 19 | 20 | if( gpuTiersData.isMobile ) { 21 | 22 | WebGLAssets.isMobile = gpuTiersData.isMobile; 23 | 24 | if (gpuTiersData.tier > 1) { 25 | 26 | if (ratio > 1) { 27 | 28 | ratio = 0.8; 29 | 30 | } else { 31 | 32 | ratio = 0.75; 33 | aa = false; 34 | } 35 | } 36 | 37 | } else { 38 | 39 | aa = true; 40 | if (ratio >= 2) ratio = 1.3; 41 | 42 | } 43 | 44 | 45 | 46 | //////////////////////////////////////////////////////////////////// 47 | // setup: //////////////////////// 48 | // threejs //////////////////////// 49 | //////////////////////////////////////////////////////////////////// 50 | 51 | scope = this; 52 | 53 | this.renderer = new THREE.WebGPURenderer({ 54 | antialias: aa, 55 | preserveDrawingBuffer: false, 56 | alpha: false, 57 | stencil:false, 58 | powerPreference: 'high-performance' 59 | }); 60 | 61 | this.renderer.setPixelRatio( ratio ); 62 | this.renderer.setSize( window.innerWidth, window.innerHeight ); 63 | this.renderer.outputColorSpace = THREE.SRGBColorSpace; 64 | 65 | rootElement.appendChild( this.renderer.domElement ); 66 | 67 | if( gpuTiersData.isMobile ) { 68 | 69 | this.renderer.setPixelRatio = ratio; 70 | } 71 | 72 | this.initView(); 73 | WebGLAssets.loaded = true; 74 | 75 | } 76 | 77 | 78 | 79 | initView() { 80 | 81 | this.bg = 0; 82 | this.width = window.innerWidth; 83 | this.height = window.innerHeight; 84 | 85 | this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 ); 86 | this.scene = new THREE.Scene(); 87 | 88 | 89 | //////////////////////////////////////////////////////////////////// 90 | // setup: //////////////////////// 91 | // raymarcher.node //////////////////////// 92 | //////////////////////////////////////////////////////////////////// 93 | 94 | const material = new THREE.MeshBasicNodeMaterial( { color: 0x00ff00 } ); 95 | 96 | this.texture01 = new THREE.TextureLoader() 97 | .load( ['./textures/bmp01.jpg'], () => { 98 | 99 | this.texture01.anisotropy = 32; 100 | this.texture01.wrapS = THREE.RepeatWrapping; 101 | this.texture01.wrapT = THREE.RepeatWrapping; 102 | this.texture01.outputColorSpace = THREE.SRGBColorSpace; 103 | 104 | 105 | this.texture02 = new THREE.TextureLoader() 106 | .load( ['./textures/tex12.png'], () => { 107 | 108 | this.texture02.anisotropy = 32; 109 | this.texture02.wrapS = THREE.RepeatWrapping; 110 | this.texture02.wrapT = THREE.RepeatWrapping; 111 | this.texture02.outputColorSpace = THREE.SRGBColorSpace; 112 | 113 | this.plane = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material ); 114 | this.plane.frustumCulled = false; 115 | this.plane.renderOrder = 0; 116 | this.scene.add( this.plane ); 117 | 118 | this.materialParams = { 119 | texture01: this.texture01, 120 | texture02: this.texture02 121 | } 122 | 123 | WebGLAssets.shaderParams = this.materialParams; 124 | 125 | this.raymarch = new Backdrop( material ); 126 | 127 | this.renderer.setAnimationLoop( this.animate ); 128 | TweenMax.to( document.getElementById("loader"), 2.0, { autoAlpha:0, ease:Sine.easeOut } ); 129 | 130 | }); 131 | 132 | }); 133 | /* 134 | this.textureCube = new THREE.CubeTextureLoader() 135 | .setPath( './models/envMap/1/' ) 136 | .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], () => { 137 | 138 | this.textureCube.anisotropy = 32; 139 | 140 | this.plane = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material ); 141 | this.plane.frustumCulled = false; 142 | this.plane.renderOrder = 0; 143 | this.scene.add( this.plane ); 144 | 145 | this.materialParams = { 146 | cubeTex: this.textureCube, 147 | } 148 | 149 | WebGLAssets.shaderParams = this.materialParams; 150 | 151 | this.textureCube1 = new THREE.CubeTextureLoader() 152 | .setPath( './models/envMap/6/' ) 153 | .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], () => { 154 | 155 | this.textureCube1.anisotropy = 32; 156 | WebGLAssets.shaderParams.cubeTex1 = this.textureCube1; 157 | 158 | this.textureCube2 = new THREE.CubeTextureLoader() 159 | .setPath( './models/envMap/8/' ) 160 | .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], () => { 161 | 162 | this.textureCube1.anisotropy = 32; 163 | WebGLAssets.shaderParams.cubeTex2 = this.textureCube2; 164 | 165 | this.raymarch = new Raymarch( material ); 166 | 167 | this.renderer.setAnimationLoop( this.animate ); 168 | TweenMax.to( document.getElementById("loader"), 2.0, { autoAlpha:0, ease:Sine.easeOut } ); 169 | }); 170 | 171 | }); 172 | 173 | }); 174 | */ 175 | 176 | 177 | //////////////////////////////////////////////////////////////////// 178 | // set: //////////////////////// 179 | // start rendering now //////////////////////// 180 | //////////////////////////////////////////////////////////////////// 181 | 182 | let canRenderEvent = new CustomEvent("canRender", { detail: "" }); 183 | document.dispatchEvent( canRenderEvent ); 184 | 185 | 186 | 187 | //////////////////////////////////////////////////////////////////// 188 | // trigger: (once) //////////////////////// 189 | // resize //////////////////////// 190 | //////////////////////////////////////////////////////////////////// 191 | 192 | this.onWindowResize(window.innerWidth, window.innerHeight); 193 | 194 | } 195 | 196 | 197 | 198 | //////////////////////////////////////////////////////////////////// 199 | // resize //////////////////////// 200 | // renderer, camera, postpro //////////////////////// 201 | //////////////////////////////////////////////////////////////////// 202 | 203 | onWindowResize(vpW, vpH) { 204 | 205 | this.renderer.setSize(vpW, vpH); 206 | 207 | this.camera.aspect = vpW / vpH; 208 | this.camera.updateProjectionMatrix(); 209 | 210 | } 211 | 212 | 213 | //////////////////////////////////////////////////////////////////// 214 | // update //////////////////////// 215 | //////////////////////////////////////////////////////////////////// 216 | 217 | async animate() { 218 | 219 | scope.renderer.render( scope.scene, scope.camera); 220 | 221 | } 222 | 223 | } -------------------------------------------------------------------------------- /scenic-backdrop/src/js/tsl/Backdrop.js: -------------------------------------------------------------------------------- 1 | 2 | import { 3 | MeshBasicNodeMaterial, 4 | float, 5 | bool, 6 | Loop, 7 | If, 8 | Break, 9 | Fn, 10 | uv, 11 | vec3, 12 | time, 13 | sin, 14 | div, 15 | cos, 16 | min, 17 | mul, 18 | add, 19 | sub, 20 | mat2, 21 | mat3, 22 | mat4, 23 | mod, 24 | max, 25 | abs, 26 | mix, 27 | equal, 28 | and, 29 | normalize, 30 | dot, 31 | cross, 32 | int, 33 | pow, 34 | sqrt, 35 | clamp, 36 | reflect, 37 | vec2, 38 | exp, 39 | exp2, 40 | vec4, 41 | refract, 42 | negate, 43 | length, 44 | screenSize, 45 | assign, 46 | mulAssign, 47 | addAssign, 48 | subAssign, 49 | uniform, 50 | smoothstep, 51 | cubeTexture, 52 | texture, 53 | oneMinus, 54 | screenCoordinate, 55 | screenUV, 56 | } from 'three/tsl'; 57 | 58 | import * as THREE from 'three'; 59 | import { WebGLAssets } from '../utils/webgl-assets'; 60 | import {Pane} from 'tweakpane'; 61 | 62 | export default class Backdrop { 63 | 64 | constructor( materialNode ) { 65 | 66 | this.material = materialNode; 67 | 68 | 69 | //////////////////////////////////////////////////////////////////// 70 | // setup: //////////////////////// 71 | // ui for prototyping //////////////////////// 72 | //////////////////////////////////////////////////////////////////// 73 | 74 | const pane = new Pane({container:document.getElementById("tweak")}); 75 | const setGamma = uniform( 0.87 ); 76 | const setHorizon = uniform(0.36); 77 | const setMoonlight = uniform(5.0); 78 | const texture01 = WebGLAssets.shaderParams.texture01; 79 | const texture02 = WebGLAssets.shaderParams.texture02; 80 | const resx = uniform( window.innerWidth ); 81 | const resy = uniform( window.innerHeight ); 82 | 83 | const b = pane.addBinding( 84 | setGamma, 'value', 85 | {label: 'gamma', min: 0.40, max: 0.90, step: 0.01} 86 | ); 87 | 88 | b.on('change', (ev) => { 89 | setGamma.value = ev.value; 90 | }); 91 | 92 | const c = pane.addBinding( 93 | setHorizon, 'value', 94 | {label: 'horizon', min: 0.25, max: 0.50, step: 0.01} 95 | ); 96 | 97 | c.on('change', (ev) => { 98 | setHorizon.value = ev.value; 99 | }); 100 | 101 | const d = pane.addBinding( 102 | setMoonlight, 'value', 103 | {label: 'moonlight', min: 5.00, max: 20.00, step: 0.10} 104 | ); 105 | 106 | d.on('change', (ev) => { 107 | setMoonlight.value = ev.value; 108 | }); 109 | 110 | 111 | const timer = time; 112 | 113 | const fbm = Fn( ( [ p ] ) => { 114 | 115 | return float(1.5000).mul(texture(texture01, p.mul(1.00)).x) 116 | .add( float(1.2500).mul(texture(texture01,p.mul(2.02)).x)) 117 | .add( float(1.1250).mul(texture(texture01,p.mul(4.02)).x)) 118 | .add( float(1.0675).mul(texture(texture01,p.mul(8.02)).x)); 119 | 120 | } ) 121 | 122 | const fbm2 = Fn( ( [ p ] ) => { 123 | 124 | return float(0.5000).mul(texture(texture01,p.mul(1.00)).x) 125 | .add( float(0.2500).mul(texture(texture01,p.mul(2.02)).x)) 126 | .add( float(0.1250).mul(texture(texture01,p.mul(4.02)).x)) 127 | .add( float(0.0675).mul(texture(texture01,p.mul(8.02)).x)); 128 | 129 | } ) 130 | 131 | const ApplyGamma = Fn( ( [ vLinear ] ) => { 132 | 133 | const kGamma = float(setGamma).toVar(); 134 | return pow(vLinear,vec3(float(1.0).div(kGamma))); 135 | 136 | } ) 137 | 138 | const backgrop = Fn(() => { 139 | 140 | const tick = mod( timer.mul(0.4), 458.0 ).toVar(); 141 | const uv = screenUV.sub(0.5).mul(vec2(div(screenSize.x, screenSize.y), float(1.).negate())).mul(2.).toVar(); 142 | 143 | //const aspect = vec2(div(screenSize.x, screenSize.y), 1).toVar(); 144 | //let newUV = vec2(screenUV.x, screenUV.y.oneMinus()).sub(0.5).mul(aspect).mul(2); 145 | 146 | // camera 147 | const p = uv.toVar(); 148 | p.addAssign(vec2(1.0,3.0).mul(float(0.002)).mul(float(2.0)).mul(cos(tick).mul(float(2.0).add(vec2(0.0,1.5))))); 149 | p.addAssign(vec2(1.0,3.0).mul(float(0.001)).mul(float(1.0)).mul(cos(tick).mul(float(5.0).add(vec2(1.0,4.5))))); 150 | p.mulAssign(float(0.95).add(float(0.05).mul(length(p)))); 151 | const an = float(0.03).mul(sin( float(0.1).mul(tick))).toVar(); 152 | const co = float(cos(an)).toVar(); 153 | const si = float(sin(an)).toVar(); 154 | p.assign(mat2( co, si.negate(), si, co ).mul(p)); 155 | 156 | // water 157 | const q = vec2(p.x,float(1.0).negate()).div(p.y.sub(0.1)).toVar(); 158 | q.y.sub(float(0.3).mul(tick.mul(0.001))); 159 | const off = texture(texture01, float(0.1).mul(mod( tick.mul( 0.001 ), 2.0 ).mul(q).mul(vec2(1.0,float(2.0).oneMinus())).sub(vec2(float(0.0),float(0.007).mul(tick))).xy)).toVar(); 160 | q.add(0.4).div(float(1.00).oneMinus().add(float(50.0).mul(off))); 161 | const col = vec3(texture( texture01, float(1.9).mul(q).mul(mod(tick.mul(0.0005),12.0)).mul(vec2(.5,8.0)).add(vec2(0.0,float(0.01).mul(tick)))).zyx).toVar(); 162 | col.mulAssign(0.4); 163 | const re = float(float(1.0).sub(smoothstep( 0.0, 0.7, abs(p.x.sub(0.6)).sub(abs(p.y).mul(0.3).add(0.2))))).toVar(); 164 | col.addAssign(float(0.1).mul(vec3(1.0,0.9,0.73)).mul(re).mul(0.2).mul(off.y).mul(5.0).mul( float(1.0).sub(col.x))); 165 | const re2 = float(1.0).sub(smoothstep( 0.0, 2.0, abs(p.x.sub(0.6)).sub(abs(p.y.add(0.2)).mul(0.85) ))).toVar(); 166 | col.addAssign(float(0.5).mul(vec3(1.0,0.9,0.73)).mul(re).mul(0.2).mul(off.y).mul(setMoonlight).mul( float(1.0).sub(col.x))); 167 | 168 | // sky 169 | const sky = vec3(0.01, 0.03, 0.1).toVar(); 170 | // stars 171 | sky.addAssign(float(2.8).mul(smoothstep( 0.90,1.0,texture( texture02, float(3.5).mul(p.add(tick.mul(0.1)).mul(0.29))).x).mul(1.6))); 172 | sky.addAssign(float(2.1).mul(smoothstep( 0.50,1.0,texture( texture02, float(2.5).mul(p.div(0.01).add(tick).mul(0.02) )).y))); 173 | sky.addAssign(float(2.3).mul(pow(abs(float(0.5).sub(max(0.0,p.y))),5.0))); 174 | 175 | // clouds 176 | const f = fbm( float(0.002).mul(vec2(p.x,1.0).div(p.y))).toVar(); 177 | const cloud = vec3(vec3(0.3,0.4,0.5).mul(0.7).mul(float(1.0).sub(0.85).mul(sqrt(smoothstep(0.4,1.0,f))))).toVar(); 178 | sky.assign(mix( sky, cloud, float(0.95).mul(smoothstep( 0.4, 0.6, f ) ) ) ); 179 | sky.assign(mix( sky, vec3(0.33,0.34,0.35),pow(float(1.0).sub(max(0.0,p.y)),float(5.0).add(sin(timer).mul(2.0))))); 180 | col.assign(mix( col, sky, smoothstep(0.0,0.1,p.y))); 181 | 182 | // moon 183 | const ddd = length(p.sub(vec2(0.58,0.45))).toVar(); 184 | const g = float(0.1).sub(smoothstep( float(0.2), float(0.21) , ddd.sub(float(0.10).mul(tick).mul(0.05)))).toVar(); 185 | const moontex = float(0.8).add(0.2).mul(smoothstep(float(0.25), float(0.7), fbm2(float(0.3).add(sin(timer).mul(float(0.01).add(sin(timer).mul(0.018)))).mul(p.oneMinus())))).toVar(); 186 | const moon = vec3(1.0,0.97,0.9).toVar(); 187 | col.addAssign(moon.mul(exp(float(5.0).oneMinus().mul(ddd).add(float(moontex).mul(0.15).add(col))))); 188 | 189 | // horizon 190 | col.addAssign(float(setHorizon).mul(cos(tick.div(120.0))).mul(pow(clamp(float(1.0).sub(abs(p.y.add(0.96).oneMinus())),0.0,1.0),9.0))); 191 | 192 | // postprocess 193 | col.mulAssign(1.4); 194 | col.assign(pow( col, vec3(1.5,1.2,1.0))); 195 | col.assign(ApplyGamma(col)); 196 | 197 | // blend-in 198 | col.mulAssign(smoothstep(0.0,4.0, tick )); 199 | 200 | return vec4(col,1.0); 201 | 202 | })() 203 | 204 | this.material.colorNode = backgrop; 205 | 206 | } 207 | 208 | } -------------------------------------------------------------------------------- /scenic-backdrop/src/js/utils/webgl-assets.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export class WebGLAssets { 4 | 5 | static loaded = true; 6 | static dictionary = {}; 7 | static intro = true; 8 | static isMobile = false; 9 | 10 | static position = null; 11 | static vUv = null; 12 | static position = null; 13 | static plane = null; 14 | static debris = null; 15 | 16 | } 17 | -------------------------------------------------------------------------------- /scenic-backdrop/src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
0% 
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |

Tinker Day #25

25 |

Scenic Backdrop.

26 |
27 | 28 |
29 |
30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /scenic-backdrop/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | const artifact = require('./package.json'); 6 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 7 | //const ESLintPlugin = require('eslint-webpack-plugin'); 8 | 9 | const fileName = `${artifact.name}-${artifact.version.slice(0, 3)}`; 10 | 11 | module.exports = (env, argv) => ({ 12 | entry: { 13 | [fileName]: './src/index.js', 14 | }, 15 | output: { 16 | filename: '[name].[fullhash].bundle.js', 17 | path: path.resolve(__dirname, 'dist'), 18 | publicPath: '/', 19 | }, 20 | devServer: { 21 | historyApiFallback: true, 22 | open: true, 23 | compress: true, 24 | port: 8080, 25 | }, 26 | module: { 27 | rules: [ 28 | { 29 | test: /\.(css)$/, 30 | use: [ 31 | { loader: 'style-loader' }, 32 | { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } } 33 | ], 34 | }, 35 | { 36 | test: /\.js$/, 37 | exclude: /(node_modules)/, 38 | use: ['babel-loader'], 39 | }, 40 | { 41 | test: /\.(?:ico|gif|png|jpg|jpeg|webp|svg|stl)$/i, 42 | loader: 'file-loader', 43 | options: { 44 | name: '[path][name].[ext]', 45 | context: 'src', // prevent display of src/ in filename 46 | }, 47 | }, 48 | { 49 | test: /\.(woff(2)?|eot|ttf|otf|)$/, 50 | loader: 'url-loader', 51 | options: { 52 | limit: 8192, 53 | name: '[path][name].[ext]', 54 | context: 'src', // prevent display of src/ in filename 55 | }, 56 | }, 57 | ], 58 | }, 59 | plugins: [ 60 | new webpack.HotModuleReplacementPlugin(), 61 | /*new ESLintPlugin(),*/ 62 | new CopyWebpackPlugin({ 63 | patterns: [{ from: path.resolve(__dirname, 'public'), to: path.resolve(__dirname, 'dist') }], 64 | }), 65 | new HtmlWebpackPlugin({ 66 | title: 'Learning TSL: Scenic backdrop.', 67 | favicon: path.resolve(__dirname, 'public/favicon.png'), 68 | template: path.resolve(__dirname, 'src/template.html'), // template file 69 | filename: 'index.html', // output file 70 | }), 71 | ], 72 | devtool: 'eval-source-map', 73 | performance: { 74 | hints: false, 75 | maxEntrypointSize: 512000, 76 | maxAssetSize: 512000, 77 | }, 78 | }); 79 | -------------------------------------------------------------------------------- /the-river/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@babel/eslint-parser', 3 | plugins: ['prettier'], 4 | rules: { 5 | 'prettier/prettier': 'error', 6 | }, 7 | env: { 8 | browser: true, 9 | node: true, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /the-river/.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | .DS_Store 3 | .vscode 4 | .idea 5 | .settings 6 | .project 7 | *.tar.gz 8 | *.orig 9 | *.iml 10 | node_modules 11 | dist 12 | __src -------------------------------------------------------------------------------- /the-river/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | progress=true -------------------------------------------------------------------------------- /the-river/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "printWidth": 120, 4 | "semi": true, 5 | "singleQuote": true 6 | } -------------------------------------------------------------------------------- /the-river/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Installation 4 | 5 | ``` 6 | git clone the/path/to/our/actual/core/repo 7 | npm i 8 | ``` 9 | 10 | ## Usage 11 | 12 | ### Development server 13 | 14 | ```bash 15 | npm start 16 | ``` 17 | 18 | You can view the development server at `localhost:8080`. 19 | 20 | ### Production build 21 | 22 | ```bash 23 | npm run build 24 | ``` 25 | 26 | > Note: Install [http-server](https://www.npmjs.com/package/http-server) globally to deploy a simple server. 27 | 28 | ```bash 29 | npm i -g http-server 30 | ``` 31 | 32 | You can view the deploy by creating a server in `dist`. 33 | 34 | ```bash 35 | cd dist && http-server 36 | ``` 37 | 38 | ### Fix lint issues 39 | 40 | #### Javascript 41 | 42 | ```bash 43 | npm run fix-js 44 | ``` 45 | 46 | #### SCSS/CSS 47 | 48 | ```bash 49 | npm run fix-styling 50 | ``` 51 | 52 | ## Features 53 | 54 | - [Three.js](https://threejs.org/) 55 | - [Webpack](https://webpack.js.org/) 56 | - [Babel](https://babeljs.io/) 57 | - [ESLint](https://eslint.org/) 58 | - [stylelint](https://stylelint.io/) 59 | 60 | ## Dependencies 61 | 62 | ### Three.js 63 | 64 | - [`Three.js`](https://github.com/mrdoob/three.js) - Three.js framework. 65 | 66 | ### Webpack 67 | 68 | - [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler. 69 | - [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for Webpack. 70 | - [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for Webpack. 71 | 72 | ### Babel 73 | 74 | - [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript. 75 | - [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel. 76 | - [`babel-eslint`](https://github.com/babel/babel-eslint) - Lint Babel code. 77 | - [`babel-polyfill`](https://babeljs.io/docs/en/babel-polyfill) - This will emulate a full ES2015+ environment. 78 | - [`eslint`](https://github.com/eslint/eslint) - ESLint. 79 | 80 | ### Loaders 81 | 82 | - [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and Webpack. 83 | - [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS. 84 | - [`cssnano`](https://github.com/cssnano/cssnano) - Optimize and compress PostCSS. 85 | - [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Sensible defaults for PostCSS. 86 | - [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolves CSS imports into JS. 87 | - [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM. 88 | - [`file-loader`](https://webpack.js.org/loaders/file-loader/) - Copy files to build folder. 89 | - [`url-loader`](https://webpack.js.org/loaders/url-loader/) - Encode and inline files. Falls back to file-loader. 90 | 91 | ### Plugins 92 | 93 | - [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders. 94 | - [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) - Copy files to build directory. 95 | - [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template. 96 | - [`stylelint-webpack-plugin`](https://github.com/webpack-contrib/stylelint-webpack-plugin) - A Stylelint plugin for webpack. 97 | 98 | ## Author & Contributors 99 | 100 | - [`Frank Reitberger`](https://github.com/prinzipiell) 101 | 102 | -------------------------------------------------------------------------------- /the-river/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "And-the-river-runs.", 3 | "repository": { 4 | "type": "git", 5 | "url": "a tech-test tale" 6 | }, 7 | "version": "1.0.0", 8 | "description": "And-the-river-runs.", 9 | "main": "index.js", 10 | "author": "Frank Reitberger", 11 | "scripts": { 12 | "build": "del dist && webpack --config ./webpack.config.js --mode production", 13 | "build:debug": "del dist && webpack --config ./webpack.config.js --mode development", 14 | "start": "webpack serve --config ./webpack.config.js --mode development", 15 | "fix-js": "./node_modules/.bin/eslint src --fix" 16 | }, 17 | "babel": {}, 18 | "keywords": [ 19 | "lambdacore", 20 | "three", 21 | "threejs", 22 | "three.js", 23 | "pixi", 24 | "pixijs", 25 | "pixi.js" 26 | ], 27 | "devDependencies": { 28 | "@babel/core": "^7.17.9", 29 | "@babel/eslint-parser": "^7.17.0", 30 | "@babel/plugin-proposal-class-properties": "^7.16.7", 31 | "@babel/preset-env": "^7.16.11", 32 | "babel-loader": "^8.2.4", 33 | "copy-webpack-plugin": "^10.2.4", 34 | "cross-env": "^7.0.3", 35 | "css-loader": "^6.7.1", 36 | "cssnano": "^5.1.7", 37 | "dat.gui": "^0.7.9", 38 | "detect-gpu": "^5.0.16", 39 | "eslint": "^7.0.0", 40 | "eslint-plugin-prettier": "^4.0.0", 41 | "eslint-webpack-plugin": "^2.6.0", 42 | "file-loader": "^6.2.0", 43 | "html-webpack-plugin": "^5.5.0", 44 | "pixi.js": "^7.2.2", 45 | "postcss-loader": "^6.2.1", 46 | "postcss-preset-env": "^7.4.3", 47 | "prettier": "^2.6.2", 48 | "prettier-eslint": "^13.0.0", 49 | "shader-loader": "^1.3.1", 50 | "style-loader": "^3.3.1", 51 | "stylelint": "^14.6.1", 52 | "stylelint-prettier": "^2.0.0", 53 | "stylelint-webpack-plugin": "^3.2.0", 54 | "url-loader": "^4.1.1", 55 | "webpack": "^5.72.0", 56 | "webpack-cli": "^4.9.2", 57 | "webpack-dev-server": "4.8.1" 58 | }, 59 | "dependencies": { 60 | "gsap": "^3.12.2", 61 | "n8ao": "^1.9.2", 62 | "postprocessing": "^6.36.3", 63 | "three": "^0.170.0", 64 | "tweakpane": "^4.0.5" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /the-river/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/favicon.png -------------------------------------------------------------------------------- /the-river/public/styles/font/OpenSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/OpenSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/README.txt: -------------------------------------------------------------------------------- 1 | Open Sans Variable Font 2 | ======================= 3 | 4 | This download contains Open Sans as both variable fonts and static fonts. 5 | 6 | Open Sans is a variable font with these axes: 7 | wdth 8 | wght 9 | 10 | This means all the styles are contained in these files: 11 | OpenSans-VariableFont_wdth,wght.ttf 12 | OpenSans-Italic-VariableFont_wdth,wght.ttf 13 | 14 | If your app fully supports variable fonts, you can now pick intermediate styles 15 | that aren’t available as static fonts. Not all apps support variable fonts, and 16 | in those cases you can use the static font files for Open Sans: 17 | static/OpenSans_Condensed/OpenSans_Condensed-Light.ttf 18 | static/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf 19 | static/OpenSans_Condensed/OpenSans_Condensed-Medium.ttf 20 | static/OpenSans_Condensed/OpenSans_Condensed-SemiBold.ttf 21 | static/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf 22 | static/OpenSans_Condensed/OpenSans_Condensed-ExtraBold.ttf 23 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Light.ttf 24 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Regular.ttf 25 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Medium.ttf 26 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBold.ttf 27 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Bold.ttf 28 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBold.ttf 29 | static/OpenSans/OpenSans-Light.ttf 30 | static/OpenSans/OpenSans-Regular.ttf 31 | static/OpenSans/OpenSans-Medium.ttf 32 | static/OpenSans/OpenSans-SemiBold.ttf 33 | static/OpenSans/OpenSans-Bold.ttf 34 | static/OpenSans/OpenSans-ExtraBold.ttf 35 | static/OpenSans_Condensed/OpenSans_Condensed-LightItalic.ttf 36 | static/OpenSans_Condensed/OpenSans_Condensed-Italic.ttf 37 | static/OpenSans_Condensed/OpenSans_Condensed-MediumItalic.ttf 38 | static/OpenSans_Condensed/OpenSans_Condensed-SemiBoldItalic.ttf 39 | static/OpenSans_Condensed/OpenSans_Condensed-BoldItalic.ttf 40 | static/OpenSans_Condensed/OpenSans_Condensed-ExtraBoldItalic.ttf 41 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-LightItalic.ttf 42 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Italic.ttf 43 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-MediumItalic.ttf 44 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBoldItalic.ttf 45 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-BoldItalic.ttf 46 | static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBoldItalic.ttf 47 | static/OpenSans/OpenSans-LightItalic.ttf 48 | static/OpenSans/OpenSans-Italic.ttf 49 | static/OpenSans/OpenSans-MediumItalic.ttf 50 | static/OpenSans/OpenSans-SemiBoldItalic.ttf 51 | static/OpenSans/OpenSans-BoldItalic.ttf 52 | static/OpenSans/OpenSans-ExtraBoldItalic.ttf 53 | 54 | Get started 55 | ----------- 56 | 57 | 1. Install the font files you want to use 58 | 59 | 2. Use your app's font picker to view the font family and all the 60 | available styles 61 | 62 | Learn more about variable fonts 63 | ------------------------------- 64 | 65 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts 66 | https://variablefonts.typenetwork.com 67 | https://medium.com/variable-fonts 68 | 69 | In desktop apps 70 | 71 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc 72 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts 73 | 74 | Online 75 | 76 | https://developers.google.com/fonts/docs/getting_started 77 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide 78 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts 79 | 80 | Installing fonts 81 | 82 | MacOS: https://support.apple.com/en-us/HT201749 83 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux 84 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows 85 | 86 | Android Apps 87 | 88 | https://developers.google.com/fonts/docs/android 89 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts 90 | 91 | License 92 | ------- 93 | Please read the full license text (LICENSE.txt) to understand the permissions, 94 | restrictions and requirements for usage, redistribution, and modification. 95 | 96 | You can use them in your products & projects – print or digital, 97 | commercial or otherwise. 98 | 99 | This isn't legal advice, please consider consulting a lawyer and see the full 100 | license for all details. 101 | -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Bold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-BoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Italic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Light.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-LightItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Medium.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-MediumItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans/OpenSans-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Bold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-BoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Italic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Light.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-LightItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Medium.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-MediumItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-Regular.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_Condensed/OpenSans_Condensed-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Bold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-BoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Italic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Light.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-LightItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Medium.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-MediumItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-Regular.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Open_Sans/static/OpenSans_SemiCondensed/OpenSans_SemiCondensed-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Space_Grotesk/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /the-river/public/styles/font/Space_Grotesk/README.txt: -------------------------------------------------------------------------------- 1 | Space Grotesk Variable Font 2 | =========================== 3 | 4 | This download contains Space Grotesk as both a variable font and static fonts. 5 | 6 | Space Grotesk is a variable font with this axis: 7 | wght 8 | 9 | This means all the styles are contained in a single file: 10 | SpaceGrotesk-VariableFont_wght.ttf 11 | 12 | If your app fully supports variable fonts, you can now pick intermediate styles 13 | that aren’t available as static fonts. Not all apps support variable fonts, and 14 | in those cases you can use the static font files for Space Grotesk: 15 | static/SpaceGrotesk-Light.ttf 16 | static/SpaceGrotesk-Regular.ttf 17 | static/SpaceGrotesk-Medium.ttf 18 | static/SpaceGrotesk-SemiBold.ttf 19 | static/SpaceGrotesk-Bold.ttf 20 | 21 | Get started 22 | ----------- 23 | 24 | 1. Install the font files you want to use 25 | 26 | 2. Use your app's font picker to view the font family and all the 27 | available styles 28 | 29 | Learn more about variable fonts 30 | ------------------------------- 31 | 32 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts 33 | https://variablefonts.typenetwork.com 34 | https://medium.com/variable-fonts 35 | 36 | In desktop apps 37 | 38 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc 39 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts 40 | 41 | Online 42 | 43 | https://developers.google.com/fonts/docs/getting_started 44 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide 45 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts 46 | 47 | Installing fonts 48 | 49 | MacOS: https://support.apple.com/en-us/HT201749 50 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux 51 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows 52 | 53 | Android Apps 54 | 55 | https://developers.google.com/fonts/docs/android 56 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts 57 | 58 | License 59 | ------- 60 | Please read the full license text (OFL.txt) to understand the permissions, 61 | restrictions and requirements for usage, redistribution, and modification. 62 | 63 | You can use them in your products & projects – print or digital, 64 | commercial or otherwise. 65 | 66 | This isn't legal advice, please consider consulting a lawyer and see the full 67 | license for all details. 68 | -------------------------------------------------------------------------------- /the-river/public/styles/font/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Bold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Light.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Medium.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-Regular.ttf -------------------------------------------------------------------------------- /the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/styles/font/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf -------------------------------------------------------------------------------- /the-river/public/styles/main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); 2 | @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap'); 3 | @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@800&display=swap'); 4 | 5 | html, body { 6 | margin: 0px; 7 | padding: 0px; 8 | overflow-x:hidden; 9 | overflow-y:hidden; 10 | background: #000; 11 | font-family: 'Cinzel', sans-serif; 12 | color: #fff; 13 | line-height: 1.1; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | body{ 19 | overflow: hidden; 20 | background:pink; 21 | } 22 | 23 | a { 24 | font-weight: bold; 25 | text-decoration: none; 26 | color: inherit; 27 | } 28 | 29 | .pixiBase { 30 | width:100%; 31 | height:100%; 32 | margin:0; 33 | padding:0; 34 | overflow:hidden; 35 | position:absolute; 36 | top:0; 37 | left:0; 38 | background:yellow; 39 | z-index:2; 40 | } 41 | 42 | .threeBase { 43 | width:100%; 44 | height:100%; 45 | margin:0; 46 | padding:0; 47 | overflow:hidden; 48 | position:absolute; 49 | top:0; 50 | left:0; 51 | background:yellow; 52 | z-index:2; 53 | } 54 | 55 | .textOverlay { 56 | position:absolute; 57 | display:block; 58 | width:100%; 59 | height:50px; 60 | color:white; 61 | margin:0; 62 | padding-left:10px; 63 | padding-top:10px; 64 | z-index:2; 65 | overflow:hidden; 66 | } 67 | 68 | .guiBase { 69 | width:300px; 70 | margin:0; 71 | padding:0; 72 | overflow:hidden; 73 | position:absolute; 74 | top:0; 75 | right:0; 76 | z-index:10; 77 | overflow:hidden; 78 | } 79 | 80 | .loader { 81 | margin:0; 82 | padding:0; 83 | overflow:hidden; 84 | position:absolute; 85 | z-index:16; 86 | background: rgb(96,147,174); 87 | background: linear-gradient(30deg, rgba(147,165,207,1) 0%, rgba(228,239,233,1) 100%); 88 | bottom: 0; 89 | left: 0; 90 | overflow: hidden; 91 | position: fixed; 92 | right: 0; 93 | top: 0; 94 | color:black; 95 | } 96 | 97 | #app { 98 | position: absolute; 99 | top: 50%; 100 | left: 50%; 101 | -webkit-transform: translate(-50%, -50%); 102 | transform: translate(-50%, -50%); 103 | width: 150px; 104 | height: 45px; 105 | } 106 | 107 | #percentage { 108 | position: absolute; 109 | width: 100%; 110 | height: 100%; 111 | z-index:2; 112 | text-align: center; 113 | font-size: x-small; 114 | padding-top:14%; 115 | color:#F5E9F1; 116 | text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.2); 117 | } 118 | 119 | #container { 120 | width: 70px; 121 | height: 35px; 122 | overflow: hidden; 123 | position: absolute; 124 | top: calc(50% - 17px); 125 | left: calc(50% - 35px); 126 | } 127 | 128 | #loaderBase { 129 | width: 70px; 130 | height: 70px; 131 | border-style: solid; 132 | border-top-color: #F5E9F1; 133 | border-right-color: #F5E9F1; 134 | border-left-color: transparent; 135 | border-bottom-color: transparent; 136 | border-radius: 50%; 137 | box-sizing: border-box; 138 | animation: rotate 3s ease-in-out infinite; 139 | transform: rotate(-200deg) 140 | } 141 | 142 | @keyframes rotate { 143 | 0% { border-width: 10px; } 144 | 25% { border-width: 3px; } 145 | 50% { 146 | transform: rotate(15deg); 147 | border-width: 10px; 148 | } 149 | 75% { border-width: 3px;} 150 | 100% { border-width: 10px;} 151 | } 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | #ui { 160 | display: flex; 161 | pointer-events: none; 162 | position: absolute; 163 | left: 0; 164 | top: 0; 165 | right: 0; 166 | bottom: 0; 167 | flex-direction: column; 168 | padding: 1.5em; 169 | gap: 1.5em; 170 | z-index: 14; 171 | } 172 | 173 | #info { 174 | color: white; 175 | text-shadow: 1px 1px black; 176 | border-radius: 1em; 177 | margin-right: 0.5em; 178 | } 179 | 180 | #info a { 181 | color: inherit; 182 | } 183 | 184 | #info p span { 185 | margin-right: 0.5em; 186 | } 187 | 188 | #info p:last-child { 189 | margin-bottom: 0; 190 | } 191 | 192 | .contrast #info *, 193 | .contrast footer * { 194 | text-shadow: none; 195 | color: black; 196 | } 197 | 198 | .contrast #info button { 199 | border-color: black; 200 | } 201 | 202 | .contrast #info button:hover { 203 | background-color: rgb(80, 80, 80); 204 | color: white; 205 | } 206 | 207 | .ultrahigh #info { 208 | background-color: rgba(255, 255, 255, 0.9); 209 | } 210 | 211 | #info h1 { 212 | font-family: 'Cinzel', sans-serif; 213 | margin-bottom: 0.5em; 214 | font-size: 1.5rem; 215 | } 216 | 217 | #info h2 { 218 | font-family: 'Cinzel', sans-serif; 219 | font-size: 1rem; 220 | } 221 | 222 | #info p { 223 | margin-bottom: 1em; 224 | } 225 | 226 | #info button { 227 | color: inherit; 228 | cursor: pointer; 229 | -moz-user-select: none; 230 | -khtml-user-select: none; 231 | -webkit-user-select: none; 232 | -ms-user-select: none; 233 | user-select: none; 234 | } 235 | 236 | button { 237 | border: 1px solid white; 238 | outline: none; 239 | background: none; 240 | border-radius: 3px; 241 | padding: 0.5em 1em; 242 | margin-right: 0.5em; 243 | pointer-events: auto; 244 | text-shadow: 1px 1px black; 245 | font-weight: bold; 246 | } 247 | 248 | button:hover, 249 | #info button:hover { 250 | background: linear-gradient(30deg, rgba(147,165,207, 0.75) 0%, rgba(228,239,233, 0.75) 100%); 251 | color: black; 252 | text-shadow: none; 253 | transition: background 1s ease-out; 254 | } 255 | 256 | #info a { 257 | pointer-events: auto; 258 | } 259 | 260 | footer { 261 | color: white; 262 | text-shadow: 1px 1px black; 263 | display: flex; 264 | flex: 1; 265 | align-items: end; 266 | } 267 | 268 | h1 { 269 | pointer-events: none; 270 | } 271 | 272 | footer a { 273 | pointer-events: auto; 274 | } 275 | 276 | .contact { 277 | padding: 1em; 278 | font-size: 2em; 279 | } 280 | 281 | .vignette { 282 | pointer-events: none; 283 | background: transparent; 284 | height: 100%; 285 | width: 100%; 286 | box-shadow: inset 0 0 100px rgba(0,0,0,0.79); 287 | position: absolute; 288 | z-index:11; 289 | } 290 | 291 | @media (max-width: 500px) { 292 | .github-corner:hover .octo-arm { 293 | animation: none; 294 | } 295 | .github-corner .octo-arm { 296 | animation: octocat-wave 560ms ease-in-out; 297 | } 298 | } 299 | 300 | .tweak { 301 | right:0; 302 | width: 300px; 303 | box-shadow: inset 0 0 100px rgba(0,0,0,0.29); 304 | position: absolute; 305 | z-index:110; 306 | } -------------------------------------------------------------------------------- /the-river/public/textures/radiance_/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/textures/radiance_/nx.png -------------------------------------------------------------------------------- /the-river/public/textures/radiance_/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/textures/radiance_/ny.png -------------------------------------------------------------------------------- /the-river/public/textures/radiance_/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/textures/radiance_/nz.png -------------------------------------------------------------------------------- /the-river/public/textures/radiance_/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/textures/radiance_/px.png -------------------------------------------------------------------------------- /the-river/public/textures/radiance_/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/textures/radiance_/py.png -------------------------------------------------------------------------------- /the-river/public/textures/radiance_/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/textures/radiance_/pz.png -------------------------------------------------------------------------------- /the-river/public/textures/stone-bw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/textures/stone-bw.png -------------------------------------------------------------------------------- /the-river/public/textures/stone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/public/textures/stone.jpg -------------------------------------------------------------------------------- /the-river/src/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/src/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /the-river/src/images/logos/three-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prinzipiell/tsl/b748f88fa95facf67d7e1e6d85045bdc524117ba/the-river/src/images/logos/three-icon.png -------------------------------------------------------------------------------- /the-river/src/images/logos/webpack-logo.svg: -------------------------------------------------------------------------------- 1 | logo-on-white-bg -------------------------------------------------------------------------------- /the-river/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { getGPUTier } from 'detect-gpu'; 3 | import View from "./js/View"; 4 | import { WebGLAssets } from './js/utils/webgl-assets'; 5 | 6 | 7 | /* Define DOM elements */ 8 | const rootElement = document.querySelector('#root'); 9 | const contentElement = document.querySelector('#content-wrapper'); 10 | 11 | let view; 12 | let gpuDetected, render = false; 13 | 14 | 15 | //////////////////////////////////////////////////////////////////// 16 | // initialize //////////////////////// //////////////////////// 17 | //////////////////////////////////////////////////////////////////// 18 | 19 | class App { 20 | 21 | 22 | 23 | //////////////////////////////////////////////////////////////////// 24 | ///// get: GPU info(s) + init //////////////////////// 25 | //////////////////////////////////////////////////////////////////// 26 | 27 | constructor() { 28 | 29 | (async () => { 30 | 31 | const data = await getGPUTier({}); 32 | this.view = new View( rootElement, data ); 33 | 34 | window.addEventListener("resize", this.resize); 35 | 36 | this.gpuDetected = true; 37 | 38 | })(); 39 | 40 | document.addEventListener("canRender", (e) => { 41 | 42 | this.render = true; 43 | 44 | } ); 45 | 46 | } 47 | 48 | 49 | 50 | //////////////////////////////////////////////////////////////////// 51 | ///// resize: core //////////////////////// 52 | //////////////////////////////////////////////////////////////////// 53 | 54 | resize = () => { 55 | if( this.gpuDetected && this.render ) this.view.onWindowResize( window.innerWidth, window.innerHeight ); 56 | } 57 | 58 | } 59 | 60 | const app = new App(); 61 | -------------------------------------------------------------------------------- /the-river/src/js/View.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import * as THREE from 'three/tsl'; 4 | import River from './tsl/River.js'; 5 | import { WebGLAssets } from './utils/webgl-assets'; 6 | import { TweenMax, Back, Expo, Sine, Bounce, Quad, Cubic } from 'gsap'; 7 | 8 | let scope = null; 9 | 10 | export default class View { 11 | 12 | constructor( rootElement, gpuTiersData ) { 13 | 14 | /* get device pixelratio */ 15 | let ratio = window.devicePixelRatio; 16 | /* set antialising */ 17 | let aa = true; 18 | 19 | if( gpuTiersData.isMobile ) { 20 | 21 | WebGLAssets.isMobile = gpuTiersData.isMobile; 22 | 23 | if (gpuTiersData.tier > 1) { 24 | 25 | if (ratio > 1) { 26 | 27 | ratio = 0.8; 28 | 29 | } else { 30 | 31 | ratio = 0.75; 32 | aa = false; 33 | } 34 | } 35 | 36 | } else { 37 | 38 | aa = true; 39 | if (ratio >= 2) ratio = 1.3; 40 | 41 | } 42 | 43 | 44 | 45 | //////////////////////////////////////////////////////////////////// 46 | // setup: //////////////////////// 47 | // threejs //////////////////////// 48 | //////////////////////////////////////////////////////////////////// 49 | 50 | scope = this; 51 | 52 | this.renderer = new THREE.WebGPURenderer({ 53 | antialias: aa, 54 | preserveDrawingBuffer: false, 55 | alpha: false, 56 | stencil:false, 57 | powerPreference: 'high-performance' 58 | }); 59 | 60 | this.renderer.setPixelRatio( ratio ); 61 | this.renderer.setSize( window.innerWidth, window.innerHeight ); 62 | this.renderer.outputColorSpace = THREE.SRGBColorSpace; 63 | 64 | rootElement.appendChild( this.renderer.domElement ); 65 | 66 | if( gpuTiersData.isMobile ) { 67 | 68 | this.renderer.setPixelRatio = ratio; 69 | } 70 | 71 | this.initView(); 72 | WebGLAssets.loaded = true; 73 | 74 | } 75 | 76 | 77 | 78 | initView() { 79 | 80 | this.bg = 0; 81 | this.width = window.innerWidth; 82 | this.height = window.innerHeight; 83 | 84 | this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 ); 85 | this.scene = new THREE.Scene(); 86 | 87 | 88 | //////////////////////////////////////////////////////////////////// 89 | // setup: //////////////////////// 90 | // river.node //////////////////////// 91 | //////////////////////////////////////////////////////////////////// 92 | 93 | const material = new THREE.MeshBasicNodeMaterial( { color: 0x00ff00 } ); 94 | 95 | this.textureCube = new THREE.CubeTextureLoader() 96 | .setPath( './textures/radiance_/' ) 97 | .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], () => { 98 | 99 | this.textureCube.anisotropy = 32; 100 | 101 | this.texture01 = new THREE.TextureLoader() 102 | .load( ['./textures/stone-bw.png'], () => { 103 | 104 | this.texture01.anisotropy = 32; 105 | this.texture01.wrapS = THREE.RepeatWrapping; 106 | this.texture01.wrapT = THREE.RepeatWrapping; 107 | this.texture01.outputColorSpace = THREE.SRGBColorSpace; 108 | 109 | 110 | this.texture02 = new THREE.TextureLoader() 111 | .load( ['./textures/stone-bw.png'], () => { // you might use ./textures/stone.jpg instead 112 | 113 | this.texture02.anisotropy = 32; 114 | this.texture02.wrapS = THREE.RepeatWrapping; 115 | this.texture02.wrapT = THREE.RepeatWrapping; 116 | this.texture02.outputColorSpace = THREE.SRGBColorSpace; 117 | 118 | this.plane = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material ); 119 | this.plane.frustumCulled = false; 120 | this.plane.renderOrder = 0; 121 | this.scene.add( this.plane ); 122 | 123 | WebGLAssets.mouseX = 0.5; 124 | 125 | this.materialParams = { 126 | texture01: this.texture01, 127 | texture02: this.texture02, 128 | cubeTex: this.textureCube, 129 | mouseX: WebGLAssets.mouseX 130 | } 131 | 132 | WebGLAssets.shaderParams = this.materialParams; 133 | 134 | this.river = new River( material ); 135 | 136 | this.renderer.setAnimationLoop( this.animate ); 137 | TweenMax.to( document.getElementById("loader"), 2.0, { autoAlpha:0, ease:Sine.easeOut } ); 138 | 139 | }); 140 | 141 | }); 142 | 143 | }); 144 | 145 | 146 | 147 | //////////////////////////////////////////////////////////////////// 148 | // set: //////////////////////// 149 | // start rendering now //////////////////////// 150 | //////////////////////////////////////////////////////////////////// 151 | 152 | let canRenderEvent = new CustomEvent("canRender", { detail: "" }); 153 | document.dispatchEvent( canRenderEvent ); 154 | 155 | 156 | 157 | //////////////////////////////////////////////////////////////////// 158 | // trigger: (once) //////////////////////// 159 | // resize //////////////////////// 160 | //////////////////////////////////////////////////////////////////// 161 | 162 | this.onWindowResize(window.innerWidth, window.innerHeight); 163 | 164 | } 165 | 166 | 167 | 168 | //////////////////////////////////////////////////////////////////// 169 | // resize //////////////////////// 170 | // renderer, camera, postpro //////////////////////// 171 | //////////////////////////////////////////////////////////////////// 172 | 173 | onWindowResize(vpW, vpH) { 174 | 175 | this.renderer.setSize(vpW, vpH); 176 | 177 | this.camera.aspect = vpW / vpH; 178 | this.camera.updateProjectionMatrix(); 179 | 180 | } 181 | 182 | 183 | //////////////////////////////////////////////////////////////////// 184 | // update //////////////////////// 185 | //////////////////////////////////////////////////////////////////// 186 | 187 | async animate() { 188 | 189 | scope.renderer.render( scope.scene, scope.camera); 190 | scope.river.autoMouse(); 191 | 192 | } 193 | 194 | } -------------------------------------------------------------------------------- /the-river/src/js/tsl/River.js: -------------------------------------------------------------------------------- 1 | 2 | import { 3 | MeshBasicNodeMaterial, 4 | positionLocal, 5 | float, 6 | bool, 7 | Loop, 8 | If, 9 | Break, 10 | Fn, 11 | uv, 12 | vec3, 13 | time, 14 | sin, 15 | div, 16 | cos, 17 | min, 18 | mul, 19 | add, 20 | sub, 21 | mat2, 22 | mat3, 23 | mat4, 24 | mod, 25 | max, 26 | abs, 27 | mix, 28 | equal, 29 | and, 30 | normalize, 31 | dot, 32 | cross, 33 | int, 34 | pow, 35 | sqrt, 36 | clamp, 37 | reflect, 38 | vec2, 39 | exp, 40 | exp2, 41 | vec4, 42 | refract, 43 | negate, 44 | length, 45 | screenSize, 46 | assign, 47 | mulAssign, 48 | addAssign, 49 | subAssign, 50 | uniform, 51 | smoothstep, 52 | cubeTexture, 53 | texture, 54 | oneMinus, 55 | screenCoordinate, 56 | screenUV, 57 | } from 'three/tsl'; 58 | 59 | import * as THREE from 'three'; 60 | import { WebGLAssets } from '../utils/webgl-assets'; 61 | import {Pane} from 'tweakpane'; 62 | 63 | export default class River { 64 | 65 | constructor( materialNode ) { 66 | 67 | this.material = materialNode; 68 | 69 | 70 | //////////////////////////////////////////////////////////////////// 71 | // setup: //////////////////////// 72 | // ui for prototyping //////////////////////// 73 | //////////////////////////////////////////////////////////////////// 74 | 75 | const pane = new Pane({container:document.getElementById("tweak")}); 76 | const setGamma = uniform( 0.87 ); 77 | const setBrightness = uniform(0.125); 78 | const setTurbulence = uniform(349.0); 79 | const texture01 = WebGLAssets.shaderParams.texture01; 80 | const texture02 = WebGLAssets.shaderParams.texture02; 81 | const cubeMap = WebGLAssets.shaderParams.cubeTex; 82 | const resx = uniform( window.innerWidth ); 83 | const resy = uniform( window.innerHeight ); 84 | this.mouseX = uniform(WebGLAssets.shaderParams.mouseX); 85 | 86 | //////////////////////////////////////////////////////////////////// 87 | // add & listen to: //////////////////////// 88 | // mouse-event(s) -> down, up, move //////////////////////// 89 | //////////////////////////////////////////////////////////////////// 90 | 91 | this.downFlag = false; 92 | 93 | document.addEventListener( 'pointerdown', e => { 94 | 95 | this.downFlag = true; 96 | 97 | }); 98 | 99 | document.addEventListener( 'pointerup', e => { 100 | 101 | this.downFlag = false; 102 | 103 | }); 104 | 105 | 106 | document.addEventListener( 'pointermove', e => { 107 | 108 | if( this.downFlag ) { 109 | this.mouseX.value = e.clientX / window.innerWidth; 110 | } 111 | 112 | }); 113 | 114 | const b = pane.addBinding( 115 | setGamma, 'value', 116 | {label: 'gamma', min: 0.40, max: 0.90, step: 0.001} 117 | ); 118 | 119 | b.on('change', (ev) => { 120 | setGamma.value = ev.value; 121 | this.downFlag = false; 122 | }); 123 | 124 | const c = pane.addBinding( 125 | setBrightness, 'value', 126 | {label: 'bright water', min: 0.100, max: 0.550, step: 0.001} 127 | ); 128 | 129 | c.on('change', (ev) => { 130 | setBrightness.value = ev.value; 131 | this.downFlag = false; 132 | }); 133 | 134 | const d = pane.addBinding( 135 | setTurbulence, 'value', 136 | {label: 'turbulence', min: 100.0, max: 400.0, step: 1.0} 137 | ); 138 | 139 | d.on('change', (ev) => { 140 | setTurbulence.value = ev.value; 141 | this.downFlag = false; 142 | }); 143 | 144 | 145 | const timer = time; 146 | const waveHeight = float(2.025).toVar(); // average surface height 147 | 148 | const ApplyGamma = Fn( ( [ vLinear ] ) => { 149 | const kGamma = float(setGamma).toVar(); 150 | return pow(vLinear,vec3(float(1.0).div(kGamma))); 151 | } ) 152 | 153 | const wave = Fn(([ p ]) => { 154 | const t = float(timer.mul(0.08)).toVar(); 155 | const c1 = vec3(texture(texture01, p.xz.add(vec2(2.,2.0).mul(t).mul(1.1))).rgb).toVar(); 156 | const c2 = vec3(texture(texture01, p.xz.add(vec2(2.52, .50).mul(t).mul(1.25))).rgb).toVar(); 157 | const c3 = vec3(texture(texture01, p.xz.add(vec2(1.32,2.0).mul(t).mul(1.65))).rgb).toVar(); 158 | c1.addAssign(c2.add(c3)); 159 | const z = float(float(c1.x.add(c1.y).add(c1.z)).div(setTurbulence)).toVar(); 160 | return p.y.add(z); 161 | } ) 162 | 163 | const normWave = Fn(([ p ]) => { 164 | const e = vec2(.25,0.0).toVar(); 165 | return normalize( vec3( wave( p.add( e.xyy ) ), wave( p.add( e.yxy ) ), wave( p.add( e.yyx ) ) ).sub( wave( p ) ) ); 166 | } ) 167 | 168 | const lightWave = Fn(([ ro, rd, d ]) => { 169 | const p = vec3( ro.add( rd.mul( d ) ) ).toVar(); 170 | const sh = float( wave( p ).sub( mul( 3.5, waveHeight ) ) ).toVar(); 171 | p.xz.addAssign( mul( 1., sh ).mul( rd.xz ) ); 172 | sh.assign( wave( p ).sub( mul( 1.015, waveHeight ) ) ); 173 | 174 | const n = vec3( normWave( p ) ).toVar(), l1 = vec3( normalize( vec3( int( 1 ) ) ) ).toVar(); 175 | const nv = float( dot( rd, n ) ).toVar(), spc = float( pow( max( 0., dot( reflect( l1, n ), rd ) ), 120. ) ).toVar(), eta = float( 1.003 / 1.3 ).toVar(), waterdepth = float( 4.15 ).toVar(); 176 | 177 | const rfd = vec3( refract( rd, n, eta ) ).toVar(); 178 | const depthest = float( waterdepth.negate().div( rfd.y ) ).toVar(); 179 | const ref = vec3( cubeTexture(cubeMap, reflect( rd, n ) ).rgb ).toVar(), rfa = vec3( texture( texture02, p.add( rfd.mul( depthest ) ).xz.div( 10.0 ) ).rgb ).toVar(); 180 | 181 | const c = vec3(0.0).toVar(); 182 | 183 | ref.mulAssign(0.35); 184 | rfa.mulAssign(exp2( float(setBrightness).negate().mul(depthest))); 185 | 186 | return c.assign( rfa.add( ref ).add(spc) ); 187 | } ) 188 | 189 | const intersectWave = Fn(([ ro, rd ]) => { 190 | return float(ro.y.sub(waveHeight)).div(float(rd.y).negate()); 191 | } ) 192 | 193 | const cossin = Fn( ( [ angleRadians ] ) => { 194 | return sin(angleRadians.add(vec2(1.5708,0.0))); 195 | } ) 196 | 197 | const river = Fn(() => { 198 | 199 | const aspect = vec2(div(screenSize.x, screenSize.y), 1); 200 | const newUV = vec2(positionLocal.xy).toVar(); 201 | 202 | const qr = newUV; 203 | const cr = vec3(0.0).toVar(); 204 | const rc = vec3(0.0).toVar(); // look at point, spins around 205 | const ro = ( vec3( mul( 5., cossin( add( 4., this.mouseX ) ) ), int( 8 ) ).xzy ); 206 | const ww = vec3(normalize(rc.sub(ro))).toVar(); 207 | const uu = vec3(normalize(cross(vec3(0.0,.1,0.0), ww))).toVar(); 208 | const vv = vec3(normalize(cross(ww, uu))).toVar(); 209 | const rd = vec3(normalize( (uu.mul(qr.x)).add( vv.mul(qr.y)).add(ww))).toVar(); 210 | const d = float(intersectWave(ro, rd)).toVar(); 211 | 212 | If( d.greaterThan( 0.0 ), () => { 213 | 214 | cr.assign(vec3(lightWave(ro, rd, d))); 215 | 216 | } ); 217 | 218 | // postprocess 219 | cr.mulAssign(1.4); 220 | cr.assign(pow( cr, vec3(1.5,1.2,1.0))); 221 | cr.assign(ApplyGamma(cr)); 222 | 223 | return vec4(cr,1.0); 224 | 225 | })() 226 | 227 | this.material.colorNode = river; 228 | 229 | } 230 | 231 | autoMouse() { 232 | 233 | if( !this.downFlag ) this.mouseX.value += 0.001; 234 | 235 | } 236 | 237 | } -------------------------------------------------------------------------------- /the-river/src/js/utils/webgl-assets.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export class WebGLAssets { 4 | 5 | static loaded = true; 6 | static dictionary = {}; 7 | static intro = true; 8 | static isMobile = false; 9 | 10 | static position = null; 11 | static vUv = null; 12 | static position = null; 13 | static plane = null; 14 | static debris = null; 15 | 16 | } 17 | -------------------------------------------------------------------------------- /the-river/src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
0% 
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |

Tinker Day #26

25 |

And the river runs.

26 |
27 | 28 |
29 |
30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /the-river/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | const artifact = require('./package.json'); 6 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 7 | //const ESLintPlugin = require('eslint-webpack-plugin'); 8 | 9 | const fileName = `${artifact.name}-${artifact.version.slice(0, 3)}`; 10 | 11 | module.exports = (env, argv) => ({ 12 | entry: { 13 | [fileName]: './src/index.js', 14 | }, 15 | output: { 16 | filename: '[name].[fullhash].bundle.js', 17 | path: path.resolve(__dirname, 'dist'), 18 | publicPath: '', 19 | }, 20 | devServer: { 21 | historyApiFallback: true, 22 | open: true, 23 | compress: true, 24 | port: 8080, 25 | }, 26 | module: { 27 | rules: [ 28 | { 29 | test: /\.(css)$/, 30 | use: [ 31 | { loader: 'style-loader' }, 32 | { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } } 33 | ], 34 | }, 35 | { 36 | test: /\.js$/, 37 | exclude: /(node_modules)/, 38 | use: ['babel-loader'], 39 | }, 40 | { 41 | test: /\.(?:ico|gif|png|jpg|jpeg|webp|svg|stl)$/i, 42 | loader: 'file-loader', 43 | options: { 44 | name: '[path][name].[ext]', 45 | context: 'src', // prevent display of src/ in filename 46 | }, 47 | }, 48 | { 49 | test: /\.(woff(2)?|eot|ttf|otf|)$/, 50 | loader: 'url-loader', 51 | options: { 52 | limit: 8192, 53 | name: '[path][name].[ext]', 54 | context: 'src', // prevent display of src/ in filename 55 | }, 56 | }, 57 | ], 58 | }, 59 | plugins: [ 60 | new webpack.HotModuleReplacementPlugin(), 61 | /*new ESLintPlugin(),*/ 62 | new CopyWebpackPlugin({ 63 | patterns: [{ from: path.resolve(__dirname, 'public'), to: path.resolve(__dirname, 'dist') }], 64 | }), 65 | new HtmlWebpackPlugin({ 66 | title: 'Learning TSL: The river.', 67 | favicon: path.resolve(__dirname, 'public/favicon.png'), 68 | template: path.resolve(__dirname, 'src/template.html'), // template file 69 | filename: 'index.html', // output file 70 | }), 71 | ], 72 | devtool: 'eval-source-map', 73 | performance: { 74 | hints: false, 75 | maxEntrypointSize: 512000, 76 | maxAssetSize: 512000, 77 | }, 78 | }); 79 | --------------------------------------------------------------------------------