andras/decla-red
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Scaffold WebGl

Browse source
This commit is contained in:
schmelczerandras 2020-07-16 17:35:47 +02:00
parent 7c68deef24
commit fb50ade480
19 changed files with 186 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/index.html
View file

@ -14,6 +14,7 @@
<body>
<main>
<noscript><h1>Javascript is required for this website.</h1></noscript>
<canvas id="main"></canvas>
</main>
</body>
</html>

11
frontend/src/index.ts
View file

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

63
frontend/src/scripting/drawing/renderer.ts Normal file
View file

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

16
frontend/src/scripting/main.ts Normal file
View file

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

29
frontend/src/shaders/dist.frag
View file

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

8
frontend/src/shaders/ikeda-00-1593370449049.frag
View file

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

7
frontend/src/shaders/passthrough.vert Normal file
View file

@ -0,0 +1,7 @@
#version 300 es
in vec4 a_position;
void main() {
gl_Position = a_position;
}

19
frontend/src/styling/main.scss Normal file
View file

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