Skip to content

Commit 4feaabe

Browse files
ekzhangekzhang
committed
Initial commit
0 parents  commit 4feaabe

File tree

13 files changed

+320
-0
lines changed

13 files changed

+320
-0
lines changed

‎.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local
6+
.vscode

‎index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Real-Time Pencil Sketching</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/index.js"></script>
11+
</body>
12+
</html>

‎package-lock.json

Lines changed: 138 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "sketching",
3+
"version": "1.0.0",
4+
"description": "Real-time pencil sketching",
5+
"main": "index.html",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"serve": "vite preview"
10+
},
11+
"dependencies": {
12+
"regl": "^2.1.0",
13+
"resl": "^1.0.3",
14+
"three": "^0.127.0"
15+
},
16+
"devDependencies": {
17+
"vite": "^2.1.5"
18+
}
19+
}

‎src/frag.glsl

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
varying vec2 vUv;
2+
3+
varying vec2 vTexCoordA;
4+
varying vec2 vTexCoordB;
5+
varying vec2 vTexCoordC;
6+
7+
varying vec2 brightnessA; // a vector {brightness, 1}
8+
varying vec2 brightnessB; // a vector {brightness, 1}
9+
varying vec2 brightnessC; // a vector {brightness, 1}
10+
11+
uniform sampler2D textures[5];
12+
13+
void main() {
14+
highp int brightness = int(5.0 * brightnessA.x/brightnessA.y);
15+
if(brightness == 5){
16+
brightness = 4;
17+
}
18+
19+
vec4 textureA;// = texture2D(textures[4-brightness], vUv);
20+
switch(brightness){
21+
case 0:
22+
textureA = texture2D(textures[4], vUv);
23+
break;
24+
case 1:
25+
textureA = texture2D(textures[3], vUv);
26+
break;
27+
case 2:
28+
textureA = texture2D(textures[2], vUv);
29+
break;
30+
case 3:
31+
textureA = texture2D(textures[1], vUv);
32+
break;
33+
case 4:
34+
textureA = texture2D(textures[0], vUv);
35+
break;
36+
}
37+
38+
// gl_FragColor = vec4(vec3(brightnessA.x), 1.0);
39+
gl_FragColor = textureA;
40+
// gl_FragColor = vec4(vUv, 0.0, 0.0);
41+
}

‎src/index.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import "./styles.css";
2+
3+
import fragmentShader from "./frag.glsl?raw";
4+
import vertexShader from "./vert.glsl?raw";
5+
import texture0 from "./textures/texture0.png";
6+
import texture1 from "./textures/texture1.png";
7+
import texture2 from "./textures/texture2.png";
8+
import texture3 from "./textures/texture3.png";
9+
import texture4 from "./textures/texture4.png";
10+
11+
import {
12+
Scene,
13+
PerspectiveCamera,
14+
WebGLRenderer,
15+
BoxGeometry,
16+
ShaderMaterial,
17+
Mesh,
18+
UniformsUtils,
19+
ShaderLib,
20+
AmbientLight,
21+
PointLight,
22+
TextureLoader,
23+
} from "three";
24+
25+
const scene = new Scene();
26+
const camera = new PerspectiveCamera(
27+
75,
28+
window.innerWidth / window.innerHeight,
29+
0.1,
30+
1000
31+
);
32+
33+
const renderer = new WebGLRenderer();
34+
renderer.setSize(window.innerWidth, window.innerHeight);
35+
document.body.appendChild(renderer.domElement);
36+
37+
const geometry = new BoxGeometry();
38+
//const uniforms = UniformsUtils.merge([ShaderLib.phong.uniforms]);
39+
const textureLoader = new TextureLoader();
40+
41+
const uniforms = {
42+
textures: {
43+
value: [
44+
textureLoader.load(texture0),
45+
textureLoader.load(texture1),
46+
textureLoader.load(texture2),
47+
textureLoader.load(texture3),
48+
textureLoader.load(texture4),
49+
],
50+
},
51+
};
52+
53+
// var ambientLight = new AmbientLight(0xffffff, 0.2);
54+
// scene.add(ambientLight);
55+
56+
// var pointLight = new PointLight(0xffffff, 1, 100);
57+
// pointLight.position.set(3, 3, 3);
58+
// scene.add(pointLight);
59+
60+
const material = new ShaderMaterial({
61+
uniforms,
62+
vertexShader,
63+
fragmentShader,
64+
// lights: true,
65+
});
66+
const cube = new Mesh(geometry, material);
67+
scene.add(cube);
68+
69+
camera.position.z = 2;
70+
71+
function animate() {
72+
requestAnimationFrame(animate);
73+
cube.rotation.x += 0.02;
74+
cube.rotation.y += 0.02;
75+
renderer.render(scene, camera);
76+
}
77+
animate();

‎src/styles.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body {
2+
font-family: sans-serif;
3+
margin: 0;
4+
}

‎src/textures/texture0.png

359 Bytes
Loading

‎src/textures/texture1.png

879 Bytes
Loading

‎src/textures/texture2.png

2.38 KB
Loading

0 commit comments

Comments
 (0)