├── README.md ├── digital-moodboards ├── README.md ├── milanote.jpg └── spacedeck.jpg ├── graphics ├── billboards │ └── README.md ├── bumpmapping │ └── README.md ├── deferredrendering │ └── README.md ├── dof │ └── README.md ├── gi │ ├── README.md │ ├── diewald_hdr_twosided.jpg │ └── surfels.jpg ├── lightmapping │ └── README.md ├── lut │ ├── README.md │ ├── example.jpg │ └── lut.jpg ├── ssr │ ├── KF2-SSR-1.jpg │ ├── KF2-SSR-4.jpg │ ├── README.md │ └── roar_ssr.jpg ├── sss │ ├── README.md │ ├── cubesss1.jpg │ ├── matt-sss.jpg │ └── sssss.jpg ├── terrain │ └── README.md └── webgl-next │ ├── webgl-next.png │ └── webgl-next.sketch └── nodejs └── electron.md /README.md: -------------------------------------------------------------------------------- 1 | # var-research 2 | -------------------------------------------------------------------------------- /digital-moodboards/README.md: -------------------------------------------------------------------------------- 1 | # digital moodboards 2 | 3 | ## infinite canvas 4 | 5 | ### sketch 6 | 7 | - Surprisinly good enough but text editing is fainful 8 | 9 | ### milanote 10 | ![](milanote.jpg) 11 | http://www.milanote.com 12 | Review 2017-02-07: 13 | - can't zoom 14 | - no pan shortcut 15 | - no multiple items selection 16 | - meh 17 | 18 | ### spacedeck 19 | ![](spacedeck.jpg) 20 | https://spacedeck.com 21 | Review 2017-02-07 22 | - quirky navigation 23 | - blinking images in safari while panning 24 | - + multiple select 25 | - i'm loosing hope DOM based UI can deliver in this space 26 | 27 | ## Note taking + visual 28 | 29 | https://www.google.com/keep/ 30 | https://turtlapp.com 31 | 32 | ## Note taking 33 | https://laverna.cc 34 | 35 | ## Mind mapping 36 | 37 | https://www.google.com/keep/ 38 | -------------------------------------------------------------------------------- /digital-moodboards/milanote.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/digital-moodboards/milanote.jpg -------------------------------------------------------------------------------- /digital-moodboards/spacedeck.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/digital-moodboards/spacedeck.jpg -------------------------------------------------------------------------------- /graphics/billboards/README.md: -------------------------------------------------------------------------------- 1 | # Billboards 2 | 3 | tldr: transform the model based on the the camera right and up vector (only right if you don't want bending e.g. trees) 4 | the basic idea is described here: 5 | 6 | http://gamedev.stackexchange.com/questions/113147/rotate-billboard-towards-camera 7 | http://www.opengl-tutorial.org/intermediate-tutorials/billboards-particles/billboards/ 8 | 9 | Example implementation 10 | 11 | ```glsl 12 | vec4 pos = vec4(aPosition, 1.0); 13 | vec4 positionWorld = uModelMatrix * pos; 14 | vec4 positionView = uViewMatrix * positionWorld; 15 | 16 | vec3 right = vec3(uViewMatrix[0][0], uViewMatrix[1][0], uViewMatrix[2][0]); 17 | vec3 up = vec3(0.0, 1.0, 0.0); 18 | vec3 worldPos = aPosition.x * right + aPosition.y * up; 19 | 20 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(worldPos, 1.0); 21 | 22 | ``` 23 | 24 | -------------------------------------------------------------------------------- /graphics/bumpmapping/README.md: -------------------------------------------------------------------------------- 1 | 2 | Exploring bump mapping with WebGL 3 | http://apoorvaj.io/exploring-bump-mapping-with-webgl.html 4 | 5 | Normal Mapping 6 | https://learnopengl.com/#!Advanced-Lighting/Normal-Mapping 7 | 8 | Practical Parallax Occlusion Mapping 9 | https://pdfs.semanticscholar.org/c67f/3aea1f7044fd9e174aedc0210ffb85e40a81.pdf 10 | -------------------------------------------------------------------------------- /graphics/deferredrendering/README.md: -------------------------------------------------------------------------------- 1 | # Deferred Rendering 2 | 3 | Deferred Rendering in Floored - color packing 4 | https://www.slideshare.net/floored/penn-graphics?from_action=save 5 | http://www.floored.com/blog/2015webgl-deferred-shading-gbuffer-floating-point-texture/ 6 | -------------------------------------------------------------------------------- /graphics/dof/README.md: -------------------------------------------------------------------------------- 1 | # Depth of Field 2 | 3 | ## Next Gen 4 | 5 | https://bartwronski.com/2014/12/09/designing-a-next-generation-post-effects-pipeline/amp/ 6 | 7 | ## Bokeh blur 8 | 9 | Hexagonal Bokeh Blur Revisited 10 | https://colinbarrebrisebois.com/2017/04/18/hexagonal-bokeh-blur-revisited-part-4-coc-overlap/ 11 | 12 | Five Rendering Ideas from Battlefield 3 & Need For Speed: The Run 13 | https://www.slideshare.net/DICEStudio/five-rendering-ideas-from-battlefield-3-need-for-speed-the-run 14 | -------------------------------------------------------------------------------- /graphics/gi/README.md: -------------------------------------------------------------------------------- 1 | # Global Illumination 2 | 3 | ## Realtime Global Line Radiosity 4 | http://thomasdiewald.com/blog/?p=2099 5 | ![](diewald_hdr_twosided.jpg) 6 | 7 | ## Real Time Global Illumination with Surfels 8 | http://copypastepixel.blogspot.co.uk/2017/04/real-time-global-illumination.html 9 | 10 | ![](surfels.jpg) 11 | -------------------------------------------------------------------------------- /graphics/gi/diewald_hdr_twosided.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/gi/diewald_hdr_twosided.jpg -------------------------------------------------------------------------------- /graphics/gi/surfels.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/gi/surfels.jpg -------------------------------------------------------------------------------- /graphics/lightmapping/README.md: -------------------------------------------------------------------------------- 1 | http://www.ludicon.com/castano/blog/2016/09/lightmap-compression-in-the-witness/ 2 | -------------------------------------------------------------------------------- /graphics/lut/README.md: -------------------------------------------------------------------------------- 1 | # Look-up Tables color correction 2 | 3 | ![](lut.jpg) 4 | 5 | What is a Look Up Table (LUT), Anyway? 6 | http://nofilmschool.com/2011/05/what-is-a-look-up-table-lut-anyway 7 | 8 | ![](example.jpg) 9 | -------------------------------------------------------------------------------- /graphics/lut/example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/lut/example.jpg -------------------------------------------------------------------------------- /graphics/lut/lut.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/lut/lut.jpg -------------------------------------------------------------------------------- /graphics/ssr/KF2-SSR-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/ssr/KF2-SSR-1.jpg -------------------------------------------------------------------------------- /graphics/ssr/KF2-SSR-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/ssr/KF2-SSR-4.jpg -------------------------------------------------------------------------------- /graphics/ssr/README.md: -------------------------------------------------------------------------------- 1 | # Screen Space Reflections SSR 2 | 3 | ## Screen space glossy reflections 4 | 5 | http://roar11.com/2015/07/screen-space-glossy-reflections/ 6 | 7 | ![](roar_ssr.jpg) 8 | 9 | ## Screen Space Reflections in Killing Floor 2 (including source code) 10 | 11 | https://sakibsaikia.github.io/graphics/2016/12/25/Screen-Space-Reflection-in-Killing-Floor-2.html 12 | 13 | ![](KF2-SSR-1.jpg) 14 | ![](KF2-SSR-4.jpg) 15 | 16 | ## The future of screen space reflections 17 | https://bartwronski.com/2014/01/25/the-future-of-screenspace-reflections/ 18 | 19 | ## Stochastic SSR 20 | http://www.frostbite.com/2015/08/stochastic-screen-space-reflections/ 21 | 22 | 23 | ## Kode SSR 24 | http://www.kode80.com/blog/2015/03/11/screen-space-reflections-in-unity-5/ 25 | https://github.com/kode80/kode80SSR/blob/master/Assets/Resources/Shaders/SSR.shader 26 | 27 | ## Screen Space Ray Tracing by Morgan McGuire 28 | http://casual-effects.blogspot.co.uk/2014/08/screen-space-ray-tracing.html 29 | http://jcgt.org/published/0003/04/04/ 30 | https://gitlab.com/morgan3d/g3d/blob/master/G3D10/G3D.lib/source/ 31 | 32 | ## Unity 33 | https://bitbucket.org/Unity-Technologies/cinematic-image-effects/src/7688c95b03d245b3bd9daf8000cb33a052349b89/UnityProject/Assets/Standard%20Assets/Effects/CinematicEffects(BETA)/ScreenSpaceReflection/Resources/ScreenSpaceReflection.shader?at=trunk&fileviewer=file-view-default 34 | 35 | -------------------------------------------------------------------------------- /graphics/ssr/roar_ssr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/ssr/roar_ssr.jpg -------------------------------------------------------------------------------- /graphics/sss/README.md: -------------------------------------------------------------------------------- 1 | # Subsurface Scattering 2 | 3 | ![](sssss.jpg) 4 | [Screen-Space Subsurface Scattering](https://github.com/CustomPhase/CP_SSSSS) 5 | 6 | ![](cubesss1.jpg) 7 | [GDC 2011 – Approximating Translucency for a Fast, Cheap and Convincing Subsurface Scattering Look](https://colinbarrebrisebois.com/2011/03/07/gdc-2011-approximating-translucency-for-a-fast-cheap-and-convincing-subsurface-scattering-look/) 8 | 9 | ![](matt-sss.jpg) 10 | Implemented by Matt DesLauriers in [Tweet](https://twitter.com/mattdesl/status/805784465725419520/video/1) + [Code](https://gist.github.com/mattdesl/2ee82157a86962347dedb6572142df7c) 11 | -------------------------------------------------------------------------------- /graphics/sss/cubesss1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/sss/cubesss1.jpg -------------------------------------------------------------------------------- /graphics/sss/matt-sss.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/sss/matt-sss.jpg -------------------------------------------------------------------------------- /graphics/sss/sssss.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/sss/sssss.jpg -------------------------------------------------------------------------------- /graphics/terrain/README.md: -------------------------------------------------------------------------------- 1 | # Terrain 2 | 3 | - [Noise gen + Erosion + Water + Roads = Awesome](https://www.reddit.com/r/gamedev/comments/1rl0vs/realtime_hydraulic_erosion_simulation_on_gpu/) 4 | - [Good example of many types of gen functions](https://icecreamyou.github.io/THREE.Terrain/) 5 | - [C++ Erosion](https://github.com/karhu/terrain-erosion) 6 | - [C++ Erosion used in garden](http://ranmantaru.com/blog/2011/10/08/water-erosion-on-heightmap-terrain/) 7 | - [WebGL + GPU Erosion](https://github.com/rreusser/demos/tree/master/regl-sketches/src/005) 8 | - [IQ Magic Noise Functions](http://www.iquilezles.org/www/articles/morenoise/morenoise.htm) 9 | - [Interesting Noice Functions](http://www.decarpentier.nl/scape-procedural-basics) 10 | - [Other Generative Techniques](http://web.mit.edu/cesium/Public/terrain.pdf) 11 | - [Codeflow Erosion](http://codeflow.org/entries/2011/nov/10/webgl-gpu-landscaping-and-erosion/) 12 | -------------------------------------------------------------------------------- /graphics/webgl-next/webgl-next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/webgl-next/webgl-next.png -------------------------------------------------------------------------------- /graphics/webgl-next/webgl-next.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/variablestudio/var-research/9ed0ddd124f10cc519b5df9985401c911429b0d9/graphics/webgl-next/webgl-next.sketch -------------------------------------------------------------------------------- /nodejs/electron.md: -------------------------------------------------------------------------------- 1 | # Electron 2 | 3 | ## communicating between windows 4 | http://electron.atom.io/docs/api/ipc-main/ 5 | 6 | ```javascript 7 | // In main process. 8 | const {ipcMain} = require('electron') 9 | ipcMain.on('asynchronous-message', (event, arg) => { 10 | console.log(arg) // prints "ping" 11 | event.sender.send('asynchronous-reply', 'pong') 12 | }) 13 | 14 | ipcMain.on('synchronous-message', (event, arg) => { 15 | console.log(arg) // prints "ping" 16 | event.returnValue = 'pong' 17 | }) 18 | 19 | // In renderer process (web page). 20 | const {ipcRenderer} = require('electron') 21 | console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong" 22 | 23 | ipcRenderer.on('asynchronous-reply', (event, arg) => { 24 | console.log(arg) // prints "pong" 25 | }) 26 | ipcRenderer.send('asynchronous-message', 'ping')` 27 | ``` 28 | 29 | ## socket.io 30 | 31 | server.js 32 | ```javascript 33 | var express = require('express') 34 | var server = express() 35 | var http = require('http').Server(server) 36 | var io = require('socket.io')(http) 37 | 38 | server.use(express.static('.')) 39 | 40 | io.on('connection', function (socket) { 41 | console.log('a user connected') 42 | }) 43 | 44 | http.listen(3010, function () { 45 | console.log('listening on *:3010') 46 | }) 47 | ``` 48 | 49 | html 50 | ```html 51 | 52 | ``` 53 | 54 | client.js 55 | ```javascript 56 | var socket = io('http://localhost:3010') 57 | socket.on('news', function (data) { 58 | console.log(data) 59 | socket.emit('my other event', { my: 'data' }) 60 | }) 61 | ``` 62 | 63 | 64 | --------------------------------------------------------------------------------