diff --git a/config/webpack.client.common.js b/config/webpack.client.common.js index 72eca2e..53d84db 100644 --- a/config/webpack.client.common.js +++ b/config/webpack.client.common.js @@ -10,13 +10,17 @@ module.exports = { }, target: 'web', resolve: { - extensions: ['.ts', '.tsx', '.js', '.json'] + extensions: ['.ts', '.tsx', '.js', '.json', '.glsl', '.frag', '.vert'] }, module: { rules: [{ test: /\.tsx?$/, loader: 'babel-loader', include: path.join(__dirname, '../src/client'), + },{ + test: /\.(frag|vert|glsl)$/, + loader: 'glsl-shader-loader', + include: path.join(__dirname, '../src/client/shaders'), }], }, plugins: [ diff --git a/package-lock.json b/package-lock.json index 121199b..19c5334 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2383,6 +2383,15 @@ "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", "dev": true }, + "cssauron": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/cssauron/-/cssauron-1.4.0.tgz", + "integrity": "sha1-pmAt/34EqDBtwNuaVR6S6LVmKtg=", + "dev": true, + "requires": { + "through": "X.X.X" + } + }, "csstype": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz", @@ -3272,6 +3281,26 @@ "slash": "^3.0.0" } }, + "glsl-man": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/glsl-man/-/glsl-man-1.1.14.tgz", + "integrity": "sha512-yM/+5DCpHGIDO+qtMTDp2PLgl+g+4WbqmJlA4baCRkNwuOZbpNDyBaS1gfGaJIV/BrMKDuFBr6niOeRHV1iAeg==", + "dev": true, + "requires": { + "cssauron": "^1.4.0", + "tree-traversal": "^1.1.1" + } + }, + "glsl-shader-loader": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/glsl-shader-loader/-/glsl-shader-loader-0.1.6.tgz", + "integrity": "sha512-RInPlABhbFcVZ7d69Zs9ckJ9TPr7lEgZouuGRqUpRVouOiH2ZyikAIkSKEzkJWOyJa25Lc6VeAVk4F2ef5OXBg==", + "dev": true, + "requires": { + "glsl-man": "^1.1.14", + "loader-utils": "^1.1.0" + } + }, "got": { "version": "9.6.0", "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", @@ -5166,6 +5195,12 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", + "dev": true + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -5207,6 +5242,23 @@ "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", "dev": true }, + "tree-traversal": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/tree-traversal/-/tree-traversal-1.1.1.tgz", + "integrity": "sha1-cUg7PL4BxcMhT1pYODuqoM8dzL4=", + "dev": true, + "requires": { + "async": "^1.4.2" + }, + "dependencies": { + "async": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", + "dev": true + } + } + }, "tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", diff --git a/package.json b/package.json index 6fe8a72..7cb3576 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "eslint-config-google": "^0.14.0", "eslint-plugin-react": "^7.21.5", "eslint-webpack-plugin": "^2.4.0", + "glsl-shader-loader": "^0.1.6", "nodemon": "^2.0.6", "typescript": "^4.1.2", "webpack": "^5.6.0", diff --git a/src/client/index.d.ts b/src/client/index.d.ts new file mode 100644 index 0000000..3b03024 --- /dev/null +++ b/src/client/index.d.ts @@ -0,0 +1,9 @@ +declare module '*.frag' { + const value: string + export default value +} + +declare module '*.vert' { + const value: string + export default value +} \ No newline at end of file diff --git a/src/client/main.ts b/src/client/main.ts index a27663c..3995b15 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -3,6 +3,12 @@ import mat4 from 'gl-mat4'; // @ts-ignore import {convert} from './objparser'; import $ from 'jquery'; +import vsSource from './shaders/shader.vert'; +import fsSource from './shaders/blackandwhite.frag'; +import fsSource2 from './shaders/colored.frag'; +import fsSource3 from './shaders/grey.frag'; +import fsSource4 from './shaders/texture.frag'; +import fsSource5 from './shaders/sobel.frag'; import {initBuffers, deleteBuffers} from './buffers'; import {initShaderProgram} from './shaders'; @@ -27,201 +33,6 @@ async function main() { support it.

`); } - /* eslint-disable */ - - const vsSource = ` - attribute vec4 aVertexPosition; - attribute vec4 aVertexNormal; - attribute vec2 aTextureCoord; - - uniform mat4 uProjectionMatrix; - uniform mat4 uviewMatrix; - uniform mat4 umodelMatrix; - uniform mat4 unormalModelMatrix; - - varying highp vec4 vNormal; - varying highp vec3 vPosition; - varying highp vec2 vTextureCoord; - - void main() - { - gl_Position = uProjectionMatrix * - uviewMatrix * - umodelMatrix * - unormalModelMatrix * - aVertexPosition; - vPosition = vec3(aVertexPosition); - vNormal = unormalModelMatrix * aVertexNormal; - vTextureCoord = aTextureCoord; - } - `; - - const fsSource = ` - precision highp float; - - varying highp vec2 vTextureCoord; - varying highp vec4 vNormal; - varying highp vec3 vPosition; - - uniform sampler2D uSampler; - - vec3 extremize(vec3 v, float n) { - if (v.x > n / 2.) - v.x = n; - else - v.x = 0.; - if (v.y > n / 2.) - v.y = n; - else - v.y = 0.; - if (v.z > n / 2.) - v.z = n; - else - v.z = 0.; - return v; - } - - void main() { - vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); - float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); - float specular = pow( - max(dot( - reflect(n, normalize(vNormal.xyz)), - normalize(vec3(0., 0., -50.) - vPosition)), - 0.), 10.); - vec3 tmp = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.); - float texture = (tmp.x + tmp.y + tmp.z) / 6.; - gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0); - }`; - - const fsSource2 = ` - precision highp float; - - varying highp vec2 vTextureCoord; - varying highp vec4 vNormal; - varying highp vec3 vPosition; - - uniform sampler2D uSampler; - - vec3 extremize(vec3 v, float n) { - if (v.x > n / 2.) - v.x = n; - else - v.x = 0.; - if (v.y > n / 2.) - v.y = n; - else - v.y = 0.; - if (v.z > n / 2.) - v.z = n; - else - v.z = 0.; - return v; - } - - void main() { - vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); - float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); - float specular = pow( - max(dot( - reflect(n, normalize(vNormal.xyz)), - normalize(vec3(0., 0., -50.) - vPosition)), - 0.), 10.); - vec3 texture = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.) / vec3(2); - gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0); - }`; - - const fsSource3 = ` - precision highp float; - - varying highp vec2 vTextureCoord; - varying highp vec4 vNormal; - varying highp vec3 vPosition; - - uniform sampler2D uSampler; - - void main() { - vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); - float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); - float specular = pow( - max(dot( - reflect(n, normalize(vNormal.xyz)), - normalize(vec3(0., 0., -50.) - vPosition)), - 0.), 10.); - gl_FragColor = vec4((diffuse * 0.8) + (vec3(0.2)) + (specular * vec3(1.)), 1.0); - }`; - - const fsSource4 = ` - precision highp float; - - varying highp vec2 vTextureCoord; - - varying highp vec4 vNormal; - varying highp vec3 vPosition; - uniform sampler2D uSampler; - - void main() { - highp vec4 texelColor = texture2D(uSampler, vTextureCoord); - vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); - float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); - float specular = pow( - max(dot( - reflect(n, normalize(vNormal.xyz)), - normalize(vec3(0., 0., -50.) - vPosition)), - 0.), 10.); - gl_FragColor = vec4((texelColor.xyz * diffuse * 0.8) + (texelColor.xyz * vec3(0.2)) + (specular * vec3(1.)), 1.0); - }`; - - const fsSource5 = ` - precision highp float; - - varying highp vec2 vTextureCoord; - varying highp vec4 vNormal; - varying highp vec3 vPosition; - - uniform sampler2D uSampler; - - void make_kernel(inout vec4 n[9], sampler2D tex, vec2 coord) - { - float w = 1.0 / 640.; - float h = 1.0 / 640.; - - n[0] = texture2D(tex, coord + vec2( -w, -h)); - n[1] = texture2D(tex, coord + vec2(0.0, -h)); - n[2] = texture2D(tex, coord + vec2( w, -h)); - n[3] = texture2D(tex, coord + vec2( -w, 0.0)); - n[4] = texture2D(tex, coord); - n[5] = texture2D(tex, coord + vec2( w, 0.0)); - n[6] = texture2D(tex, coord + vec2( -w, h)); - n[7] = texture2D(tex, coord + vec2(0.0, h)); - n[8] = texture2D(tex, coord + vec2( w, h)); - } - - void main(void) - { - vec4 n[9]; - make_kernel( n, uSampler, vTextureCoord); - - vec4 sobel_edge_h = n[2] + (2.0*n[5]) + n[8] - (n[0] + (2.0*n[3]) + n[6]); - vec4 sobel_edge_v = n[0] + (2.0*n[1]) + n[2] - (n[6] + (2.0*n[7]) + n[8]); - vec4 sobel = sqrt((sobel_edge_h * sobel_edge_h) + (sobel_edge_v * sobel_edge_v)); - - if ((1. - sobel.r) + (1. - sobel.g) + (1. - sobel.b) < 2.5) - gl_FragColor = vec4(1.0 - sobel.rgb, 1.0 ); - else { - vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); - float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); - float specular = pow( - max(dot( - reflect(n, normalize(vNormal.xyz)), - normalize(vec3(0., 0., -50.) - vPosition)), - 0.), 10.); - gl_FragColor = vec4((diffuse * 0.8) + (vec3(0.2)) + (specular * vec3(1.)), 1.0); - } - }`; - - /* eslint-enable */ - /** * Fetch an obj file * @param {string} url the url to fetch the object from diff --git a/src/client/shaders/blackandwhite.frag b/src/client/shaders/blackandwhite.frag new file mode 100644 index 0000000..7d60adf --- /dev/null +++ b/src/client/shaders/blackandwhite.frag @@ -0,0 +1,36 @@ +precision highp float; + +varying highp vec2 vTextureCoord; +varying highp vec4 vNormal; +varying highp vec3 vPosition; + +uniform sampler2D uSampler; + +vec3 extremize(vec3 v, float n) { + if (v.x > n / 2.) + v.x = n; + else + v.x = 0.; + if (v.y > n / 2.) + v.y = n; + else + v.y = 0.; + if (v.z > n / 2.) + v.z = n; + else + v.z = 0.; + return v; +} + +void main() { + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); + float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); + float specular = pow( + max(dot( + reflect(n, normalize(vNormal.xyz)), + normalize(vec3(0., 0., -50.) - vPosition)), + 0.), 10.); + vec3 tmp = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.); + float texture = (tmp.x + tmp.y + tmp.z) / 6.; + gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0); +} \ No newline at end of file diff --git a/src/client/shaders/colored.frag b/src/client/shaders/colored.frag new file mode 100644 index 0000000..0aaeb95 --- /dev/null +++ b/src/client/shaders/colored.frag @@ -0,0 +1,35 @@ +precision highp float; + +varying highp vec2 vTextureCoord; +varying highp vec4 vNormal; +varying highp vec3 vPosition; + +uniform sampler2D uSampler; + +vec3 extremize(vec3 v, float n) { + if (v.x > n / 2.) + v.x = n; + else + v.x = 0.; + if (v.y > n / 2.) + v.y = n; + else + v.y = 0.; + if (v.z > n / 2.) + v.z = n; + else + v.z = 0.; + return v; +} + +void main() { + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); + float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); + float specular = pow( + max(dot( + reflect(n, normalize(vNormal.xyz)), + normalize(vec3(0., 0., -50.) - vPosition)), + 0.), 10.); + vec3 texture = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.) / vec3(2); + gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0); +} \ No newline at end of file diff --git a/src/client/shaders/grey.frag b/src/client/shaders/grey.frag new file mode 100644 index 0000000..f0fdca5 --- /dev/null +++ b/src/client/shaders/grey.frag @@ -0,0 +1,18 @@ +precision highp float; + +varying highp vec2 vTextureCoord; +varying highp vec4 vNormal; +varying highp vec3 vPosition; + +uniform sampler2D uSampler; + +void main() { + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); + float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); + float specular = pow( + max(dot( + reflect(n, normalize(vNormal.xyz)), + normalize(vec3(0., 0., -50.) - vPosition)), + 0.), 10.); + gl_FragColor = vec4((diffuse * 0.8) + (vec3(0.2)) + (specular * vec3(1.)), 1.0); +} \ No newline at end of file diff --git a/src/client/shaders/shader.vert b/src/client/shaders/shader.vert new file mode 100644 index 0000000..f06106e --- /dev/null +++ b/src/client/shaders/shader.vert @@ -0,0 +1,24 @@ +attribute vec4 aVertexPosition; +attribute vec4 aVertexNormal; +attribute vec2 aTextureCoord; + +uniform mat4 uProjectionMatrix; +uniform mat4 uviewMatrix; +uniform mat4 umodelMatrix; +uniform mat4 unormalModelMatrix; + +varying highp vec4 vNormal; +varying highp vec3 vPosition; +varying highp vec2 vTextureCoord; + +void main() +{ + gl_Position = uProjectionMatrix * + uviewMatrix * + umodelMatrix * + unormalModelMatrix * + aVertexPosition; + vPosition = vec3(aVertexPosition); + vNormal = unormalModelMatrix * aVertexNormal; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/client/shaders/sobel.frag b/src/client/shaders/sobel.frag new file mode 100644 index 0000000..f86703f --- /dev/null +++ b/src/client/shaders/sobel.frag @@ -0,0 +1,46 @@ +precision highp float; + +varying highp vec2 vTextureCoord; +varying highp vec4 vNormal; +varying highp vec3 vPosition; + +uniform sampler2D uSampler; + +void make_kernel(inout vec4 n[9], sampler2D tex, vec2 coord) +{ + float w = 1.0 / 640.; + float h = 1.0 / 640.; + + n[0] = texture2D(tex, coord + vec2( -w, -h)); + n[1] = texture2D(tex, coord + vec2(0.0, -h)); + n[2] = texture2D(tex, coord + vec2( w, -h)); + n[3] = texture2D(tex, coord + vec2( -w, 0.0)); + n[4] = texture2D(tex, coord); + n[5] = texture2D(tex, coord + vec2( w, 0.0)); + n[6] = texture2D(tex, coord + vec2( -w, h)); + n[7] = texture2D(tex, coord + vec2(0.0, h)); + n[8] = texture2D(tex, coord + vec2( w, h)); +} + +void main(void) +{ + vec4 n[9]; + make_kernel( n, uSampler, vTextureCoord); + + vec4 sobel_edge_h = n[2] + (2.0*n[5]) + n[8] - (n[0] + (2.0*n[3]) + n[6]); + vec4 sobel_edge_v = n[0] + (2.0*n[1]) + n[2] - (n[6] + (2.0*n[7]) + n[8]); + vec4 sobel = sqrt((sobel_edge_h * sobel_edge_h) + (sobel_edge_v * sobel_edge_v)); + + if ((1. - sobel.r) + (1. - sobel.g) + (1. - sobel.b) < 2.5) + gl_FragColor = vec4(1.0 - sobel.rgb, 1.0 ); + else { + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); + float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); + float specular = pow( + max(dot( + reflect(n, normalize(vNormal.xyz)), + normalize(vec3(0., 0., -50.) - vPosition)), + 0.), 10.); + gl_FragColor = vec4((diffuse * 0.8) + (vec3(0.2)) + (specular * vec3(1.)), 1.0); + } +} \ No newline at end of file diff --git a/src/client/shaders/texture.frag b/src/client/shaders/texture.frag new file mode 100644 index 0000000..af4c61c --- /dev/null +++ b/src/client/shaders/texture.frag @@ -0,0 +1,19 @@ +precision highp float; + +varying highp vec2 vTextureCoord; + +varying highp vec4 vNormal; +varying highp vec3 vPosition; +uniform sampler2D uSampler; + +void main() { + highp vec4 texelColor = texture2D(uSampler, vTextureCoord); + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); + float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); + float specular = pow( + max(dot( + reflect(n, normalize(vNormal.xyz)), + normalize(vec3(0., 0., -50.) - vPosition)), + 0.), 10.); + gl_FragColor = vec4((texelColor.xyz * diffuse * 0.8) + (texelColor.xyz * vec3(0.2)) + (specular * vec3(1.)), 1.0); +} \ No newline at end of file