gbrochar
/
webgl
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

move shaders to files

This commit is contained in:
gbrochar 2020-11-25 21:07:21 +01:00
parent 54522a779c
commit ac2d5bcecb
11 changed files with 251 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
config/webpack.client.common.js
View File

@ -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: [

52
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

9
src/client/index.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
declare module '*.frag' {
const value: string
export default value
}
declare module '*.vert' {
const value: string
export default value
}

201
src/client/main.ts
View File

@ -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.</p>`);
}
/* 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

36
src/client/shaders/blackandwhite.frag Normal file
View File

@ -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);
}

35
src/client/shaders/colored.frag Normal file
View File

@ -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);
}

18
src/client/shaders/grey.frag Normal file
View File

@ -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);
}

24
src/client/shaders/shader.vert Normal file
View File

@ -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;
}

46
src/client/shaders/sobel.frag Normal file
View File

@ -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);
}
}

19
src/client/shaders/texture.frag Normal file
View File

@ -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);
}