${config.title}
` : ''} 25 | ${ 26 | config.description 27 | ? `
28 |
`
30 | : ``
31 | }
32 | ${config.description}
29 |
33 | ${
34 | config.twitter
35 | ? `
36 | 
37 | `
38 | : ``
39 | }
40 | ${
41 | config.github
42 | ? `
43 | 
44 | `
45 | : ``
46 | }
47 |
48 | `
49 | )
50 | document.body.prepend(container)
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/engine/interface/Loader.ts:
--------------------------------------------------------------------------------
1 | import './loader.scss'
2 |
3 | export class Loader {
4 | element: HTMLDivElement
5 |
6 | constructor() {
7 | this.element = document.createElement('div')
8 | this.element.classList.add('loader')
9 | this.element.insertAdjacentHTML(
10 | 'beforeend',
11 | `
12 |
13 |
16 | `
17 | )
18 |
19 | this.start()
20 | }
21 |
22 | start() {
23 | document.body.prepend(this.element)
24 | }
25 |
26 | setProgress(progress: number) {
27 | const progressNumber = this.element.querySelector(
28 | '.progress-number'
29 | ) as HTMLHeadingElement
30 |
31 | progressNumber!.innerText = `${Math.floor(progress * 100)}%`
32 |
33 | const progressBar = this.element.querySelector(
34 | '.progress-bar'
35 | ) as HTMLDivElement
36 |
37 | progressBar.style.width = `${progress * 100}%`
38 | }
39 |
40 | complete() {
41 | this.element.remove()
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/engine/interface/info.scss:
--------------------------------------------------------------------------------
1 | .info-container {
2 | position: absolute;
3 | bottom: 0;
4 | left: 0;
5 | padding: 16px 20px;
6 |
7 | display: flex;
8 | flex-direction: column;
9 |
10 | user-select: none;
11 | opacity: 40%;
12 | transition: opacity 0.3s ease-in-out;
13 |
14 | color: #fff;
15 | font-family: 'Helvetica', 'Arial', sans-serif;
16 | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
17 |
18 | &:hover {
19 | opacity: 100%;
20 | }
21 |
22 | h1 {
23 | margin-bottom: 0;
24 | font-weight: normal;
25 | }
26 |
27 | .description {
28 | width: 250px;
29 | max-width: 100%;
30 | margin-bottom: 4px;
31 | }
32 |
33 | .social-container {
34 | display: flex;
35 | flex-direction: row;
36 | justify-content: flex-start;
37 | align-items: center;
38 | }
39 |
40 | .social-button {
41 | display: flex;
42 | width: 24px;
43 | height: 24px;
44 | padding: 8px;
45 | margin-right: 8px;
46 | border-radius: 50px;
47 | align-items: center;
48 |
49 | background: #fff;
50 | transition: box-shadow 0.3s ease-in-out;
51 |
52 | &:hover {
53 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
54 | }
55 |
56 | img {
57 | max-width: 100%;
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/engine/interface/loader.scss:
--------------------------------------------------------------------------------
1 | .loader {
2 | width: 100%;
3 | height: 100%;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 |
8 | color: #fff;
9 | font-family: 'Helvetica', 'Arial', sans-serif;
10 | font-weight: normal;
11 |
12 | .loader-inner {
13 | width: 500px;
14 | max-width: 95%;
15 | }
16 |
17 | .progress-number {
18 | text-align: center;
19 | }
20 |
21 | .progress-bar {
22 | background-color: #fff;
23 | transition: width 0.3s ease-in-out;
24 |
25 | height: 5px;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/engine/utilities/EventEmitter.ts:
--------------------------------------------------------------------------------
1 | export class EventEmitter {
2 | private listeners: { [key: string]: Function[] } = {}
3 |
4 | public on(event: string, listener: Function) {
5 | if (!this.listeners[event]) {
6 | this.listeners[event] = []
7 | }
8 |
9 | this.listeners[event].push(listener)
10 |
11 | return () => this.off(event, listener)
12 | }
13 |
14 | public off(event: string, listener: Function) {
15 | if (!this.listeners[event]) {
16 | return
17 | }
18 |
19 | const index = this.listeners[event].indexOf(listener)
20 |
21 | if (index === -1) {
22 | return
23 | }
24 |
25 | this.listeners[event].splice(index, 1)
26 | }
27 |
28 | public emit(event: string, ...args: any[]) {
29 | if (!this.listeners[event]) {
30 | return
31 | }
32 |
33 | this.listeners[event].forEach((listener) => listener(...args))
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './style.scss'
2 | import { Engine } from './engine/Engine'
3 | import { PencilLines } from './pencil-lines/PencilLines'
4 |
5 | new Engine({
6 | canvas: document.querySelector('#canvas') as HTMLCanvasElement,
7 | experience: PencilLines,
8 | info: {
9 | twitter: 'https://twitter.com/maya_ndljk',
10 | github: 'https://github.com/mayacoda/pencil-lines',
11 | description: 'Three.js postprocessing effect to mimic sketchy lines',
12 | documentTitle: 'Pencil Lines',
13 | title: 'Pencil Lines',
14 | },
15 | })
16 |
--------------------------------------------------------------------------------
/src/pencil-lines/Box.ts:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three'
2 |
3 | export class Box extends THREE.Mesh {
4 | constructor() {
5 | const geometry = new THREE.TorusKnotGeometry(1, 0.3, 200, 32)
6 |
7 | const material = new THREE.MeshBasicMaterial({
8 | color: 0x99dd99,
9 | })
10 |
11 | super(geometry, material)
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/pencil-lines/PencilLines.ts:
--------------------------------------------------------------------------------
1 | import type { Experience } from '../engine/Experience'
2 | import type { Resource } from '../engine/Resources'
3 | import type { Engine } from '../engine/Engine'
4 | import * as THREE from 'three'
5 | import { Box } from './Box'
6 | import { PencilLinesPass } from './PencilLinesPass'
7 |
8 | export class PencilLines implements Experience {
9 | resources: Resource[] = [
10 | {
11 | name: 'colorNoiseTexture',
12 | type: 'texture',
13 | path: 'textures/color-noise.png',
14 | },
15 | {
16 | name: 'cloudTexture',
17 | type: 'texture',
18 | path: 'textures/cloud-noise.png',
19 | },
20 | ]
21 | pencilLinesPass!: PencilLinesPass
22 |
23 | constructor(private engine: Engine) {}
24 |
25 | init() {
26 | const plane = new THREE.Mesh(
27 | new THREE.PlaneGeometry(10, 10),
28 | new THREE.MeshStandardMaterial({ color: 0xffffff })
29 | )
30 |
31 | plane.rotation.x = -Math.PI / 2
32 | plane.receiveShadow = true
33 |
34 | this.engine.scene.add(plane)
35 | this.engine.scene.add(new THREE.AmbientLight(0xffffff, 0.5))
36 |
37 | let directionalLight = new THREE.DirectionalLight(0xffffff, 1)
38 | directionalLight.castShadow = true
39 | directionalLight.position.set(2, 2, 2)
40 | directionalLight.shadow.mapSize.width = 2048
41 | directionalLight.shadow.mapSize.height = 2048
42 |
43 | this.engine.scene.add(directionalLight)
44 |
45 | const box = new Box()
46 | box.castShadow = true
47 | box.rotation.y = Math.PI / 4
48 | box.position.set(0, 0.5, 0)
49 |
50 | this.engine.scene.add(box)
51 |
52 | this.pencilLinesPass = new PencilLinesPass(this.engine)
53 | this.engine.renderEngine.composer.addPass(this.pencilLinesPass)
54 | }
55 |
56 | update() {}
57 | }
58 |
--------------------------------------------------------------------------------
/src/pencil-lines/PencilLinesPass.ts:
--------------------------------------------------------------------------------
1 | import { FullScreenQuad, Pass } from 'three/examples/jsm/postprocessing/Pass'
2 | import type { WebGLRenderer } from 'three'
3 | import {
4 | HalfFloatType,
5 | MeshNormalMaterial,
6 | NearestFilter,
7 | RGBAFormat,
8 | WebGLRenderTarget,
9 | } from 'three'
10 | import { PencilLinesShader } from './PencilLinesShader'
11 | import type { Engine } from '../engine/Engine'
12 |
13 | export class PencilLinesPass extends Pass {
14 | fsQuad: FullScreenQuad
15 | material: PencilLinesShader
16 | normalMaterial: MeshNormalMaterial
17 |
18 | surfaceBuffer: WebGLRenderTarget
19 |
20 | constructor(private engine: Engine) {
21 | super()
22 |
23 | this.fsQuad = new FullScreenQuad()
24 | this.material = new PencilLinesShader(this.engine)
25 |
26 | this.fsQuad.material = this.material
27 |
28 | const surfaceBuffer = new WebGLRenderTarget(
29 | this.engine.sizes.width,
30 | this.engine.sizes.height
31 | )
32 | surfaceBuffer.texture.format = RGBAFormat
33 | surfaceBuffer.texture.type = HalfFloatType
34 | surfaceBuffer.texture.minFilter = NearestFilter
35 | surfaceBuffer.texture.magFilter = NearestFilter
36 | surfaceBuffer.texture.generateMipmaps = false
37 | surfaceBuffer.stencilBuffer = false
38 | this.surfaceBuffer = surfaceBuffer
39 |
40 | this.normalMaterial = new MeshNormalMaterial()
41 |
42 | this.material.uniforms.uCameraNear.value = this.engine.camera.instance.near
43 | this.material.uniforms.uCameraFar.value = this.engine.camera.instance.far
44 | }
45 |
46 | render(
47 | renderer: WebGLRenderer,
48 | writeBuffer: WebGLRenderTarget,
49 | readBuffer: WebGLRenderTarget
50 | ) {
51 | const depthBuffer = writeBuffer.depthBuffer
52 | writeBuffer.depthBuffer = false
53 |
54 | renderer.setRenderTarget(this.surfaceBuffer)
55 | const overrideMaterialValue = this.engine.scene.overrideMaterial
56 |
57 | this.engine.scene.overrideMaterial = this.normalMaterial
58 | renderer.render(this.engine.scene, this.engine.camera.instance)
59 | this.engine.scene.overrideMaterial = overrideMaterialValue
60 |
61 | this.material.uniforms.uDiffuse.value = readBuffer.texture
62 | this.material.uniforms.uDepthBuffer.value = readBuffer.depthTexture
63 | this.material.uniforms.uSurfaceBuffer.value = this.surfaceBuffer.texture
64 |
65 | if (this.renderToScreen) {
66 | renderer.setRenderTarget(null)
67 | this.fsQuad.render(renderer)
68 | } else {
69 | renderer.setRenderTarget(writeBuffer)
70 | if (this.clear) renderer.clear()
71 | this.fsQuad.render(renderer)
72 | }
73 |
74 | writeBuffer.depthBuffer = depthBuffer
75 | }
76 |
77 | dispose() {
78 | this.material.dispose()
79 | this.fsQuad.dispose()
80 | }
81 |
82 | setSize() {
83 | this.material.resize()
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/pencil-lines/PencilLinesShader.ts:
--------------------------------------------------------------------------------
1 | import { ShaderMaterial, Vector2 } from 'three'
2 | import fragmentShader from './shaders/pencil-lines.frag'
3 | import vertexShader from './shaders/pencil-lines.vert'
4 | import { GameEntity } from '../engine/GameEntity'
5 | import { Engine } from '../engine/Engine'
6 |
7 | export class PencilLinesShader extends ShaderMaterial implements GameEntity {
8 | constructor(private engine: Engine) {
9 | super({
10 | uniforms: {
11 | uDiffuse: { value: null },
12 | uResolution: {
13 | value: new Vector2(1, 1),
14 | },
15 | uDepthBuffer: { value: null },
16 | uSurfaceBuffer: { value: null },
17 | uCameraNear: { value: engine.camera.instance.near },
18 | uCameraFar: { value: engine.camera.instance.far },
19 |
20 | uColorTexture: {
21 | value: engine.resources.getItem('colorNoiseTexture'),
22 | },
23 | uCloudTexture: {
24 | value: engine.resources.getItem('cloudTexture'),
25 | },
26 | },
27 | fragmentShader,
28 | vertexShader,
29 | })
30 |
31 | this.uniforms.uResolution.value = new Vector2(
32 | this.engine.sizes.width,
33 | this.engine.sizes.height
34 | )
35 | }
36 |
37 | update() {}
38 |
39 | resize() {
40 | this.uniforms.uResolution.value = new Vector2(
41 | this.engine.sizes.width,
42 | this.engine.sizes.height
43 | )
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/pencil-lines/shaders/gradientNoise.glsl:
--------------------------------------------------------------------------------
1 | // The MIT License
2 | // Copyright © 2013 Inigo Quilez
3 | // Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
4 | // https://www.youtube.com/c/InigoQuilez
5 | // https://iquilezles.org
6 |
7 |
8 | // Gradient Noise (http://en.wikipedia.org/wiki/Gradient_noise), not to be confused with
9 | // Value Noise, and neither with Perlin's Noise (which is one form of Gradient Noise)
10 | // is probably the most convenient way to generate noise (a random smooth signal with
11 | // mostly all its energy in the low frequencies) suitable for procedural texturing/shading,
12 | // modeling and animation.
13 | //
14 | // It produces smoother and higher quality than Value Noise, but it's of course slighty more
15 | // expensive.
16 | //
17 | // The princpiple is to create a virtual grid/latice all over the plane, and assign one
18 | // random vector to every vertex in the grid. When querying/requesting a noise value at
19 | // an arbitrary point in the plane, the grid cell in which the query is performed is
20 | // determined, the four vertices of the grid are determined and their random vectors
21 | // fetched. Then, the position of the current point under evaluation relative to each
22 | // vertex is doted (projected) with that vertex' random vector, and the result is
23 | // bilinearly interpolated with a smooth interpolant.
24 |
25 |
26 | // Value Noise 2D, Derivatives: https://www.shadertoy.com/view/4dXBRH
27 | // Gradient Noise 2D, Derivatives: https://www.shadertoy.com/view/XdXBRH
28 | // Value Noise 3D, Derivatives: https://www.shadertoy.com/view/XsXfRH
29 | // Gradient Noise 3D, Derivatives: https://www.shadertoy.com/view/4dffRH
30 | // Value Noise 2D : https://www.shadertoy.com/view/lsf3WH
31 | // Value Noise 3D : https://www.shadertoy.com/view/4sfGzS
32 | // Gradient Noise 2D : https://www.shadertoy.com/view/XdXGW8
33 | // Gradient Noise 3D : https://www.shadertoy.com/view/Xsl3Dl
34 | // Simplex Noise 2D : https://www.shadertoy.com/view/Msf3WH
35 | // Wave Noise 2D : https://www.shadertoy.com/view/tldSRj
36 |
37 | // replace this anything that returns a random vector
38 | vec2 grad(ivec2 z) {
39 | // 2D to 1D (feel free to replace by some other)
40 | int n = z.x+z.y*11111;
41 |
42 | // Hugo Elias hash (feel free to replace by another one)
43 | n = (n<<13)^n;
44 | n = (n*(n*n*15731+789221)+1376312589)>>16;
45 |
46 | #if 0
47 |
48 | // simple random vectors
49 | return vec2(cos(float(n)), sin(float(n)));
50 |
51 | #else
52 |
53 | // Perlin style vectors
54 | n &= 7;
55 | vec2 gr = vec2(n&1, n>>1)*2.0-1.0;
56 | return (n>=6) ? vec2(0.0, gr.x) :
57 | (n>=4) ? vec2(gr.x, 0.0) :
58 | gr;
59 | #endif
60 | }
61 |
62 | float noise(in vec2 p) {
63 | ivec2 i = ivec2(floor(p));
64 | vec2 f = fract(p);
65 |
66 | vec2 u = f*f*(3.0-2.0*f);// feel free to replace by a quintic smoothstep instead
67 |
68 | return mix(mix(dot(grad(i+ivec2(0, 0)), f-vec2(0.0, 0.0)),
69 | dot(grad(i+ivec2(1, 0)), f-vec2(1.0, 0.0)), u.x),
70 | mix(dot(grad(i+ivec2(0, 1)), f-vec2(0.0, 1.0)),
71 | dot(grad(i+ivec2(1, 1)), f-vec2(1.0, 1.0)), u.x), u.y);
72 | }
73 |
--------------------------------------------------------------------------------
/src/pencil-lines/shaders/pencil-lines.frag:
--------------------------------------------------------------------------------
1 | #include