From fb50ade480fcad88ad3b4e60420f0bd633eef1ca Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Thu, 16 Jul 2020 17:35:47 +0200 Subject: [PATCH] Scaffold WebGl --- .gitignore | 2 - README.md | 6 ++ frontend/.gitignore | 3 + frontend/.prettierrc | 6 ++ frontend/custom.d.ts | 29 ++++++++ frontend/package.json | 10 +-- frontend/src/index.html | 1 + frontend/src/index.ts | 11 +-- frontend/src/scripting/drawing/renderer.ts | 63 ++++++++++++++++++ frontend/src/scripting/main.ts | 16 +++++ frontend/src/shaders/dist.frag | 29 +++----- .../src/shaders/ikeda-00-1593370449049.frag | 8 ++- frontend/src/shaders/passthrough.vert | 7 ++ frontend/src/styling/main.scss | 19 ++++++ frontend/{media => static}/declared.png | Bin frontend/{media => static}/declared.psd | 0 frontend/tsconfig.json | 18 ++--- frontend/webpack.config.js | 42 +----------- ingress/app.conf | 2 + 19 files changed, 186 insertions(+), 86 deletions(-) create mode 100644 frontend/.gitignore create mode 100644 frontend/.prettierrc create mode 100644 frontend/custom.d.ts create mode 100644 frontend/src/scripting/drawing/renderer.ts create mode 100644 frontend/src/scripting/main.ts create mode 100644 frontend/src/shaders/passthrough.vert create mode 100644 frontend/src/styling/main.scss rename frontend/{media => static}/declared.png (100%) rename frontend/{media => static}/declared.psd (100%) diff --git a/.gitignore b/.gitignore index 4bdc8a2..c5d417c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1 @@ -**/node_modules -**/dist infrastructure/data/certbot diff --git a/README.md b/README.md index e76a485..8626abf 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,9 @@ ![Deploy everything](https://github.com/schmelczerandras/decla.red/workflows/Deploy%20everything/badge.svg) A nice looking 2D adventure. + +## Development + +- npm install +- npm run start +- npm run build diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..91a3983 --- /dev/null +++ b/frontend/.gitignore @@ -0,0 +1,3 @@ +dist +node_modules +package-lock.json diff --git a/frontend/.prettierrc b/frontend/.prettierrc new file mode 100644 index 0000000..ea2afbe --- /dev/null +++ b/frontend/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "singleQuote": true, + "endOfLine": "lf" +} diff --git a/frontend/custom.d.ts b/frontend/custom.d.ts new file mode 100644 index 0000000..eae9908 --- /dev/null +++ b/frontend/custom.d.ts @@ -0,0 +1,29 @@ +declare module '*.frag' { + const content: string; + export default content; +} + +declare module '*.vert' { + const content: string; + export default content; +} + +/* +declare module '*.png' { + import { ResponsiveImage } from 'src/framework/model/misc'; + const content: ResponsiveImage; + export default content; +} + +declare module '*.jpg' { + import { ResponsiveImage } from 'src/framework/model/misc'; + const content: ResponsiveImage; + export default content; +} + +declare module '*.jpeg' { + import { ResponsiveImage } from 'src/framework/model/misc'; + const content: ResponsiveImage; + export default content; +} +*/ diff --git a/frontend/package.json b/frontend/package.json index 4d69294..7399b98 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,17 +1,15 @@ { "name": "decla.red", - "version": "1.0.0", + "version": "0.0.0", "description": "![logo](media/declared.png)", "private": true, "main": "index.js", "scripts": { "start": "webpack-dev-server --mode development", - "test": "echo \"Error: no test specified\" && exit 1", - "build": "webpack" + "build": "webpack && find dist -type f -not -name '*.html' | xargs rm" }, "keywords": [], "author": "András Schmelczer", - "license": "UNLICENSED", "postcss": { "plugins": { "autoprefixer": {} @@ -20,7 +18,9 @@ "browserslist": [ "defaults" ], - "sideEffects": false, + "sideEffects": [ + "*.scss" + ], "optimization": { "usedExports": true }, diff --git a/frontend/src/index.html b/frontend/src/index.html index 4d953ad..d96135b 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -14,6 +14,7 @@
+
diff --git a/frontend/src/index.ts b/frontend/src/index.ts index 0a88337..0d23ac2 100644 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -1,9 +1,4 @@ -function component() { - const element = document.createElement('div'); +import './styling/main.scss'; +import { main } from './scripting/main'; - element.innerHTML = 'Hello world'; - - return element; - } - -document.body.appendChild(component()); +main(); diff --git a/frontend/src/scripting/drawing/renderer.ts b/frontend/src/scripting/drawing/renderer.ts new file mode 100644 index 0000000..c6aa28d --- /dev/null +++ b/frontend/src/scripting/drawing/renderer.ts @@ -0,0 +1,63 @@ +import * as twgl from 'twgl.js'; + +export class Renderer { + private gl: WebGL2RenderingContext; + private programInfo: any; + private bufferInfo: any; + private vao: any; + + constructor(private canvas: HTMLCanvasElement, shaderSources: Array) { + twgl.setDefaults({ attribPrefix: 'a_' }); + + this.gl = this.canvas.getContext('webgl2'); + if (!this.gl) { + throw new Error('WebGl2 not supported'); + } + + this.programInfo = twgl.createProgramInfo(this.gl, shaderSources); + + const arrays = { + position: { + numComponents: 3, + data: [-1.0, -1.0, 0.0, -1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, -1.0, 0.0], + }, + indices: { + numComponents: 3, + data: [0, 1, 2, 0, 2, 3], + }, + }; + this.bufferInfo = twgl.createBufferInfoFromArrays(this.gl, arrays); + this.vao = twgl.createVAOFromBufferInfo( + this.gl, + this.programInfo, + this.bufferInfo + ); + } + + start() { + requestAnimationFrame(this.render.bind(this)); + } + + private render(time: number) { + const gl = this.gl; + + twgl.resizeCanvasToDisplaySize(this.canvas); + this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height); + + gl.clear(gl.COLOR_BUFFER_BIT); + + const uniforms = { + /*time: time * 0.001, + resolution: [this.gl.canvas.width, this.gl.canvas.height],*/ + }; + + this.gl.useProgram(this.programInfo.program); + this.gl.bindVertexArray(this.vao); + //twgl.setBuffersAndAttributes(this.gl, this.programInfo, this.bufferInfo); + + twgl.setUniforms(this.programInfo, uniforms); + twgl.drawBufferInfo(this.gl, this.bufferInfo); + + requestAnimationFrame(this.render.bind(this)); + } +} diff --git a/frontend/src/scripting/main.ts b/frontend/src/scripting/main.ts new file mode 100644 index 0000000..b225256 --- /dev/null +++ b/frontend/src/scripting/main.ts @@ -0,0 +1,16 @@ +import { Renderer } from './drawing/renderer'; + +import passthroughVertexShader from '../shaders/passthrough.vert'; +import distanceFragmentShader from '../shaders/dist.frag'; + + +export const main = () => { + try { + const canvas: HTMLCanvasElement = document.querySelector('canvas#main'); + const renderer = new Renderer(canvas, [passthroughVertexShader, distanceFragmentShader]); + renderer.start(); + } catch (e) { + console.error(e); + } + +}; diff --git a/frontend/src/shaders/dist.frag b/frontend/src/shaders/dist.frag index 0affcde..4091de5 100644 --- a/frontend/src/shaders/dist.frag +++ b/frontend/src/shaders/dist.frag @@ -1,23 +1,19 @@ -#ifdef GL_ES -precision mediump float; -#endif +#version 300 es -#define INFINITY 1.0 / 0.0 +precision mediump float; + + +#define INFINITY 10000000.0 #define WORLD_SIZE 4 #define N (20) -uniform vec2 u_resolution; -uniform vec2 u_mouse; -uniform float u_time; +out vec4 fragmentColor; -struct Light { - vec2 center; - float radius; - vec3 color; - float intensity; -}; +uniform vec2 resolution; +// uniform vec2 u_mouse; +uniform float time; struct Circle { vec2 center; @@ -52,11 +48,6 @@ float circleDistance(in vec2 position, in Circle circle) return length(position - circle.center) - circle.radius; } -float circleDistance(in vec2 position, in Light circle) -{ - return length(position - circle.center) - circle.radius; -} - float getDistance(in vec2 target) { float distance = INFINITY; for (int i = 0; i < WORLD_SIZE; i++) { @@ -93,5 +84,5 @@ void main() { vec2 position = gl_FragCoord.xy + vec2(0.5); vec3 color = vec3(1.0) * linearstep(0.0, 1.0, getDistance(position)); - gl_FragColor = vec4(color, 1.0); + fragmentColor = vec4(color, 1.0); } diff --git a/frontend/src/shaders/ikeda-00-1593370449049.frag b/frontend/src/shaders/ikeda-00-1593370449049.frag index 127f6e8..52ad335 100644 --- a/frontend/src/shaders/ikeda-00-1593370449049.frag +++ b/frontend/src/shaders/ikeda-00-1593370449049.frag @@ -1,3 +1,5 @@ +#version 300 es + #ifdef GL_ES precision mediump float; #endif @@ -10,9 +12,9 @@ precision mediump float; #define LIGHT_PENETRATION 0.95 #define ANTIALIASING_RADIUS 1.0 -uniform vec2 u_resolution; -uniform vec2 u_mouse; -uniform float u_time; +uniform vec2 resolution; +// uniform vec2 u_mouse; +uniform float time; struct Light { vec2 center; diff --git a/frontend/src/shaders/passthrough.vert b/frontend/src/shaders/passthrough.vert new file mode 100644 index 0000000..acfda9a --- /dev/null +++ b/frontend/src/shaders/passthrough.vert @@ -0,0 +1,7 @@ +#version 300 es + +in vec4 a_position; + +void main() { + gl_Position = a_position; +} diff --git a/frontend/src/styling/main.scss b/frontend/src/styling/main.scss new file mode 100644 index 0000000..b82cc94 --- /dev/null +++ b/frontend/src/styling/main.scss @@ -0,0 +1,19 @@ +html, body, main { + height: 100%; +} + +body { + margin: 0; + + background-color: #333; + main { + display: flex; + justify-content: center; + align-items: center; + + canvas { + width: 100%; + background-color: hotpink; + } + } +} diff --git a/frontend/media/declared.png b/frontend/static/declared.png similarity index 100% rename from frontend/media/declared.png rename to frontend/static/declared.png diff --git a/frontend/media/declared.psd b/frontend/static/declared.psd similarity index 100% rename from frontend/media/declared.psd rename to frontend/static/declared.psd diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 84285f1..32cb314 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -1,11 +1,11 @@ { - "compilerOptions": { - "outDir": "./dist/", - "sourceMap": true, - "noImplicitAny": false, - "module": "es6", - "target": "es5", - "downlevelIteration": true, - "allowJs": true - } + "compilerOptions": { + "outDir": "./dist/", + "sourceMap": true, + "noImplicitAny": false, + "module": "es6", + "target": "es5", + "downlevelIteration": true, + "allowJs": true + } } diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index c758a68..2a159be 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -62,40 +62,6 @@ module.exports = { placeholder: false, }, }, - { - test: /\.(webm|mp4|gif)$/i, - use: [ - { - loader: 'file-loader', - query: { - outputPath: 'static/', - }, - }, - { - loader: 'image-webpack-loader', - options: { - disable: !isProduction, - mozjpeg: { - progressive: true, - quality: 65, - }, - optipng: { - enabled: true, - }, - pngquant: { - quality: [0.65, 0.9], - speed: 4, - }, - gifsicle: { - interlaced: false, - }, - webp: { - quality: 65, - }, - }, - }, - ], - }, { test: /\.svg$/, loader: 'svg-url-loader', @@ -105,13 +71,9 @@ module.exports = { }, }, { - test: /\.(pdf)$/i, + test: /\.(frag|vert)$/i, use: { - loader: 'file-loader', - query: { - outputPath: 'static/', - name: '[name].[ext]', - }, + loader: 'raw-loader' }, }, { diff --git a/ingress/app.conf b/ingress/app.conf index 194d2a8..bab1992 100644 --- a/ingress/app.conf +++ b/ingress/app.conf @@ -17,6 +17,8 @@ server { server_name decla.red; server_tokens off; + add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; + ssl_certificate /etc/letsencrypt/live/decla.red/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/decla.red/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf;