14 |
18 |
22 | )
23 | }
24 |
25 | export default CustomAccordion
26 |
27 | CustomAccordion.propTypes = {
28 | title: PropTypes.object,
29 | content: PropTypes.object
30 | };
--------------------------------------------------------------------------------
/custom-accordion/src/images/gatsby-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/custom-accordion/src/images/gatsby-icon.png
--------------------------------------------------------------------------------
/custom-accordion/src/pages/404.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const NotFoundPage = () => (
4 |
19 | {content}
20 |
21 | About Me
7 |Something little about me
8 |
9 |
17 |
18 | )
19 | }
20 |
21 | export default About;
--------------------------------------------------------------------------------
/portfolio-react-three-tailwind-part2/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | const Footer = () => {
2 | return (
3 |
6 | )
7 | }
8 |
9 | export default Footer;
--------------------------------------------------------------------------------
/portfolio-react-three-tailwind-part2/src/components/Portfolio.js:
--------------------------------------------------------------------------------
1 | import InteractiveMenu from "./InteractiveMenu";
2 |
3 | const Portfolio = () => {
4 | return (
5 | <>
6 |
10 |
13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis, justo accumsan dignissim ultrices, ante turpis pretium sapien, at hendrerit justo ipsum nec enim. Pellentesque sodales risus vel arcu lacinia accumsan. Nulla fringilla magna nec sodales efficitur. Cras a orci nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id erat sed nunc maximus interdum sed id dolor. Suspendisse fermentum elit eget feugiat ultrices. Proin eget mattis purus. Cras vitae metus blandit, tincidunt tellus eget, vulputate velit. Mauris dictum libero vel tincidunt cursus.
11 |Sed ut libero id purus volutpat pharetra. In hac habitasse platea dictumst. Fusce a laoreet lorem. Mauris semper mauris eget lorem porttitor laoreet. Vivamus nulla ligula, viverra et venenatis ac, suscipit a augue. Aliquam iaculis, dui in consequat hendrerit, metus nulla sodales diam, et auctor risus sem eget velit. Sed non nisi pretium, gravida turpis et, consectetur eros. Nunc id urna erat.
12 |
14 | 
;
15 |
16 |
7 | Hello,
8 |
10 |
11 | Hello,
I am Smith
8 | I am a Frontend Developer
9 |
7 | Hello,
8 |
10 |
11 | Hello,
I am Smith
8 | I am a Frontend Developer
9 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/qr-generator-chatgpt/script.js:
--------------------------------------------------------------------------------
1 | const initQRCode = () => {
2 |
3 | let data = "";
4 | const createQRBtn = document.getElementById("create-btn");
5 |
6 | // Create a new QRCode object
7 | const qrcode = new QRCode(document.getElementById("qrcode"), {
8 | text: data,
9 | width: 256,
10 | height: 256,
11 | colorDark: "#000000",
12 | colorLight: "#ffffff",
13 | correctLevel: QRCode.CorrectLevel.H,
14 | });
15 |
16 | createQRBtn.addEventListener("click", function () {
17 | // Get the data
18 | data = document.getElementById("qr-code-data").value;
19 | // Display the QR code
20 | qrcode.makeCode(data);
21 | })
22 | }
23 |
24 | document.addEventListener("DOMContentLoaded", initQRCode)
--------------------------------------------------------------------------------
/qr-generator-chatgpt/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: blueviolet;
3 | display: flex;
4 | }
5 |
6 | #qr-container {
7 | max-width: 400px;
8 | width: 100%;
9 | background-color: #fff;
10 | border-radius: 20px;
11 | padding: 20px;
12 | display: flex;
13 | align-items: center;
14 | flex-direction: column;
15 | box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);
16 | margin: auto;
17 | }
18 |
19 | input {
20 | width: 100%;
21 | font-size: 20px;
22 | border: 2px solid blueviolet;
23 | padding: 5px;
24 | margin-bottom: 5px;
25 | }
26 |
27 | button {
28 | padding: 20px;
29 | background-color: blueviolet;
30 | color: #fff;
31 | border: none;
32 | border-radius: 20px;
33 | font-size: 16px;
34 | font-weight: bold;
35 | margin-bottom: 20px;
36 | width: 100%;
37 | box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
38 | cursor: pointer;
39 | }
40 |
41 | button:hover {
42 | background-color: rgb(57, 7, 104);
43 | }
--------------------------------------------------------------------------------
/squarespace-menu/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variable files
55 | .env*
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/squarespace-menu/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | package.json
3 | package-lock.json
4 | public
5 |
--------------------------------------------------------------------------------
/squarespace-menu/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "arrowParens": "avoid",
3 | "semi": false
4 | }
5 |
--------------------------------------------------------------------------------
/squarespace-menu/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | import '@styles/main.scss'
--------------------------------------------------------------------------------
/squarespace-menu/gatsby-config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | module.exports = {
4 | siteMetadata: {
5 | title: `Custom Accordion`,
6 | description: `Custom Accordion`,
7 | author: `code and play`,
8 | },
9 | plugins: [
10 | `gatsby-plugin-image`,
11 | {
12 | resolve: `gatsby-source-filesystem`,
13 | options: {
14 | name: `images`,
15 | path: `${__dirname}/src/images`,
16 | },
17 | },
18 | `gatsby-transformer-sharp`,
19 | `gatsby-plugin-sharp`,
20 | {
21 | resolve: `gatsby-plugin-manifest`,
22 | options: {
23 | start_url: `/`,
24 | background_color: `#663399`,
25 | display: `minimal-ui`,
26 | icon: `src/images/gatsby-icon.png`,
27 | },
28 | },
29 | `gatsby-plugin-sass`,
30 | {
31 | resolve: `gatsby-plugin-alias-imports`,
32 | options: {
33 | alias: {
34 | "@components": path.resolve(__dirname, 'src/components'),
35 | "@styles": path.resolve(__dirname, 'src/styles'),
36 | "@images": path.resolve(__dirname, 'src/images')
37 | },
38 | }
39 | }
40 | ],
41 | }
42 |
--------------------------------------------------------------------------------
/squarespace-menu/gatsby-node.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/squarespace-menu/gatsby-node.js
--------------------------------------------------------------------------------
/squarespace-menu/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gatsby-starter-default",
3 | "private": true,
4 | "description": "A simple starter to get up and developing quickly with Gatsby",
5 | "version": "0.1.0",
6 | "author": "Kyle Mathews 404: Page Not Found
6 |Gatsby - Squarespace menu
12 |By: Code And Play
13 | 14 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Venenatis cras sed felis eget velit aliquet. Ante metus dictum at tempor commodo ullamcorper a. Nulla facilisi cras fermentum odio eu. Nunc sed id semper risus. Ut eu sem integer vitae justo. Neque viverra justo nec ultrices dui sapien eget mi. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Euismod nisi porta lorem mollis aliquam ut porttitor leo a. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Nunc lobortis mattis aliquam faucibus purus in massa tempor.
15 |
13 |
16 |
17 | Walk in Style
14 |Create Your Custom Shoe with AI
15 |
22 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/threejs-minecraft/js/ammo.wasm.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/threejs-minecraft/js/ammo.wasm.wasm
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/postprocessing/ClearPass.js:
--------------------------------------------------------------------------------
1 | import {
2 | Color
3 | } from 'three';
4 | import { Pass } from './Pass.js';
5 |
6 | class ClearPass extends Pass {
7 |
8 | constructor( clearColor, clearAlpha ) {
9 |
10 | super();
11 |
12 | this.needsSwap = false;
13 |
14 | this.clearColor = ( clearColor !== undefined ) ? clearColor : 0x000000;
15 | this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
16 | this._oldClearColor = new Color();
17 |
18 | }
19 |
20 | render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
21 |
22 | let oldClearAlpha;
23 |
24 | if ( this.clearColor ) {
25 |
26 | renderer.getClearColor( this._oldClearColor );
27 | oldClearAlpha = renderer.getClearAlpha();
28 |
29 | renderer.setClearColor( this.clearColor, this.clearAlpha );
30 |
31 | }
32 |
33 | renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
34 | renderer.clear();
35 |
36 | if ( this.clearColor ) {
37 |
38 | renderer.setClearColor( this._oldClearColor, oldClearAlpha );
39 |
40 | }
41 |
42 | }
43 |
44 | }
45 |
46 | export { ClearPass };
47 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/postprocessing/DotScreenPass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils
4 | } from 'three';
5 | import { Pass, FullScreenQuad } from './Pass.js';
6 | import { DotScreenShader } from '../shaders/DotScreenShader.js';
7 |
8 | class DotScreenPass extends Pass {
9 |
10 | constructor( center, angle, scale ) {
11 |
12 | super();
13 |
14 | if ( DotScreenShader === undefined ) console.error( 'THREE.DotScreenPass relies on DotScreenShader' );
15 |
16 | const shader = DotScreenShader;
17 |
18 | this.uniforms = UniformsUtils.clone( shader.uniforms );
19 |
20 | if ( center !== undefined ) this.uniforms[ 'center' ].value.copy( center );
21 | if ( angle !== undefined ) this.uniforms[ 'angle' ].value = angle;
22 | if ( scale !== undefined ) this.uniforms[ 'scale' ].value = scale;
23 |
24 | this.material = new ShaderMaterial( {
25 |
26 | uniforms: this.uniforms,
27 | vertexShader: shader.vertexShader,
28 | fragmentShader: shader.fragmentShader
29 |
30 | } );
31 |
32 | this.fsQuad = new FullScreenQuad( this.material );
33 |
34 | }
35 |
36 | render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
37 |
38 | this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
39 | this.uniforms[ 'tSize' ].value.set( readBuffer.width, readBuffer.height );
40 |
41 | if ( this.renderToScreen ) {
42 |
43 | renderer.setRenderTarget( null );
44 | this.fsQuad.render( renderer );
45 |
46 | } else {
47 |
48 | renderer.setRenderTarget( writeBuffer );
49 | if ( this.clear ) renderer.clear();
50 | this.fsQuad.render( renderer );
51 |
52 | }
53 |
54 | }
55 |
56 | dispose() {
57 |
58 | this.material.dispose();
59 |
60 | this.fsQuad.dispose();
61 |
62 | }
63 |
64 | }
65 |
66 | export { DotScreenPass };
67 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/postprocessing/FilmPass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils
4 | } from 'three';
5 | import { Pass, FullScreenQuad } from './Pass.js';
6 | import { FilmShader } from '../shaders/FilmShader.js';
7 |
8 | class FilmPass extends Pass {
9 |
10 | constructor( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
11 |
12 | super();
13 |
14 | if ( FilmShader === undefined ) console.error( 'THREE.FilmPass relies on FilmShader' );
15 |
16 | const shader = FilmShader;
17 |
18 | this.uniforms = UniformsUtils.clone( shader.uniforms );
19 |
20 | this.material = new ShaderMaterial( {
21 |
22 | uniforms: this.uniforms,
23 | vertexShader: shader.vertexShader,
24 | fragmentShader: shader.fragmentShader
25 |
26 | } );
27 |
28 | if ( grayscale !== undefined ) this.uniforms.grayscale.value = grayscale;
29 | if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
30 | if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
31 | if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
32 |
33 | this.fsQuad = new FullScreenQuad( this.material );
34 |
35 | }
36 |
37 | render( renderer, writeBuffer, readBuffer, deltaTime /*, maskActive */ ) {
38 |
39 | this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
40 | this.uniforms[ 'time' ].value += deltaTime;
41 |
42 | if ( this.renderToScreen ) {
43 |
44 | renderer.setRenderTarget( null );
45 | this.fsQuad.render( renderer );
46 |
47 | } else {
48 |
49 | renderer.setRenderTarget( writeBuffer );
50 | if ( this.clear ) renderer.clear();
51 | this.fsQuad.render( renderer );
52 |
53 | }
54 |
55 | }
56 |
57 | dispose() {
58 |
59 | this.material.dispose();
60 |
61 | this.fsQuad.dispose();
62 |
63 | }
64 |
65 | }
66 |
67 | export { FilmPass };
68 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/postprocessing/SavePass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils,
4 | WebGLRenderTarget
5 | } from 'three';
6 | import { Pass, FullScreenQuad } from './Pass.js';
7 | import { CopyShader } from '../shaders/CopyShader.js';
8 |
9 | class SavePass extends Pass {
10 |
11 | constructor( renderTarget ) {
12 |
13 | super();
14 |
15 | if ( CopyShader === undefined ) console.error( 'THREE.SavePass relies on CopyShader' );
16 |
17 | const shader = CopyShader;
18 |
19 | this.textureID = 'tDiffuse';
20 |
21 | this.uniforms = UniformsUtils.clone( shader.uniforms );
22 |
23 | this.material = new ShaderMaterial( {
24 |
25 | uniforms: this.uniforms,
26 | vertexShader: shader.vertexShader,
27 | fragmentShader: shader.fragmentShader
28 |
29 | } );
30 |
31 | this.renderTarget = renderTarget;
32 |
33 | if ( this.renderTarget === undefined ) {
34 |
35 | this.renderTarget = new WebGLRenderTarget(); // will be resized later
36 | this.renderTarget.texture.name = 'SavePass.rt';
37 |
38 | }
39 |
40 | this.needsSwap = false;
41 |
42 | this.fsQuad = new FullScreenQuad( this.material );
43 |
44 | }
45 |
46 | render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive */ ) {
47 |
48 | if ( this.uniforms[ this.textureID ] ) {
49 |
50 | this.uniforms[ this.textureID ].value = readBuffer.texture;
51 |
52 | }
53 |
54 | renderer.setRenderTarget( this.renderTarget );
55 | if ( this.clear ) renderer.clear();
56 | this.fsQuad.render( renderer );
57 |
58 | }
59 |
60 | setSize( width, height ) {
61 |
62 | this.renderTarget.setSize( width, height );
63 |
64 | }
65 |
66 | dispose() {
67 |
68 | this.renderTarget.dispose();
69 |
70 | this.material.dispose();
71 |
72 | this.fsQuad.dispose();
73 |
74 | }
75 |
76 | }
77 |
78 | export { SavePass };
79 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/postprocessing/ShaderPass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils
4 | } from 'three';
5 | import { Pass, FullScreenQuad } from './Pass.js';
6 |
7 | class ShaderPass extends Pass {
8 |
9 | constructor( shader, textureID ) {
10 |
11 | super();
12 |
13 | this.textureID = ( textureID !== undefined ) ? textureID : 'tDiffuse';
14 |
15 | if ( shader instanceof ShaderMaterial ) {
16 |
17 | this.uniforms = shader.uniforms;
18 |
19 | this.material = shader;
20 |
21 | } else if ( shader ) {
22 |
23 | this.uniforms = UniformsUtils.clone( shader.uniforms );
24 |
25 | this.material = new ShaderMaterial( {
26 |
27 | defines: Object.assign( {}, shader.defines ),
28 | uniforms: this.uniforms,
29 | vertexShader: shader.vertexShader,
30 | fragmentShader: shader.fragmentShader
31 |
32 | } );
33 |
34 | }
35 |
36 | this.fsQuad = new FullScreenQuad( this.material );
37 |
38 | }
39 |
40 | render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
41 |
42 | if ( this.uniforms[ this.textureID ] ) {
43 |
44 | this.uniforms[ this.textureID ].value = readBuffer.texture;
45 |
46 | }
47 |
48 | this.fsQuad.material = this.material;
49 |
50 | if ( this.renderToScreen ) {
51 |
52 | renderer.setRenderTarget( null );
53 | this.fsQuad.render( renderer );
54 |
55 | } else {
56 |
57 | renderer.setRenderTarget( writeBuffer );
58 | // TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
59 | if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
60 | this.fsQuad.render( renderer );
61 |
62 | }
63 |
64 | }
65 |
66 | dispose() {
67 |
68 | this.material.dispose();
69 |
70 | this.fsQuad.dispose();
71 |
72 | }
73 |
74 | }
75 |
76 | export { ShaderPass };
77 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/postprocessing/TexturePass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils
4 | } from 'three';
5 | import { Pass, FullScreenQuad } from './Pass.js';
6 | import { CopyShader } from '../shaders/CopyShader.js';
7 |
8 | class TexturePass extends Pass {
9 |
10 | constructor( map, opacity ) {
11 |
12 | super();
13 |
14 | if ( CopyShader === undefined ) console.error( 'THREE.TexturePass relies on CopyShader' );
15 |
16 | const shader = CopyShader;
17 |
18 | this.map = map;
19 | this.opacity = ( opacity !== undefined ) ? opacity : 1.0;
20 |
21 | this.uniforms = UniformsUtils.clone( shader.uniforms );
22 |
23 | this.material = new ShaderMaterial( {
24 |
25 | uniforms: this.uniforms,
26 | vertexShader: shader.vertexShader,
27 | fragmentShader: shader.fragmentShader,
28 | depthTest: false,
29 | depthWrite: false
30 |
31 | } );
32 |
33 | this.needsSwap = false;
34 |
35 | this.fsQuad = new FullScreenQuad( null );
36 |
37 | }
38 |
39 | render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
40 |
41 | const oldAutoClear = renderer.autoClear;
42 | renderer.autoClear = false;
43 |
44 | this.fsQuad.material = this.material;
45 |
46 | this.uniforms[ 'opacity' ].value = this.opacity;
47 | this.uniforms[ 'tDiffuse' ].value = this.map;
48 | this.material.transparent = ( this.opacity < 1.0 );
49 |
50 | renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
51 | if ( this.clear ) renderer.clear();
52 | this.fsQuad.render( renderer );
53 |
54 | renderer.autoClear = oldAutoClear;
55 |
56 | }
57 |
58 | dispose() {
59 |
60 | this.material.dispose();
61 |
62 | this.fsQuad.dispose();
63 |
64 | }
65 |
66 | }
67 |
68 | export { TexturePass };
69 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/AfterimageShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Afterimage shader
3 | * I created this effect inspired by a demo on codepen:
4 | * https://codepen.io/brunoimbrizi/pen/MoRJaN?page=1&
5 | */
6 |
7 | const AfterimageShader = {
8 |
9 | uniforms: {
10 |
11 | 'damp': { value: 0.96 },
12 | 'tOld': { value: null },
13 | 'tNew': { value: null }
14 |
15 | },
16 |
17 | vertexShader: /* glsl */`
18 |
19 | varying vec2 vUv;
20 |
21 | void main() {
22 |
23 | vUv = uv;
24 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
25 |
26 | }`,
27 |
28 | fragmentShader: /* glsl */`
29 |
30 | uniform float damp;
31 |
32 | uniform sampler2D tOld;
33 | uniform sampler2D tNew;
34 |
35 | varying vec2 vUv;
36 |
37 | vec4 when_gt( vec4 x, float y ) {
38 |
39 | return max( sign( x - y ), 0.0 );
40 |
41 | }
42 |
43 | void main() {
44 |
45 | vec4 texelOld = texture2D( tOld, vUv );
46 | vec4 texelNew = texture2D( tNew, vUv );
47 |
48 | texelOld *= damp * when_gt( texelOld, 0.1 );
49 |
50 | gl_FragColor = max(texelNew, texelOld);
51 |
52 | }`
53 |
54 | };
55 |
56 | export { AfterimageShader };
57 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/BasicShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Simple test shader
3 | */
4 |
5 | const BasicShader = {
6 |
7 | uniforms: {},
8 |
9 | vertexShader: /* glsl */`
10 |
11 | void main() {
12 |
13 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
14 |
15 | }`,
16 |
17 | fragmentShader: /* glsl */`
18 |
19 | void main() {
20 |
21 | gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );
22 |
23 | }`
24 |
25 | };
26 |
27 | export { BasicShader };
28 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/BleachBypassShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Bleach bypass shader [http://en.wikipedia.org/wiki/Bleach_bypass]
3 | * - based on Nvidia example
4 | * http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass
5 | */
6 |
7 | const BleachBypassShader = {
8 |
9 | uniforms: {
10 |
11 | 'tDiffuse': { value: null },
12 | 'opacity': { value: 1.0 }
13 |
14 | },
15 |
16 | vertexShader: /* glsl */`
17 |
18 | varying vec2 vUv;
19 |
20 | void main() {
21 |
22 | vUv = uv;
23 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
24 |
25 | }`,
26 |
27 | fragmentShader: /* glsl */`
28 |
29 | uniform float opacity;
30 |
31 | uniform sampler2D tDiffuse;
32 |
33 | varying vec2 vUv;
34 |
35 | void main() {
36 |
37 | vec4 base = texture2D( tDiffuse, vUv );
38 |
39 | vec3 lumCoeff = vec3( 0.25, 0.65, 0.1 );
40 | float lum = dot( lumCoeff, base.rgb );
41 | vec3 blend = vec3( lum );
42 |
43 | float L = min( 1.0, max( 0.0, 10.0 * ( lum - 0.45 ) ) );
44 |
45 | vec3 result1 = 2.0 * base.rgb * blend;
46 | vec3 result2 = 1.0 - 2.0 * ( 1.0 - blend ) * ( 1.0 - base.rgb );
47 |
48 | vec3 newColor = mix( result1, result2, L );
49 |
50 | float A2 = opacity * base.a;
51 | vec3 mixRGB = A2 * newColor.rgb;
52 | mixRGB += ( ( 1.0 - A2 ) * base.rgb );
53 |
54 | gl_FragColor = vec4( mixRGB, base.a );
55 |
56 | }`
57 |
58 | };
59 |
60 | export { BleachBypassShader };
61 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/BlendShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Blend two textures
3 | */
4 |
5 | const BlendShader = {
6 |
7 | uniforms: {
8 |
9 | 'tDiffuse1': { value: null },
10 | 'tDiffuse2': { value: null },
11 | 'mixRatio': { value: 0.5 },
12 | 'opacity': { value: 1.0 }
13 |
14 | },
15 |
16 | vertexShader: /* glsl */`
17 |
18 | varying vec2 vUv;
19 |
20 | void main() {
21 |
22 | vUv = uv;
23 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
24 |
25 | }`,
26 |
27 | fragmentShader: /* glsl */`
28 |
29 | uniform float opacity;
30 | uniform float mixRatio;
31 |
32 | uniform sampler2D tDiffuse1;
33 | uniform sampler2D tDiffuse2;
34 |
35 | varying vec2 vUv;
36 |
37 | void main() {
38 |
39 | vec4 texel1 = texture2D( tDiffuse1, vUv );
40 | vec4 texel2 = texture2D( tDiffuse2, vUv );
41 | gl_FragColor = mix( texel1, texel2, mixRatio );
42 | gl_FragColor.a *= opacity;
43 |
44 | }`
45 |
46 | };
47 |
48 | export { BlendShader };
49 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/BrightnessContrastShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Brightness and contrast adjustment
3 | * https://github.com/evanw/glfx.js
4 | * brightness: -1 to 1 (-1 is solid black, 0 is no change, and 1 is solid white)
5 | * contrast: -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast)
6 | */
7 |
8 | const BrightnessContrastShader = {
9 |
10 | uniforms: {
11 |
12 | 'tDiffuse': { value: null },
13 | 'brightness': { value: 0 },
14 | 'contrast': { value: 0 }
15 |
16 | },
17 |
18 | vertexShader: /* glsl */`
19 |
20 | varying vec2 vUv;
21 |
22 | void main() {
23 |
24 | vUv = uv;
25 |
26 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
27 |
28 | }`,
29 |
30 | fragmentShader: /* glsl */`
31 |
32 | uniform sampler2D tDiffuse;
33 | uniform float brightness;
34 | uniform float contrast;
35 |
36 | varying vec2 vUv;
37 |
38 | void main() {
39 |
40 | gl_FragColor = texture2D( tDiffuse, vUv );
41 |
42 | gl_FragColor.rgb += brightness;
43 |
44 | if (contrast > 0.0) {
45 | gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) / (1.0 - contrast) + 0.5;
46 | } else {
47 | gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) * (1.0 + contrast) + 0.5;
48 | }
49 |
50 | }`
51 |
52 | };
53 |
54 | export { BrightnessContrastShader };
55 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/ColorCorrectionShader.js:
--------------------------------------------------------------------------------
1 | import {
2 | Vector3
3 | } from 'three';
4 |
5 | /**
6 | * Color correction
7 | */
8 |
9 | const ColorCorrectionShader = {
10 |
11 | uniforms: {
12 |
13 | 'tDiffuse': { value: null },
14 | 'powRGB': { value: new Vector3( 2, 2, 2 ) },
15 | 'mulRGB': { value: new Vector3( 1, 1, 1 ) },
16 | 'addRGB': { value: new Vector3( 0, 0, 0 ) }
17 |
18 | },
19 |
20 | vertexShader: /* glsl */`
21 |
22 | varying vec2 vUv;
23 |
24 | void main() {
25 |
26 | vUv = uv;
27 |
28 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
29 |
30 | }`,
31 |
32 | fragmentShader: /* glsl */`
33 |
34 | uniform sampler2D tDiffuse;
35 | uniform vec3 powRGB;
36 | uniform vec3 mulRGB;
37 | uniform vec3 addRGB;
38 |
39 | varying vec2 vUv;
40 |
41 | void main() {
42 |
43 | gl_FragColor = texture2D( tDiffuse, vUv );
44 | gl_FragColor.rgb = mulRGB * pow( ( gl_FragColor.rgb + addRGB ), powRGB );
45 |
46 | }`
47 |
48 | };
49 |
50 | export { ColorCorrectionShader };
51 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/ColorifyShader.js:
--------------------------------------------------------------------------------
1 | import {
2 | Color
3 | } from 'three';
4 |
5 | /**
6 | * Colorify shader
7 | */
8 |
9 | const ColorifyShader = {
10 |
11 | uniforms: {
12 |
13 | 'tDiffuse': { value: null },
14 | 'color': { value: new Color( 0xffffff ) }
15 |
16 | },
17 |
18 | vertexShader: /* glsl */`
19 |
20 | varying vec2 vUv;
21 |
22 | void main() {
23 |
24 | vUv = uv;
25 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
26 |
27 | }`,
28 |
29 | fragmentShader: /* glsl */`
30 |
31 | uniform vec3 color;
32 | uniform sampler2D tDiffuse;
33 |
34 | varying vec2 vUv;
35 |
36 | void main() {
37 |
38 | vec4 texel = texture2D( tDiffuse, vUv );
39 |
40 | vec3 luma = vec3( 0.299, 0.587, 0.114 );
41 | float v = dot( texel.xyz, luma );
42 |
43 | gl_FragColor = vec4( v * color, texel.w );
44 |
45 | }`
46 |
47 | };
48 |
49 | export { ColorifyShader };
50 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/CopyShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Full-screen textured quad shader
3 | */
4 |
5 | const CopyShader = {
6 |
7 | uniforms: {
8 |
9 | 'tDiffuse': { value: null },
10 | 'opacity': { value: 1.0 }
11 |
12 | },
13 |
14 | vertexShader: /* glsl */`
15 |
16 | varying vec2 vUv;
17 |
18 | void main() {
19 |
20 | vUv = uv;
21 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
22 |
23 | }`,
24 |
25 | fragmentShader: /* glsl */`
26 |
27 | uniform float opacity;
28 |
29 | uniform sampler2D tDiffuse;
30 |
31 | varying vec2 vUv;
32 |
33 | void main() {
34 |
35 | gl_FragColor = texture2D( tDiffuse, vUv );
36 | gl_FragColor.a *= opacity;
37 |
38 |
39 | }`
40 |
41 | };
42 |
43 | export { CopyShader };
44 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/DOFMipMapShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Depth-of-field shader using mipmaps
3 | * - from Matt Handley @applmak
4 | * - requires power-of-2 sized render target with enabled mipmaps
5 | */
6 |
7 | const DOFMipMapShader = {
8 |
9 | uniforms: {
10 |
11 | 'tColor': { value: null },
12 | 'tDepth': { value: null },
13 | 'focus': { value: 1.0 },
14 | 'maxblur': { value: 1.0 }
15 |
16 | },
17 |
18 | vertexShader: /* glsl */`
19 |
20 | varying vec2 vUv;
21 |
22 | void main() {
23 |
24 | vUv = uv;
25 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
26 |
27 | }`,
28 |
29 | fragmentShader: /* glsl */`
30 |
31 | uniform float focus;
32 | uniform float maxblur;
33 |
34 | uniform sampler2D tColor;
35 | uniform sampler2D tDepth;
36 |
37 | varying vec2 vUv;
38 |
39 | void main() {
40 |
41 | vec4 depth = texture2D( tDepth, vUv );
42 |
43 | float factor = depth.x - focus;
44 |
45 | vec4 col = texture2D( tColor, vUv, 2.0 * maxblur * abs( focus - depth.x ) );
46 |
47 | gl_FragColor = col;
48 | gl_FragColor.a = 1.0;
49 |
50 | }`
51 |
52 | };
53 |
54 | export { DOFMipMapShader };
55 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/DotScreenShader.js:
--------------------------------------------------------------------------------
1 | import {
2 | Vector2
3 | } from 'three';
4 |
5 | /**
6 | * Dot screen shader
7 | * based on glfx.js sepia shader
8 | * https://github.com/evanw/glfx.js
9 | */
10 |
11 | const DotScreenShader = {
12 |
13 | uniforms: {
14 |
15 | 'tDiffuse': { value: null },
16 | 'tSize': { value: new Vector2( 256, 256 ) },
17 | 'center': { value: new Vector2( 0.5, 0.5 ) },
18 | 'angle': { value: 1.57 },
19 | 'scale': { value: 1.0 }
20 |
21 | },
22 |
23 | vertexShader: /* glsl */`
24 |
25 | varying vec2 vUv;
26 |
27 | void main() {
28 |
29 | vUv = uv;
30 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
31 |
32 | }`,
33 |
34 | fragmentShader: /* glsl */`
35 |
36 | uniform vec2 center;
37 | uniform float angle;
38 | uniform float scale;
39 | uniform vec2 tSize;
40 |
41 | uniform sampler2D tDiffuse;
42 |
43 | varying vec2 vUv;
44 |
45 | float pattern() {
46 |
47 | float s = sin( angle ), c = cos( angle );
48 |
49 | vec2 tex = vUv * tSize - center;
50 | vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;
51 |
52 | return ( sin( point.x ) * sin( point.y ) ) * 4.0;
53 |
54 | }
55 |
56 | void main() {
57 |
58 | vec4 color = texture2D( tDiffuse, vUv );
59 |
60 | float average = ( color.r + color.g + color.b ) / 3.0;
61 |
62 | gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );
63 |
64 | }`
65 |
66 | };
67 |
68 | export { DotScreenShader };
69 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/GammaCorrectionShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Gamma Correction Shader
3 | * http://en.wikipedia.org/wiki/gamma_correction
4 | */
5 |
6 | const GammaCorrectionShader = {
7 |
8 | uniforms: {
9 |
10 | 'tDiffuse': { value: null }
11 |
12 | },
13 |
14 | vertexShader: /* glsl */`
15 |
16 | varying vec2 vUv;
17 |
18 | void main() {
19 |
20 | vUv = uv;
21 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
22 |
23 | }`,
24 |
25 | fragmentShader: /* glsl */`
26 |
27 | uniform sampler2D tDiffuse;
28 |
29 | varying vec2 vUv;
30 |
31 | void main() {
32 |
33 | vec4 tex = texture2D( tDiffuse, vUv );
34 |
35 | gl_FragColor = LinearTosRGB( tex );
36 |
37 | }`
38 |
39 | };
40 |
41 | export { GammaCorrectionShader };
42 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/HorizontalBlurShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Two pass Gaussian blur filter (horizontal and vertical blur shaders)
3 | * - see http://www.cake23.de/traveling-wavefronts-lit-up.html
4 | *
5 | * - 9 samples per pass
6 | * - standard deviation 2.7
7 | * - "h" and "v" parameters should be set to "1 / width" and "1 / height"
8 | */
9 |
10 | const HorizontalBlurShader = {
11 |
12 | uniforms: {
13 |
14 | 'tDiffuse': { value: null },
15 | 'h': { value: 1.0 / 512.0 }
16 |
17 | },
18 |
19 | vertexShader: /* glsl */`
20 |
21 | varying vec2 vUv;
22 |
23 | void main() {
24 |
25 | vUv = uv;
26 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
27 |
28 | }`,
29 |
30 | fragmentShader: /* glsl */`
31 |
32 | uniform sampler2D tDiffuse;
33 | uniform float h;
34 |
35 | varying vec2 vUv;
36 |
37 | void main() {
38 |
39 | vec4 sum = vec4( 0.0 );
40 |
41 | sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * h, vUv.y ) ) * 0.051;
42 | sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * h, vUv.y ) ) * 0.0918;
43 | sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * h, vUv.y ) ) * 0.12245;
44 | sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * h, vUv.y ) ) * 0.1531;
45 | sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
46 | sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * h, vUv.y ) ) * 0.1531;
47 | sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * h, vUv.y ) ) * 0.12245;
48 | sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * h, vUv.y ) ) * 0.0918;
49 | sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * h, vUv.y ) ) * 0.051;
50 |
51 | gl_FragColor = sum;
52 |
53 | }`
54 |
55 | };
56 |
57 | export { HorizontalBlurShader };
58 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/HorizontalTiltShiftShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Simple fake tilt-shift effect, modulating two pass Gaussian blur (see above) by vertical position
3 | *
4 | * - 9 samples per pass
5 | * - standard deviation 2.7
6 | * - "h" and "v" parameters should be set to "1 / width" and "1 / height"
7 | * - "r" parameter control where "focused" horizontal line lies
8 | */
9 |
10 | const HorizontalTiltShiftShader = {
11 |
12 | uniforms: {
13 |
14 | 'tDiffuse': { value: null },
15 | 'h': { value: 1.0 / 512.0 },
16 | 'r': { value: 0.35 }
17 |
18 | },
19 |
20 | vertexShader: /* glsl */`
21 |
22 | varying vec2 vUv;
23 |
24 | void main() {
25 |
26 | vUv = uv;
27 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
28 |
29 | }`,
30 |
31 | fragmentShader: /* glsl */`
32 |
33 | uniform sampler2D tDiffuse;
34 | uniform float h;
35 | uniform float r;
36 |
37 | varying vec2 vUv;
38 |
39 | void main() {
40 |
41 | vec4 sum = vec4( 0.0 );
42 |
43 | float hh = h * abs( r - vUv.y );
44 |
45 | sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * hh, vUv.y ) ) * 0.051;
46 | sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * hh, vUv.y ) ) * 0.0918;
47 | sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * hh, vUv.y ) ) * 0.12245;
48 | sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * hh, vUv.y ) ) * 0.1531;
49 | sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
50 | sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * hh, vUv.y ) ) * 0.1531;
51 | sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * hh, vUv.y ) ) * 0.12245;
52 | sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * hh, vUv.y ) ) * 0.0918;
53 | sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * hh, vUv.y ) ) * 0.051;
54 |
55 | gl_FragColor = sum;
56 |
57 | }`
58 |
59 | };
60 |
61 | export { HorizontalTiltShiftShader };
62 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/HueSaturationShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Hue and saturation adjustment
3 | * https://github.com/evanw/glfx.js
4 | * hue: -1 to 1 (-1 is 180 degrees in the negative direction, 0 is no change, etc.
5 | * saturation: -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast)
6 | */
7 |
8 | const HueSaturationShader = {
9 |
10 | uniforms: {
11 |
12 | 'tDiffuse': { value: null },
13 | 'hue': { value: 0 },
14 | 'saturation': { value: 0 }
15 |
16 | },
17 |
18 | vertexShader: /* glsl */`
19 |
20 | varying vec2 vUv;
21 |
22 | void main() {
23 |
24 | vUv = uv;
25 |
26 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
27 |
28 | }`,
29 |
30 | fragmentShader: /* glsl */`
31 |
32 | uniform sampler2D tDiffuse;
33 | uniform float hue;
34 | uniform float saturation;
35 |
36 | varying vec2 vUv;
37 |
38 | void main() {
39 |
40 | gl_FragColor = texture2D( tDiffuse, vUv );
41 |
42 | // hue
43 | float angle = hue * 3.14159265;
44 | float s = sin(angle), c = cos(angle);
45 | vec3 weights = (vec3(2.0 * c, -sqrt(3.0) * s - c, sqrt(3.0) * s - c) + 1.0) / 3.0;
46 | float len = length(gl_FragColor.rgb);
47 | gl_FragColor.rgb = vec3(
48 | dot(gl_FragColor.rgb, weights.xyz),
49 | dot(gl_FragColor.rgb, weights.zxy),
50 | dot(gl_FragColor.rgb, weights.yzx)
51 | );
52 |
53 | // saturation
54 | float average = (gl_FragColor.r + gl_FragColor.g + gl_FragColor.b) / 3.0;
55 | if (saturation > 0.0) {
56 | gl_FragColor.rgb += (average - gl_FragColor.rgb) * (1.0 - 1.0 / (1.001 - saturation));
57 | } else {
58 | gl_FragColor.rgb += (average - gl_FragColor.rgb) * (-saturation);
59 | }
60 |
61 | }`
62 |
63 | };
64 |
65 | export { HueSaturationShader };
66 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/KaleidoShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Kaleidoscope Shader
3 | * Radial reflection around center point
4 | * Ported from: http://pixelshaders.com/editor/
5 | * by Toby Schachman / http://tobyschachman.com/
6 | *
7 | * sides: number of reflections
8 | * angle: initial angle in radians
9 | */
10 |
11 | const KaleidoShader = {
12 |
13 | uniforms: {
14 |
15 | 'tDiffuse': { value: null },
16 | 'sides': { value: 6.0 },
17 | 'angle': { value: 0.0 }
18 |
19 | },
20 |
21 | vertexShader: /* glsl */`
22 |
23 | varying vec2 vUv;
24 |
25 | void main() {
26 |
27 | vUv = uv;
28 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
29 |
30 | }`,
31 |
32 | fragmentShader: /* glsl */`
33 |
34 | uniform sampler2D tDiffuse;
35 | uniform float sides;
36 | uniform float angle;
37 |
38 | varying vec2 vUv;
39 |
40 | void main() {
41 |
42 | vec2 p = vUv - 0.5;
43 | float r = length(p);
44 | float a = atan(p.y, p.x) + angle;
45 | float tau = 2. * 3.1416 ;
46 | a = mod(a, tau/sides);
47 | a = abs(a - tau/sides/2.) ;
48 | p = r * vec2(cos(a), sin(a));
49 | vec4 color = texture2D(tDiffuse, p + 0.5);
50 | gl_FragColor = color;
51 |
52 | }`
53 |
54 | };
55 |
56 | export { KaleidoShader };
57 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/LuminosityHighPassShader.js:
--------------------------------------------------------------------------------
1 | import {
2 | Color
3 | } from 'three';
4 |
5 | /**
6 | * Luminosity
7 | * http://en.wikipedia.org/wiki/Luminosity
8 | */
9 |
10 | const LuminosityHighPassShader = {
11 |
12 | shaderID: 'luminosityHighPass',
13 |
14 | uniforms: {
15 |
16 | 'tDiffuse': { value: null },
17 | 'luminosityThreshold': { value: 1.0 },
18 | 'smoothWidth': { value: 1.0 },
19 | 'defaultColor': { value: new Color( 0x000000 ) },
20 | 'defaultOpacity': { value: 0.0 }
21 |
22 | },
23 |
24 | vertexShader: /* glsl */`
25 |
26 | varying vec2 vUv;
27 |
28 | void main() {
29 |
30 | vUv = uv;
31 |
32 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
33 |
34 | }`,
35 |
36 | fragmentShader: /* glsl */`
37 |
38 | uniform sampler2D tDiffuse;
39 | uniform vec3 defaultColor;
40 | uniform float defaultOpacity;
41 | uniform float luminosityThreshold;
42 | uniform float smoothWidth;
43 |
44 | varying vec2 vUv;
45 |
46 | void main() {
47 |
48 | vec4 texel = texture2D( tDiffuse, vUv );
49 |
50 | vec3 luma = vec3( 0.299, 0.587, 0.114 );
51 |
52 | float v = dot( texel.xyz, luma );
53 |
54 | vec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );
55 |
56 | float alpha = smoothstep( luminosityThreshold, luminosityThreshold + smoothWidth, v );
57 |
58 | gl_FragColor = mix( outputColor, texel, alpha );
59 |
60 | }`
61 |
62 | };
63 |
64 | export { LuminosityHighPassShader };
65 |
--------------------------------------------------------------------------------
/threejs-minecraft/jsm/shaders/LuminosityShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Luminosity
3 | * http://en.wikipedia.org/wiki/Luminosity
4 | */
5 |
6 | const LuminosityShader = {
7 |
8 | uniforms: {
9 |
10 | 'tDiffuse': { value: null }
11 |
12 | },
13 |
14 | vertexShader: /* glsl */`
15 |
16 | varying vec2 vUv;
17 |
18 | void main() {
19 |
20 | vUv = uv;
21 |
22 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
23 |
24 | }`,
25 |
26 | fragmentShader: /* glsl */`
27 |
28 | #include
23 |
50 | 24 | VOXEL BUILDER 25 |
26 |
27 |
43 |
28 | 
29 |
30 |
29 |
31 | 
32 |
33 |
32 |
34 | 
35 |
36 |
35 |
37 | 
38 |
39 |
38 |
40 | 
41 |
42 |
41 |
44 | MOVE: WASD
45 | CREATE BLOCK: RIGHT OR LEFT MOUSE
46 | BREAK BLOCK: SHIFT + RIGHT OR LEFT MOUSE
47 | LOOK AROUND: MOUSE
48 |
6 |
13 | )
14 | }
15 |
16 | export default AboutMe
--------------------------------------------------------------------------------
/threejs-portfolio/src/components/Blog.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const Blog = () => {
4 |
5 | return (
6 | About Me
7 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8 | 9 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 | 11 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
12 |
7 |
14 | )
15 | }
16 |
17 | export default Blog
--------------------------------------------------------------------------------
/threejs-portfolio/src/components/Contact.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const Contact = () => {
4 |
5 | return (
6 | My Blog
8 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
9 | 10 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
11 | 12 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
13 |
7 |
14 | )
15 | }
16 |
17 | export default Contact
--------------------------------------------------------------------------------
/threejs-portfolio/src/images/code-and-play-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/threejs-portfolio/src/images/code-and-play-logo.png
--------------------------------------------------------------------------------
/threejs-portfolio/src/images/gatsby-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/threejs-portfolio/src/images/gatsby-icon.png
--------------------------------------------------------------------------------
/threejs-portfolio/src/images/link-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/threejs-portfolio/src/images/link-1.jpg
--------------------------------------------------------------------------------
/threejs-portfolio/src/images/link-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/threejs-portfolio/src/images/link-2.jpg
--------------------------------------------------------------------------------
/threejs-portfolio/src/images/link-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/threejs-portfolio/src/images/link-3.jpg
--------------------------------------------------------------------------------
/threejs-portfolio/src/images/link-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/threejs-portfolio/src/images/link-4.jpg
--------------------------------------------------------------------------------
/threejs-portfolio/src/pages/404.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const NotFoundPage = () => (
4 | Contact Me
8 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
9 | 10 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
11 | 12 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
13 |404: Page Not Found
6 |
18 |
21 |
22 | PORTFOLIO
19 |By: Code and Play
20 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
34 |
30 |
31 | {navSelected}
32 |
33 |
23 |
36 |
24 |
35 | 25 | Click to play 26 |
27 |
28 | MOVE: WASD
29 | SHOOT: LEFT MOUSE
30 | AIM/LOOK: MOUSE
31 |
OJECTIVE: Shoot and change all the balls to red in the fastest time you can.
33 | Avoid hitting a ball that is already red, or it will be transformed to a different color.
37 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/js/ammo.wasm.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeandplay/tutorials/504c1781d807a65655570c1fa0b8cce962bd8f49/threejs-third-person-shooter/js/ammo.wasm.wasm
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/postprocessing/ClearPass.js:
--------------------------------------------------------------------------------
1 | import {
2 | Color
3 | } from 'three';
4 | import { Pass } from './Pass.js';
5 |
6 | class ClearPass extends Pass {
7 |
8 | constructor( clearColor, clearAlpha ) {
9 |
10 | super();
11 |
12 | this.needsSwap = false;
13 |
14 | this.clearColor = ( clearColor !== undefined ) ? clearColor : 0x000000;
15 | this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
16 | this._oldClearColor = new Color();
17 |
18 | }
19 |
20 | render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
21 |
22 | let oldClearAlpha;
23 |
24 | if ( this.clearColor ) {
25 |
26 | renderer.getClearColor( this._oldClearColor );
27 | oldClearAlpha = renderer.getClearAlpha();
28 |
29 | renderer.setClearColor( this.clearColor, this.clearAlpha );
30 |
31 | }
32 |
33 | renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
34 | renderer.clear();
35 |
36 | if ( this.clearColor ) {
37 |
38 | renderer.setClearColor( this._oldClearColor, oldClearAlpha );
39 |
40 | }
41 |
42 | }
43 |
44 | }
45 |
46 | export { ClearPass };
47 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/postprocessing/DotScreenPass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils
4 | } from 'three';
5 | import { Pass, FullScreenQuad } from './Pass.js';
6 | import { DotScreenShader } from '../shaders/DotScreenShader.js';
7 |
8 | class DotScreenPass extends Pass {
9 |
10 | constructor( center, angle, scale ) {
11 |
12 | super();
13 |
14 | if ( DotScreenShader === undefined ) console.error( 'THREE.DotScreenPass relies on DotScreenShader' );
15 |
16 | const shader = DotScreenShader;
17 |
18 | this.uniforms = UniformsUtils.clone( shader.uniforms );
19 |
20 | if ( center !== undefined ) this.uniforms[ 'center' ].value.copy( center );
21 | if ( angle !== undefined ) this.uniforms[ 'angle' ].value = angle;
22 | if ( scale !== undefined ) this.uniforms[ 'scale' ].value = scale;
23 |
24 | this.material = new ShaderMaterial( {
25 |
26 | uniforms: this.uniforms,
27 | vertexShader: shader.vertexShader,
28 | fragmentShader: shader.fragmentShader
29 |
30 | } );
31 |
32 | this.fsQuad = new FullScreenQuad( this.material );
33 |
34 | }
35 |
36 | render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
37 |
38 | this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
39 | this.uniforms[ 'tSize' ].value.set( readBuffer.width, readBuffer.height );
40 |
41 | if ( this.renderToScreen ) {
42 |
43 | renderer.setRenderTarget( null );
44 | this.fsQuad.render( renderer );
45 |
46 | } else {
47 |
48 | renderer.setRenderTarget( writeBuffer );
49 | if ( this.clear ) renderer.clear();
50 | this.fsQuad.render( renderer );
51 |
52 | }
53 |
54 | }
55 |
56 | dispose() {
57 |
58 | this.material.dispose();
59 |
60 | this.fsQuad.dispose();
61 |
62 | }
63 |
64 | }
65 |
66 | export { DotScreenPass };
67 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/postprocessing/FilmPass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils
4 | } from 'three';
5 | import { Pass, FullScreenQuad } from './Pass.js';
6 | import { FilmShader } from '../shaders/FilmShader.js';
7 |
8 | class FilmPass extends Pass {
9 |
10 | constructor( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
11 |
12 | super();
13 |
14 | if ( FilmShader === undefined ) console.error( 'THREE.FilmPass relies on FilmShader' );
15 |
16 | const shader = FilmShader;
17 |
18 | this.uniforms = UniformsUtils.clone( shader.uniforms );
19 |
20 | this.material = new ShaderMaterial( {
21 |
22 | uniforms: this.uniforms,
23 | vertexShader: shader.vertexShader,
24 | fragmentShader: shader.fragmentShader
25 |
26 | } );
27 |
28 | if ( grayscale !== undefined ) this.uniforms.grayscale.value = grayscale;
29 | if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
30 | if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
31 | if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
32 |
33 | this.fsQuad = new FullScreenQuad( this.material );
34 |
35 | }
36 |
37 | render( renderer, writeBuffer, readBuffer, deltaTime /*, maskActive */ ) {
38 |
39 | this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
40 | this.uniforms[ 'time' ].value += deltaTime;
41 |
42 | if ( this.renderToScreen ) {
43 |
44 | renderer.setRenderTarget( null );
45 | this.fsQuad.render( renderer );
46 |
47 | } else {
48 |
49 | renderer.setRenderTarget( writeBuffer );
50 | if ( this.clear ) renderer.clear();
51 | this.fsQuad.render( renderer );
52 |
53 | }
54 |
55 | }
56 |
57 | dispose() {
58 |
59 | this.material.dispose();
60 |
61 | this.fsQuad.dispose();
62 |
63 | }
64 |
65 | }
66 |
67 | export { FilmPass };
68 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/postprocessing/SavePass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils,
4 | WebGLRenderTarget
5 | } from 'three';
6 | import { Pass, FullScreenQuad } from './Pass.js';
7 | import { CopyShader } from '../shaders/CopyShader.js';
8 |
9 | class SavePass extends Pass {
10 |
11 | constructor( renderTarget ) {
12 |
13 | super();
14 |
15 | if ( CopyShader === undefined ) console.error( 'THREE.SavePass relies on CopyShader' );
16 |
17 | const shader = CopyShader;
18 |
19 | this.textureID = 'tDiffuse';
20 |
21 | this.uniforms = UniformsUtils.clone( shader.uniforms );
22 |
23 | this.material = new ShaderMaterial( {
24 |
25 | uniforms: this.uniforms,
26 | vertexShader: shader.vertexShader,
27 | fragmentShader: shader.fragmentShader
28 |
29 | } );
30 |
31 | this.renderTarget = renderTarget;
32 |
33 | if ( this.renderTarget === undefined ) {
34 |
35 | this.renderTarget = new WebGLRenderTarget(); // will be resized later
36 | this.renderTarget.texture.name = 'SavePass.rt';
37 |
38 | }
39 |
40 | this.needsSwap = false;
41 |
42 | this.fsQuad = new FullScreenQuad( this.material );
43 |
44 | }
45 |
46 | render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive */ ) {
47 |
48 | if ( this.uniforms[ this.textureID ] ) {
49 |
50 | this.uniforms[ this.textureID ].value = readBuffer.texture;
51 |
52 | }
53 |
54 | renderer.setRenderTarget( this.renderTarget );
55 | if ( this.clear ) renderer.clear();
56 | this.fsQuad.render( renderer );
57 |
58 | }
59 |
60 | setSize( width, height ) {
61 |
62 | this.renderTarget.setSize( width, height );
63 |
64 | }
65 |
66 | dispose() {
67 |
68 | this.renderTarget.dispose();
69 |
70 | this.material.dispose();
71 |
72 | this.fsQuad.dispose();
73 |
74 | }
75 |
76 | }
77 |
78 | export { SavePass };
79 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/postprocessing/ShaderPass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils
4 | } from 'three';
5 | import { Pass, FullScreenQuad } from './Pass.js';
6 |
7 | class ShaderPass extends Pass {
8 |
9 | constructor( shader, textureID ) {
10 |
11 | super();
12 |
13 | this.textureID = ( textureID !== undefined ) ? textureID : 'tDiffuse';
14 |
15 | if ( shader instanceof ShaderMaterial ) {
16 |
17 | this.uniforms = shader.uniforms;
18 |
19 | this.material = shader;
20 |
21 | } else if ( shader ) {
22 |
23 | this.uniforms = UniformsUtils.clone( shader.uniforms );
24 |
25 | this.material = new ShaderMaterial( {
26 |
27 | defines: Object.assign( {}, shader.defines ),
28 | uniforms: this.uniforms,
29 | vertexShader: shader.vertexShader,
30 | fragmentShader: shader.fragmentShader
31 |
32 | } );
33 |
34 | }
35 |
36 | this.fsQuad = new FullScreenQuad( this.material );
37 |
38 | }
39 |
40 | render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
41 |
42 | if ( this.uniforms[ this.textureID ] ) {
43 |
44 | this.uniforms[ this.textureID ].value = readBuffer.texture;
45 |
46 | }
47 |
48 | this.fsQuad.material = this.material;
49 |
50 | if ( this.renderToScreen ) {
51 |
52 | renderer.setRenderTarget( null );
53 | this.fsQuad.render( renderer );
54 |
55 | } else {
56 |
57 | renderer.setRenderTarget( writeBuffer );
58 | // TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
59 | if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
60 | this.fsQuad.render( renderer );
61 |
62 | }
63 |
64 | }
65 |
66 | dispose() {
67 |
68 | this.material.dispose();
69 |
70 | this.fsQuad.dispose();
71 |
72 | }
73 |
74 | }
75 |
76 | export { ShaderPass };
77 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/postprocessing/TexturePass.js:
--------------------------------------------------------------------------------
1 | import {
2 | ShaderMaterial,
3 | UniformsUtils
4 | } from 'three';
5 | import { Pass, FullScreenQuad } from './Pass.js';
6 | import { CopyShader } from '../shaders/CopyShader.js';
7 |
8 | class TexturePass extends Pass {
9 |
10 | constructor( map, opacity ) {
11 |
12 | super();
13 |
14 | if ( CopyShader === undefined ) console.error( 'THREE.TexturePass relies on CopyShader' );
15 |
16 | const shader = CopyShader;
17 |
18 | this.map = map;
19 | this.opacity = ( opacity !== undefined ) ? opacity : 1.0;
20 |
21 | this.uniforms = UniformsUtils.clone( shader.uniforms );
22 |
23 | this.material = new ShaderMaterial( {
24 |
25 | uniforms: this.uniforms,
26 | vertexShader: shader.vertexShader,
27 | fragmentShader: shader.fragmentShader,
28 | depthTest: false,
29 | depthWrite: false
30 |
31 | } );
32 |
33 | this.needsSwap = false;
34 |
35 | this.fsQuad = new FullScreenQuad( null );
36 |
37 | }
38 |
39 | render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
40 |
41 | const oldAutoClear = renderer.autoClear;
42 | renderer.autoClear = false;
43 |
44 | this.fsQuad.material = this.material;
45 |
46 | this.uniforms[ 'opacity' ].value = this.opacity;
47 | this.uniforms[ 'tDiffuse' ].value = this.map;
48 | this.material.transparent = ( this.opacity < 1.0 );
49 |
50 | renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
51 | if ( this.clear ) renderer.clear();
52 | this.fsQuad.render( renderer );
53 |
54 | renderer.autoClear = oldAutoClear;
55 |
56 | }
57 |
58 | dispose() {
59 |
60 | this.material.dispose();
61 |
62 | this.fsQuad.dispose();
63 |
64 | }
65 |
66 | }
67 |
68 | export { TexturePass };
69 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/AfterimageShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Afterimage shader
3 | * I created this effect inspired by a demo on codepen:
4 | * https://codepen.io/brunoimbrizi/pen/MoRJaN?page=1&
5 | */
6 |
7 | const AfterimageShader = {
8 |
9 | uniforms: {
10 |
11 | 'damp': { value: 0.96 },
12 | 'tOld': { value: null },
13 | 'tNew': { value: null }
14 |
15 | },
16 |
17 | vertexShader: /* glsl */`
18 |
19 | varying vec2 vUv;
20 |
21 | void main() {
22 |
23 | vUv = uv;
24 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
25 |
26 | }`,
27 |
28 | fragmentShader: /* glsl */`
29 |
30 | uniform float damp;
31 |
32 | uniform sampler2D tOld;
33 | uniform sampler2D tNew;
34 |
35 | varying vec2 vUv;
36 |
37 | vec4 when_gt( vec4 x, float y ) {
38 |
39 | return max( sign( x - y ), 0.0 );
40 |
41 | }
42 |
43 | void main() {
44 |
45 | vec4 texelOld = texture2D( tOld, vUv );
46 | vec4 texelNew = texture2D( tNew, vUv );
47 |
48 | texelOld *= damp * when_gt( texelOld, 0.1 );
49 |
50 | gl_FragColor = max(texelNew, texelOld);
51 |
52 | }`
53 |
54 | };
55 |
56 | export { AfterimageShader };
57 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/BasicShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Simple test shader
3 | */
4 |
5 | const BasicShader = {
6 |
7 | uniforms: {},
8 |
9 | vertexShader: /* glsl */`
10 |
11 | void main() {
12 |
13 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
14 |
15 | }`,
16 |
17 | fragmentShader: /* glsl */`
18 |
19 | void main() {
20 |
21 | gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );
22 |
23 | }`
24 |
25 | };
26 |
27 | export { BasicShader };
28 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/BleachBypassShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Bleach bypass shader [http://en.wikipedia.org/wiki/Bleach_bypass]
3 | * - based on Nvidia example
4 | * http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass
5 | */
6 |
7 | const BleachBypassShader = {
8 |
9 | uniforms: {
10 |
11 | 'tDiffuse': { value: null },
12 | 'opacity': { value: 1.0 }
13 |
14 | },
15 |
16 | vertexShader: /* glsl */`
17 |
18 | varying vec2 vUv;
19 |
20 | void main() {
21 |
22 | vUv = uv;
23 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
24 |
25 | }`,
26 |
27 | fragmentShader: /* glsl */`
28 |
29 | uniform float opacity;
30 |
31 | uniform sampler2D tDiffuse;
32 |
33 | varying vec2 vUv;
34 |
35 | void main() {
36 |
37 | vec4 base = texture2D( tDiffuse, vUv );
38 |
39 | vec3 lumCoeff = vec3( 0.25, 0.65, 0.1 );
40 | float lum = dot( lumCoeff, base.rgb );
41 | vec3 blend = vec3( lum );
42 |
43 | float L = min( 1.0, max( 0.0, 10.0 * ( lum - 0.45 ) ) );
44 |
45 | vec3 result1 = 2.0 * base.rgb * blend;
46 | vec3 result2 = 1.0 - 2.0 * ( 1.0 - blend ) * ( 1.0 - base.rgb );
47 |
48 | vec3 newColor = mix( result1, result2, L );
49 |
50 | float A2 = opacity * base.a;
51 | vec3 mixRGB = A2 * newColor.rgb;
52 | mixRGB += ( ( 1.0 - A2 ) * base.rgb );
53 |
54 | gl_FragColor = vec4( mixRGB, base.a );
55 |
56 | }`
57 |
58 | };
59 |
60 | export { BleachBypassShader };
61 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/BlendShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Blend two textures
3 | */
4 |
5 | const BlendShader = {
6 |
7 | uniforms: {
8 |
9 | 'tDiffuse1': { value: null },
10 | 'tDiffuse2': { value: null },
11 | 'mixRatio': { value: 0.5 },
12 | 'opacity': { value: 1.0 }
13 |
14 | },
15 |
16 | vertexShader: /* glsl */`
17 |
18 | varying vec2 vUv;
19 |
20 | void main() {
21 |
22 | vUv = uv;
23 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
24 |
25 | }`,
26 |
27 | fragmentShader: /* glsl */`
28 |
29 | uniform float opacity;
30 | uniform float mixRatio;
31 |
32 | uniform sampler2D tDiffuse1;
33 | uniform sampler2D tDiffuse2;
34 |
35 | varying vec2 vUv;
36 |
37 | void main() {
38 |
39 | vec4 texel1 = texture2D( tDiffuse1, vUv );
40 | vec4 texel2 = texture2D( tDiffuse2, vUv );
41 | gl_FragColor = mix( texel1, texel2, mixRatio );
42 | gl_FragColor.a *= opacity;
43 |
44 | }`
45 |
46 | };
47 |
48 | export { BlendShader };
49 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/BrightnessContrastShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Brightness and contrast adjustment
3 | * https://github.com/evanw/glfx.js
4 | * brightness: -1 to 1 (-1 is solid black, 0 is no change, and 1 is solid white)
5 | * contrast: -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast)
6 | */
7 |
8 | const BrightnessContrastShader = {
9 |
10 | uniforms: {
11 |
12 | 'tDiffuse': { value: null },
13 | 'brightness': { value: 0 },
14 | 'contrast': { value: 0 }
15 |
16 | },
17 |
18 | vertexShader: /* glsl */`
19 |
20 | varying vec2 vUv;
21 |
22 | void main() {
23 |
24 | vUv = uv;
25 |
26 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
27 |
28 | }`,
29 |
30 | fragmentShader: /* glsl */`
31 |
32 | uniform sampler2D tDiffuse;
33 | uniform float brightness;
34 | uniform float contrast;
35 |
36 | varying vec2 vUv;
37 |
38 | void main() {
39 |
40 | gl_FragColor = texture2D( tDiffuse, vUv );
41 |
42 | gl_FragColor.rgb += brightness;
43 |
44 | if (contrast > 0.0) {
45 | gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) / (1.0 - contrast) + 0.5;
46 | } else {
47 | gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) * (1.0 + contrast) + 0.5;
48 | }
49 |
50 | }`
51 |
52 | };
53 |
54 | export { BrightnessContrastShader };
55 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/ColorCorrectionShader.js:
--------------------------------------------------------------------------------
1 | import {
2 | Vector3
3 | } from 'three';
4 |
5 | /**
6 | * Color correction
7 | */
8 |
9 | const ColorCorrectionShader = {
10 |
11 | uniforms: {
12 |
13 | 'tDiffuse': { value: null },
14 | 'powRGB': { value: new Vector3( 2, 2, 2 ) },
15 | 'mulRGB': { value: new Vector3( 1, 1, 1 ) },
16 | 'addRGB': { value: new Vector3( 0, 0, 0 ) }
17 |
18 | },
19 |
20 | vertexShader: /* glsl */`
21 |
22 | varying vec2 vUv;
23 |
24 | void main() {
25 |
26 | vUv = uv;
27 |
28 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
29 |
30 | }`,
31 |
32 | fragmentShader: /* glsl */`
33 |
34 | uniform sampler2D tDiffuse;
35 | uniform vec3 powRGB;
36 | uniform vec3 mulRGB;
37 | uniform vec3 addRGB;
38 |
39 | varying vec2 vUv;
40 |
41 | void main() {
42 |
43 | gl_FragColor = texture2D( tDiffuse, vUv );
44 | gl_FragColor.rgb = mulRGB * pow( ( gl_FragColor.rgb + addRGB ), powRGB );
45 |
46 | }`
47 |
48 | };
49 |
50 | export { ColorCorrectionShader };
51 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/ColorifyShader.js:
--------------------------------------------------------------------------------
1 | import {
2 | Color
3 | } from 'three';
4 |
5 | /**
6 | * Colorify shader
7 | */
8 |
9 | const ColorifyShader = {
10 |
11 | uniforms: {
12 |
13 | 'tDiffuse': { value: null },
14 | 'color': { value: new Color( 0xffffff ) }
15 |
16 | },
17 |
18 | vertexShader: /* glsl */`
19 |
20 | varying vec2 vUv;
21 |
22 | void main() {
23 |
24 | vUv = uv;
25 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
26 |
27 | }`,
28 |
29 | fragmentShader: /* glsl */`
30 |
31 | uniform vec3 color;
32 | uniform sampler2D tDiffuse;
33 |
34 | varying vec2 vUv;
35 |
36 | void main() {
37 |
38 | vec4 texel = texture2D( tDiffuse, vUv );
39 |
40 | vec3 luma = vec3( 0.299, 0.587, 0.114 );
41 | float v = dot( texel.xyz, luma );
42 |
43 | gl_FragColor = vec4( v * color, texel.w );
44 |
45 | }`
46 |
47 | };
48 |
49 | export { ColorifyShader };
50 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/CopyShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Full-screen textured quad shader
3 | */
4 |
5 | const CopyShader = {
6 |
7 | uniforms: {
8 |
9 | 'tDiffuse': { value: null },
10 | 'opacity': { value: 1.0 }
11 |
12 | },
13 |
14 | vertexShader: /* glsl */`
15 |
16 | varying vec2 vUv;
17 |
18 | void main() {
19 |
20 | vUv = uv;
21 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
22 |
23 | }`,
24 |
25 | fragmentShader: /* glsl */`
26 |
27 | uniform float opacity;
28 |
29 | uniform sampler2D tDiffuse;
30 |
31 | varying vec2 vUv;
32 |
33 | void main() {
34 |
35 | gl_FragColor = texture2D( tDiffuse, vUv );
36 | gl_FragColor.a *= opacity;
37 |
38 |
39 | }`
40 |
41 | };
42 |
43 | export { CopyShader };
44 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/DOFMipMapShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Depth-of-field shader using mipmaps
3 | * - from Matt Handley @applmak
4 | * - requires power-of-2 sized render target with enabled mipmaps
5 | */
6 |
7 | const DOFMipMapShader = {
8 |
9 | uniforms: {
10 |
11 | 'tColor': { value: null },
12 | 'tDepth': { value: null },
13 | 'focus': { value: 1.0 },
14 | 'maxblur': { value: 1.0 }
15 |
16 | },
17 |
18 | vertexShader: /* glsl */`
19 |
20 | varying vec2 vUv;
21 |
22 | void main() {
23 |
24 | vUv = uv;
25 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
26 |
27 | }`,
28 |
29 | fragmentShader: /* glsl */`
30 |
31 | uniform float focus;
32 | uniform float maxblur;
33 |
34 | uniform sampler2D tColor;
35 | uniform sampler2D tDepth;
36 |
37 | varying vec2 vUv;
38 |
39 | void main() {
40 |
41 | vec4 depth = texture2D( tDepth, vUv );
42 |
43 | float factor = depth.x - focus;
44 |
45 | vec4 col = texture2D( tColor, vUv, 2.0 * maxblur * abs( focus - depth.x ) );
46 |
47 | gl_FragColor = col;
48 | gl_FragColor.a = 1.0;
49 |
50 | }`
51 |
52 | };
53 |
54 | export { DOFMipMapShader };
55 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/DotScreenShader.js:
--------------------------------------------------------------------------------
1 | import {
2 | Vector2
3 | } from 'three';
4 |
5 | /**
6 | * Dot screen shader
7 | * based on glfx.js sepia shader
8 | * https://github.com/evanw/glfx.js
9 | */
10 |
11 | const DotScreenShader = {
12 |
13 | uniforms: {
14 |
15 | 'tDiffuse': { value: null },
16 | 'tSize': { value: new Vector2( 256, 256 ) },
17 | 'center': { value: new Vector2( 0.5, 0.5 ) },
18 | 'angle': { value: 1.57 },
19 | 'scale': { value: 1.0 }
20 |
21 | },
22 |
23 | vertexShader: /* glsl */`
24 |
25 | varying vec2 vUv;
26 |
27 | void main() {
28 |
29 | vUv = uv;
30 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
31 |
32 | }`,
33 |
34 | fragmentShader: /* glsl */`
35 |
36 | uniform vec2 center;
37 | uniform float angle;
38 | uniform float scale;
39 | uniform vec2 tSize;
40 |
41 | uniform sampler2D tDiffuse;
42 |
43 | varying vec2 vUv;
44 |
45 | float pattern() {
46 |
47 | float s = sin( angle ), c = cos( angle );
48 |
49 | vec2 tex = vUv * tSize - center;
50 | vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;
51 |
52 | return ( sin( point.x ) * sin( point.y ) ) * 4.0;
53 |
54 | }
55 |
56 | void main() {
57 |
58 | vec4 color = texture2D( tDiffuse, vUv );
59 |
60 | float average = ( color.r + color.g + color.b ) / 3.0;
61 |
62 | gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );
63 |
64 | }`
65 |
66 | };
67 |
68 | export { DotScreenShader };
69 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/GammaCorrectionShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Gamma Correction Shader
3 | * http://en.wikipedia.org/wiki/gamma_correction
4 | */
5 |
6 | const GammaCorrectionShader = {
7 |
8 | uniforms: {
9 |
10 | 'tDiffuse': { value: null }
11 |
12 | },
13 |
14 | vertexShader: /* glsl */`
15 |
16 | varying vec2 vUv;
17 |
18 | void main() {
19 |
20 | vUv = uv;
21 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
22 |
23 | }`,
24 |
25 | fragmentShader: /* glsl */`
26 |
27 | uniform sampler2D tDiffuse;
28 |
29 | varying vec2 vUv;
30 |
31 | void main() {
32 |
33 | vec4 tex = texture2D( tDiffuse, vUv );
34 |
35 | gl_FragColor = LinearTosRGB( tex );
36 |
37 | }`
38 |
39 | };
40 |
41 | export { GammaCorrectionShader };
42 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/HorizontalBlurShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Two pass Gaussian blur filter (horizontal and vertical blur shaders)
3 | * - see http://www.cake23.de/traveling-wavefronts-lit-up.html
4 | *
5 | * - 9 samples per pass
6 | * - standard deviation 2.7
7 | * - "h" and "v" parameters should be set to "1 / width" and "1 / height"
8 | */
9 |
10 | const HorizontalBlurShader = {
11 |
12 | uniforms: {
13 |
14 | 'tDiffuse': { value: null },
15 | 'h': { value: 1.0 / 512.0 }
16 |
17 | },
18 |
19 | vertexShader: /* glsl */`
20 |
21 | varying vec2 vUv;
22 |
23 | void main() {
24 |
25 | vUv = uv;
26 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
27 |
28 | }`,
29 |
30 | fragmentShader: /* glsl */`
31 |
32 | uniform sampler2D tDiffuse;
33 | uniform float h;
34 |
35 | varying vec2 vUv;
36 |
37 | void main() {
38 |
39 | vec4 sum = vec4( 0.0 );
40 |
41 | sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * h, vUv.y ) ) * 0.051;
42 | sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * h, vUv.y ) ) * 0.0918;
43 | sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * h, vUv.y ) ) * 0.12245;
44 | sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * h, vUv.y ) ) * 0.1531;
45 | sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
46 | sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * h, vUv.y ) ) * 0.1531;
47 | sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * h, vUv.y ) ) * 0.12245;
48 | sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * h, vUv.y ) ) * 0.0918;
49 | sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * h, vUv.y ) ) * 0.051;
50 |
51 | gl_FragColor = sum;
52 |
53 | }`
54 |
55 | };
56 |
57 | export { HorizontalBlurShader };
58 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/HorizontalTiltShiftShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Simple fake tilt-shift effect, modulating two pass Gaussian blur (see above) by vertical position
3 | *
4 | * - 9 samples per pass
5 | * - standard deviation 2.7
6 | * - "h" and "v" parameters should be set to "1 / width" and "1 / height"
7 | * - "r" parameter control where "focused" horizontal line lies
8 | */
9 |
10 | const HorizontalTiltShiftShader = {
11 |
12 | uniforms: {
13 |
14 | 'tDiffuse': { value: null },
15 | 'h': { value: 1.0 / 512.0 },
16 | 'r': { value: 0.35 }
17 |
18 | },
19 |
20 | vertexShader: /* glsl */`
21 |
22 | varying vec2 vUv;
23 |
24 | void main() {
25 |
26 | vUv = uv;
27 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
28 |
29 | }`,
30 |
31 | fragmentShader: /* glsl */`
32 |
33 | uniform sampler2D tDiffuse;
34 | uniform float h;
35 | uniform float r;
36 |
37 | varying vec2 vUv;
38 |
39 | void main() {
40 |
41 | vec4 sum = vec4( 0.0 );
42 |
43 | float hh = h * abs( r - vUv.y );
44 |
45 | sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * hh, vUv.y ) ) * 0.051;
46 | sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * hh, vUv.y ) ) * 0.0918;
47 | sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * hh, vUv.y ) ) * 0.12245;
48 | sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * hh, vUv.y ) ) * 0.1531;
49 | sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
50 | sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * hh, vUv.y ) ) * 0.1531;
51 | sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * hh, vUv.y ) ) * 0.12245;
52 | sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * hh, vUv.y ) ) * 0.0918;
53 | sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * hh, vUv.y ) ) * 0.051;
54 |
55 | gl_FragColor = sum;
56 |
57 | }`
58 |
59 | };
60 |
61 | export { HorizontalTiltShiftShader };
62 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/HueSaturationShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Hue and saturation adjustment
3 | * https://github.com/evanw/glfx.js
4 | * hue: -1 to 1 (-1 is 180 degrees in the negative direction, 0 is no change, etc.
5 | * saturation: -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast)
6 | */
7 |
8 | const HueSaturationShader = {
9 |
10 | uniforms: {
11 |
12 | 'tDiffuse': { value: null },
13 | 'hue': { value: 0 },
14 | 'saturation': { value: 0 }
15 |
16 | },
17 |
18 | vertexShader: /* glsl */`
19 |
20 | varying vec2 vUv;
21 |
22 | void main() {
23 |
24 | vUv = uv;
25 |
26 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
27 |
28 | }`,
29 |
30 | fragmentShader: /* glsl */`
31 |
32 | uniform sampler2D tDiffuse;
33 | uniform float hue;
34 | uniform float saturation;
35 |
36 | varying vec2 vUv;
37 |
38 | void main() {
39 |
40 | gl_FragColor = texture2D( tDiffuse, vUv );
41 |
42 | // hue
43 | float angle = hue * 3.14159265;
44 | float s = sin(angle), c = cos(angle);
45 | vec3 weights = (vec3(2.0 * c, -sqrt(3.0) * s - c, sqrt(3.0) * s - c) + 1.0) / 3.0;
46 | float len = length(gl_FragColor.rgb);
47 | gl_FragColor.rgb = vec3(
48 | dot(gl_FragColor.rgb, weights.xyz),
49 | dot(gl_FragColor.rgb, weights.zxy),
50 | dot(gl_FragColor.rgb, weights.yzx)
51 | );
52 |
53 | // saturation
54 | float average = (gl_FragColor.r + gl_FragColor.g + gl_FragColor.b) / 3.0;
55 | if (saturation > 0.0) {
56 | gl_FragColor.rgb += (average - gl_FragColor.rgb) * (1.0 - 1.0 / (1.001 - saturation));
57 | } else {
58 | gl_FragColor.rgb += (average - gl_FragColor.rgb) * (-saturation);
59 | }
60 |
61 | }`
62 |
63 | };
64 |
65 | export { HueSaturationShader };
66 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/KaleidoShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Kaleidoscope Shader
3 | * Radial reflection around center point
4 | * Ported from: http://pixelshaders.com/editor/
5 | * by Toby Schachman / http://tobyschachman.com/
6 | *
7 | * sides: number of reflections
8 | * angle: initial angle in radians
9 | */
10 |
11 | const KaleidoShader = {
12 |
13 | uniforms: {
14 |
15 | 'tDiffuse': { value: null },
16 | 'sides': { value: 6.0 },
17 | 'angle': { value: 0.0 }
18 |
19 | },
20 |
21 | vertexShader: /* glsl */`
22 |
23 | varying vec2 vUv;
24 |
25 | void main() {
26 |
27 | vUv = uv;
28 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
29 |
30 | }`,
31 |
32 | fragmentShader: /* glsl */`
33 |
34 | uniform sampler2D tDiffuse;
35 | uniform float sides;
36 | uniform float angle;
37 |
38 | varying vec2 vUv;
39 |
40 | void main() {
41 |
42 | vec2 p = vUv - 0.5;
43 | float r = length(p);
44 | float a = atan(p.y, p.x) + angle;
45 | float tau = 2. * 3.1416 ;
46 | a = mod(a, tau/sides);
47 | a = abs(a - tau/sides/2.) ;
48 | p = r * vec2(cos(a), sin(a));
49 | vec4 color = texture2D(tDiffuse, p + 0.5);
50 | gl_FragColor = color;
51 |
52 | }`
53 |
54 | };
55 |
56 | export { KaleidoShader };
57 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/LuminosityHighPassShader.js:
--------------------------------------------------------------------------------
1 | import {
2 | Color
3 | } from 'three';
4 |
5 | /**
6 | * Luminosity
7 | * http://en.wikipedia.org/wiki/Luminosity
8 | */
9 |
10 | const LuminosityHighPassShader = {
11 |
12 | shaderID: 'luminosityHighPass',
13 |
14 | uniforms: {
15 |
16 | 'tDiffuse': { value: null },
17 | 'luminosityThreshold': { value: 1.0 },
18 | 'smoothWidth': { value: 1.0 },
19 | 'defaultColor': { value: new Color( 0x000000 ) },
20 | 'defaultOpacity': { value: 0.0 }
21 |
22 | },
23 |
24 | vertexShader: /* glsl */`
25 |
26 | varying vec2 vUv;
27 |
28 | void main() {
29 |
30 | vUv = uv;
31 |
32 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
33 |
34 | }`,
35 |
36 | fragmentShader: /* glsl */`
37 |
38 | uniform sampler2D tDiffuse;
39 | uniform vec3 defaultColor;
40 | uniform float defaultOpacity;
41 | uniform float luminosityThreshold;
42 | uniform float smoothWidth;
43 |
44 | varying vec2 vUv;
45 |
46 | void main() {
47 |
48 | vec4 texel = texture2D( tDiffuse, vUv );
49 |
50 | vec3 luma = vec3( 0.299, 0.587, 0.114 );
51 |
52 | float v = dot( texel.xyz, luma );
53 |
54 | vec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );
55 |
56 | float alpha = smoothstep( luminosityThreshold, luminosityThreshold + smoothWidth, v );
57 |
58 | gl_FragColor = mix( outputColor, texel, alpha );
59 |
60 | }`
61 |
62 | };
63 |
64 | export { LuminosityHighPassShader };
65 |
--------------------------------------------------------------------------------
/threejs-third-person-shooter/jsm/shaders/LuminosityShader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Luminosity
3 | * http://en.wikipedia.org/wiki/Luminosity
4 | */
5 |
6 | const LuminosityShader = {
7 |
8 | uniforms: {
9 |
10 | 'tDiffuse': { value: null }
11 |
12 | },
13 |
14 | vertexShader: /* glsl */`
15 |
16 | varying vec2 vUv;
17 |
18 | void main() {
19 |
20 | vUv = uv;
21 |
22 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
23 |
24 | }`,
25 |
26 | fragmentShader: /* glsl */`
27 |
28 | #include 0
38 | Remaining Balls: 00
39 |