From a5757c1740f379987fb2eec767e7fc9f8f07d5de Mon Sep 17 00:00:00 2001 From: Mariano Merchante Date: Tue, 21 Feb 2017 03:30:59 -0500 Subject: [PATCH 01/30] + Transferred HW4 into 5. Let's do this! --- README.md | 123 - deploy.js | 38 + index.html | 4 +- package.json | 33 +- src/assets/wahoo.bmp | Bin 2359352 -> 0 bytes src/assets/wahoo.obj | 19990 --------------------------------- src/building.js | 444 + src/city.js | 664 ++ src/common.js | 38 + src/framework.js | 72 + src/glsl/grayscale-frag.glsl | 15 - src/glsl/lambert-frag.glsl | 24 - src/glsl/lambert-vert.glsl | 12 - src/glsl/pass-vert.glsl | 8 - src/main.js | 213 +- src/mario.js | 19 - src/post/grayscale.js | 48 - src/post/index.js | 18 - src/rubik.js | 308 + src/setup.js | 65 - src/shaders/index.js | 4 - src/shaders/lambert.js | 77 - webpack.config.js | 11 +- 23 files changed, 1723 insertions(+), 20505 deletions(-) create mode 100644 deploy.js delete mode 100644 src/assets/wahoo.bmp delete mode 100644 src/assets/wahoo.obj create mode 100644 src/building.js create mode 100644 src/city.js create mode 100644 src/common.js create mode 100644 src/framework.js delete mode 100644 src/glsl/grayscale-frag.glsl delete mode 100644 src/glsl/lambert-frag.glsl delete mode 100644 src/glsl/lambert-vert.glsl delete mode 100644 src/glsl/pass-vert.glsl delete mode 100644 src/mario.js delete mode 100644 src/post/grayscale.js delete mode 100644 src/post/index.js create mode 100644 src/rubik.js delete mode 100644 src/setup.js delete mode 100644 src/shaders/index.js delete mode 100644 src/shaders/lambert.js diff --git a/README.md b/README.md index 08c69b7..e69de29 100644 --- a/README.md +++ b/README.md @@ -1,123 +0,0 @@ - -# Project 5: Shaders - -## Project Instructions - -Implement at least 75 points worth of shaders from the following list. We reserve the right to grant only partial credit for shaders that do not meet our standards, as well as extra credit for shaders that we find to be particularly impressive. - -Some of these shading effects were covered in lecture -- some were not. If you wish to implement the more complex effects, you will have to perform some extra research. Of course, we encourage such academic curiosity which is why we’ve included these advanced shaders in the first place! - -Document each shader you implement in your README with at least a sentence or two of explanation. Well-commented code will earn you many brownie (and probably sanity) points. - -If you use shadertoy or any materials as reference, please properly credit your sources in the README and on top of the shader file. Failing to do so will result in plagiarism and will significantly reduce your points. - -Examples: [https://cis700-procedural-graphics.github.io/Project5-Shaders/](https://cis700-procedural-graphics.github.io/Project5-Shaders/) - -### 15 points each: Instagram-like filters - -- Tone mapping: - - Linear (+5 points) - - Reinhard (+5 points) - - Filmic (+5 points) -- Gaussian blur (no double counting with Bloom) -- Iridescence -- Pointilism -- Vignette -- Fish-eye bulge - -### 25 points each: -- Bloom -- Noise Warp -- Hatching -- Lit Sphere ([paper](http://www.ppsloan.org/publications/LitSphere.pdf)) - -### 37.5 points each: -- K-means color compression (unless you are extremely clever, the k-means clusterer has to be CPU side) -- Dithering -- Edge detection with Sobel filtering -- Uncharted 2 customizable filmic curve, following John Hable’s presetantion. - - Without Linear, Reinhard, filmic (+10 points) - - With all of linear, Reinhard, filmic (+10 points) - - Customizable via GUI (+17.5 points) - - Controlling Exposure (4 points) - - Side by side comparison between linear, Reinhard, filmic, and Uncharted2 (13.5 points). - -### 5 points - Interactivity -Implement a dropdown GUI to select different shader effects from your list. - -### ??? points -Propose your own shading effects! - -### For the overachievers: -Weave all your shading effects into one aesthetically-coherent scene, perhaps by incorporating some of your previous assignments! - - -## Getting Started - -### main.js - -`main.js` is responsible for setting up the scene with the Mario mesh, initializing GUI and camera, etc. - -### Adding Shaders - -To add a shader, you'll want to add a file to the `src/shaders` or `src/post` folder. As examples, we've provided two shaders `lambert.js` and `grayscale.js`. Here, I will give a brief overview of how these work and how everything hooks together. - -**shaders/lambert.js** - -IMPORTANT: I make my lambert shader available by exporting it in `shaders/index.js`. - -```javascript -export {default as Lambert} from './Lambert' -``` - -Each shader should export a function that takes in the `renderer`, `scene`, and `camera`. That function should return a `Shader` Object. - -`Shader.initGUI` is a function that will be called to initialize the GUI for that shader. in `lambert.js`, you can see that it's here that I set up all the parameters that will affect my shader. - -`Shader.material` should be a `THREE.ShaderMaterial`. This should be pretty similar to what you've seen in previous projects. `Shader.material.vertexShader` and `Shader.material.fragmentShader` are the vertex and fragment shaders used. - -At the bottom, I have the following snippet of code. All it does is bind the Mario texture once it's loaded. - -```javascript -textureLoaded.then(function(texture) { - Shader.material.uniforms.texture.value = texture; -}); -``` - -So when you change the Shader parameter in the GUI, `Shader.initGUI(gui)` will be called to initialize the GUI, and then the Mario mesh will have `Shader.material` applied to it. - -**post/grayscale.js** - -GUI parameters here are initialized the same way they are for the other shaders. - -Post process shaders should use the THREE.js `EffectComposer`. To set up the grayscale filter, I first create a new composer: `var composer = new EffectComposer(renderer);`. Then I add a a render pass as the first pass: `composer.addPass(new EffectComposer.RenderPass(scene, camera));`. This will set up the composer to render the scene as normal into a buffer. I add my filter to operate on that buffer: `composer.addPass(GrayscaleShader);`, and mark it as the final pass that will write to the screen `GrayscaleShader.renderToScreen = true;` - -GrayscaleShader is a `EffectComposer.ShaderPass` which basically takes the same arguments as `THREE.ShaderMaterial`. Note, that one uniform that will have to include is `tDiffuse`. This is the texture sampler which the EffectComposer will automatically bind the previously rendered pass to. If you look at `glsl/grayscale-frag.glsl`, this is the texture we read from to get the previous pixel color: `vec4 col = texture2D(tDiffuse, f_uv);`. - -IMPORTANT: You initially define your shader passes like so: - -```javascript -var GrayscaleShader = new EffectComposer.ShaderPass({ - uniforms: { - tDiffuse: { - type: 't', - value: null - }, - u_amount: { - type: 'f', - value: options.amount - } - }, - vertexShader: require('../glsl/pass-vert.glsl'), - fragmentShader: require('../glsl/grayscale-frag.glsl') -}); -``` - -BUT, if you want to modify the uniforms, you need to do so like so: `GrayscaleShader.material.uniforms.u_amount.value = val;`. Note the extra `.material` property. - -## Deploy - -1. Create a `gh-pages` branch on GitHub -2. Do `npm run build` -3. Commit and add all your changes. -4. Do `npm run deploy` \ No newline at end of file diff --git a/deploy.js b/deploy.js new file mode 100644 index 0000000..9defe7c --- /dev/null +++ b/deploy.js @@ -0,0 +1,38 @@ +var colors = require('colors'); +var path = require('path'); +var git = require('simple-git')(__dirname); +var deploy = require('gh-pages-deploy'); +var packageJSON = require('require-module')('./package.json'); + +var success = 1; +git.fetch('origin', 'master', function(err) { + if (err) throw err; + git.status(function(err, status) { + if (err) throw err; + if (!status.isClean()) { + success = 0; + console.error('Error: You have uncommitted changes! Please commit them first'.red); + } + + if (status.current !== 'master') { + success = 0; + console.warn('Warning: Please deploy from the master branch!'.yellow) + } + + git.diffSummary(['origin/master'], function(err, diff) { + if (err) throw err; + + if (diff.files.length || diff.insertions || diff.deletions) { + success = 0; + console.error('Error: Current branch is different from origin/master! Please push all changes first'.red) + } + + if (success) { + var cfg = packageJSON['gh-pages-deploy'] || {}; + var buildCmd = deploy.getFullCmd(cfg); + deploy.displayCmds(deploy.getFullCmd(cfg)); + deploy.execBuild(buildCmd, cfg); + } + }) + }) +}) \ No newline at end of file diff --git a/index.html b/index.html index 8bc7d8a..c8e72fd 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - Shader Demos + Shape Grammars +
▶
diff --git a/package.json b/package.json index be683fc..9f2824a 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,12 @@ }, "dependencies": { "dat-gui": "^0.5.0", + "ease-component": "1.0.0", "gl-matrix": "^2.3.2", + "random-js": "1.0.8", "stats-js": "^1.0.0-alpha1", "three": "^0.82.1", + "three-effectcomposer": "0.0.1", "three-orbit-controls": "^82.1.0" }, "devDependencies": { diff --git a/src/framework.js b/src/framework.js index 9537e92..2f666ca 100644 --- a/src/framework.js +++ b/src/framework.js @@ -7,6 +7,8 @@ import DAT from 'dat-gui' // when the scene is done initializing, the function passed as `callback` will be executed // then, every frame, the function passed as `update` will be executed function init(callback, update, resizeFunction) { + + var hasUserGesture = false; //var stats = new Stats(); //stats.setMode(1); @@ -24,7 +26,7 @@ function init(callback, update, resizeFunction) { // run this function after the window loads window.addEventListener('load', function() { - + document.body.style.cursor = 'pointer'; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer( { antialias: true } ); @@ -41,7 +43,8 @@ function init(callback, update, resizeFunction) { controls.zoomSpeed = 1.0; controls.panSpeed = 2.0; - document.body.appendChild(renderer.domElement); + const e = document.getElementById('startMsg'); + document.body.insertBefore(renderer.domElement, e); // resize the canvas when the window changes window.addEventListener('resize', function() { @@ -66,8 +69,26 @@ function init(callback, update, resizeFunction) { requestAnimationFrame(tick); // register to call this again when the browser renders a new frame })(); - // we will pass the scene, gui, renderer, camera, etc... to the callback function - return callback(framework); + return; + }); + + + // Need to do this in the click event listener because AudioContexts can no longer play without a user gesture + window.addEventListener('click', function() { + if (hasUserGesture) { + return; + } else { + hasUserGesture = true; + document.body.style.cursor = 'auto'; + + // Hide the overlays + [].forEach.call(document.querySelectorAll('.overlay'), function (el) { + el.style.visibility = 'hidden'; + }); + + // we will pass the scene, gui, renderer, camera, etc... to the callback function + return callback(framework); + } }); } diff --git a/webpack.config.js b/webpack.config.js index 57dce48..f349b39 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,6 +23,6 @@ module.exports = { }, devtool: 'source-map', devServer: { - port: 7000 + port: 9000 } } \ No newline at end of file From 435493c5545347cc23dc65e3b245ec422ce34c30 Mon Sep 17 00:00:00 2001 From: Alex Chan Date: Tue, 15 Feb 2022 19:00:28 -0800 Subject: [PATCH 30/30] Revert port change --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index f349b39..57dce48 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,6 +23,6 @@ module.exports = { }, devtool: 'source-map', devServer: { - port: 9000 + port: 7000 } } \ No newline at end of file