Avatar

@stwind

1 like2 public vals
Joined January 29, 2023
software engineer

Testing WebGL

A minimal template for writing shaders.

Readme
Fork
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
export async function WebGLTest(request: Request): Promise<Response> {
const vs = `#version 300 es
precision highp float;
layout(location=0) in vec2 position;
layout(location=1) in vec2 texcoord;
out vec2 v_texcoord;
void main() {
v_texcoord = texcoord;
gl_Position = vec4(position, 0.0, 1.0);
}`;
const fs = `#version 300 es
precision highp float;
in vec2 v_texcoord;
layout(location=0) out vec4 fragColor;
void main() {
fragColor = vec4(v_texcoord, 1.,1.);
}`;
return new Response(
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>WebGL</title>
<style>
*,*::before,*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,body {
overflow: hidden;
}
#canvas {
width: 100vw;
height: 100dvh;
touch-action: none;
}
</style>
Fork
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const trio = {
substance: `
Set A
Label A $e=mc^2$
`,
style: `
canvas {
width = 150
height = 150
}
forall Set A {
center = (0, 0)
Circle {
center: center
r: 50
}
Equation {
center: center
string: A.label
}
}`,
domain: "type Set",
variation: "test",
};
export const penrose = (req: Request): Response =>
new Response(
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>WebGL</title>
<style>
*,*::before,*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
</style>
</head>
<body>
<script type="importmap">{
"imports": {
"@penrose/core": "https://ga.jspm.io/npm:@penrose/core@3.2.0/dist/index.js"
},
"scopes": {
Next