Takashi-tk personnal place

Threejs bookshelf : https://discourse.threejs.org/t/three-js-bookshelf/2468

Twitter

• https://twitter.com/threejs

ES6

• https://stackoverflow.com/questions/37246907/possible-to-merge-or-nest-es6-imports
• https://2ality.com/2017/01/import-operator.html
• https://stackoverflow.com/questions/42341331/es6-promise-all-progress

Applications

• https://github.com/rivafarabi/deckboard
• DroidCam : https://www.dev47apps.com/
• VEDA : https://veda.gl/vedajs/

Libraries

• ThreeJS : https://threejs.org/
• Meshline : https://github.com/spite/THREE.MeshLine
• Blurry : https://tympanus.net/codrops/2019/10/01/simulating-depth-of-field-with-particles-using-the-blurry-library/
• Ashima noise : https://github.com/ashima/webgl-noise/
• THREE Buffer Animation System : https://github.com/zadvorsky/three.bas
• Globe.gl : https://github.com/vasturiano/globe.gl
• Extended Camera Control : https://github.com/yomotsu/camera-controls
• Three UI : https://github.com/felixmariotto/three-mesh-ui
• CustomShaderMaterial : https://github.com/FarazzShaikh/THREE-CustomShaderMaterial
• JS Easing functions : https://github.com/bameyrick/js-easing-functions
• MagicShader : https://github.com/luruke/magicshader
• NoiseJS : https://github.com/josephg/noisejs
• Hexasphere : https://github.com/arscan/hexasphere.js/
• Three Mesh BVH : https://github.com/gkjohnson/three-mesh-bvh
• Three Boilerplate : https://github.com/marcofugaro/threejs-modern-app
• Maf.js : https://github.com/spite/Maf.js/
• Wagner Composer : https://github.com/spite/Wagner
• Asset-loader : https://github.com/ianmcgregor/assets-loader
• InstancedUniformsMesh : https://github.com/protectwise/troika/tree/master/packages/three-instanced-uniforms-mesh
• three-material-editor : https://github.com/RenaudRohlinger/three-material-editor
• GL-bench : https://github.com/munsocket/gl-bench
• Troika (3D Texts) : https://protectwise.github.io/troika/troika-three-text/

Particles

• Partykals : https://github.com/RonenNess/partykals
• Shader Particle Engine : https://squarefeet.github.io/ShaderParticleEngine/
• Three Nebula : https://github.com/creativelifeform/three-nebula

Timeline

• Timeliner : https://github.com/zz85/timeliner
• TimelineJS : https://github.com/vorg/timeline.js
• https://github.com/ievgennaida/animation-timeline-control

Animation

• Storyline.js : https://github.com/spite/Storyline.js
• GSAP : https://greensock.com/gsap/
• Popmotion : https://popmotion.io/pure/

GUI

• Tweakpane : https://cocopon.github.io/tweakpane/monitor.html#graph2d (GitHub : https://github.com/cocopon/tweakpane)
• ControlKit : https://github.com/automat/controlkit.js/
• GUIGUI : https://github.com/superguigui/guigui#dev
• UIL : https://github.com/lo-th/uil
• Three dat.gui : https://github.com/SolalDR/three-dat.gui
• https://github.com/charlieroberts/interface.js

Base : 

• 3D Cube Loop : https://codepen.io/quentinhocde/pen/qEvvba?editors=0010  
• Three.js Basic template (Codepen) : https://codepen.io/_alvin/pen/vlGeB?editors=0010
• Lab City 3D : https://codepen.io/vcomics/pen/aGmoae
• ShapeFile : https://threejs.org/examples/webgl_geometry_extrude_shapes2.html
• GEOJSon : https://observablehq.com/@mbostock/geojson-in-three-js
• GeoJSON in Three.js : https://bl.ocks.org/wboykinm/40c971ef2a46b6b2036c5664242b2e89
• GEOJson Test : https://bl.ocks.org/marcopompili/f5e071ce646c5cf3d600828ace734ce7
• Rendering 100k spheres, instantiating and draw calls: https://velasquezdaniel.com/blog/rendering-100k-spheres-instantianing-and-draw-calls/
• 2 Cameras : https://stackoverflow.com/questions/54973801/use-one-orbitcontrols-with-two-cameras-in-threejs
• Fixed FPS with requestAnimationFrame : http://jsfiddle.net/takashi_tk/vj7fowz0/1/
• Fixed FPS 2 : http://www.realtimerendering.com/erich/udacity/exercises/unit1_fps_demo.html
• Transform to Quad : https://jsfiddle.net/prisoner849/sgaywqf3/

• Merge geometries : https://codepen.io/marquizzo/pen/eYpgBdL?editors=0010

• ThreeJS Annotations : https://manu.ninja/webgl-three-js-annotations/
• Create noisy line sphere : https://pastebin.com/4Q69ygZB

Textures / Materials

• Projected materials : https://github.com/marcofugaro/three-projected-material/blob/master/src/ProjectedMaterial.js
• Texture projection : https://tympanus.net/codrops/2020/01/07/playing-with-texture-projection-in-three-js/

Preloader

• Promise load : https://gist.github.com/zadvorsky/a79787a4703ecc74cab2fdbd05888e9b
• https://jsfiddle.net/vfug1adn/19/

Taking Hires screenshot

• https://discourse.threejs.org/t/what-is-the-alternative-to-take-high-resolution-picture-rather-than-take-canvas-screenshot/3209/8
• https://codepen.io/discoverthreejs/pen/GdQpbd

Effect Composer

• Glitch and RGBShift : https://codepen.io/anandu/pen/ZNWvNK?editors=1010
• How to enable antialiasing while using EffectComposer : https://stackoverflow.com/questions/21050797/how-to-enable-antialiasing-while-using-effectcomposer
• Keep transparancy: https://discourse.threejs.org/t/effect-composer-keep-transparency/4447
• Pass renderer output as input texture to next frame interation : https://discourse.threejs.org/t/pass-renderer-output-as-input-texture-to-next-frame-interation/5021
• Motion blur : https://jsfiddle.net/takashi_tk/d9et0mk4/38/
• Postprocessing background : https://threejs.org/examples/?q=post#webgl_postprocessing_backgrounds
• https://github.com/Jam3/threejs-post-process-example
• Sharpen : https://github.com/robertoranon/int3D/blob/master/18-postprocessing-sharpen.html

Bmfont text  

• Create Text in Three.js with Three-bmfont-text: https://tympanus.net/codrops/2019/10/10/create-text-in-three-js-with-three-bmfont-text/
• https://github.com/Jam3/three-bmfont-text
• Kinetic Typography with Three.js: https://tympanus.net/codrops/2020/06/02/kinetic-typography-with-three-js/
• Converts a .ttf font file: https://github.com/soimy/msdf-bmfont-xml/

Sphere

• Moving point on sphere : https://stackoverflow.com/questions/55225708/moving-point-on-sphere-using-spherical-coordinates-three-js
• Random point on sphere : https://www.codegrepper.com/code-examples/javascript/javascript+random+point+on+unit+sphere
• Simple implementation of a fibonacci sphere in ThreeJS : https://gist.github.com/stephanbogner/a5f50548a06bec723dcb0991dcbb0856
• Uniform random point on sphere : http://extremelearning.com.au/how-to-generate-uniformly-random-points-on-n-spheres-and-n-balls/

Random Gaussian

• https://stackoverflow.com/questions/25582882/javascript-math-random-normal-distribution-gaussian-bell-curve
• https://stackoverflow.com/questions/62291001/how-to-get-a-random-value-from-truncated-normal-distribution-with-mean-and-std-i
• https://observablehq.com/@chrispahm/skew-normal-distributions
• http://jsfiddle.net/takashi_tk/21b709vm/17/

FBO / GPGPU

• FBO Particles : http://barradeau.com/blog/?p=621
• FBO : https://github.com/nicoptere/FBO
• ThreeJS FBO : https://github.com/tuqire/three.js-fbo
• Three FBO Helper : https://github.com/spite/THREE.FBOHelper
• Mr Doob FBO example : https://mrdoob.com/lab/javascript/webgl/particles/particles_zz85.html
• Rendering 100k spheres, instantiating and draw calls : https://velasquezdaniel.com/blog/rendering-100k-spheres-instantianing-and-draw-calls/
• Particle-Curl-Noise : https://github.com/juniorxsound/Particle-Curl-Noise
• Codevember #2 : http://codevember.dorianlods.fr/2/
• Data Texture : https://codepen.io/alexpyzhianov/pen/vNjJWd?editors=0010
• https://qiita.com/uma6661/items/20accc9b5fb9845fc73a
• https://wgld.org/d/webgl2/w015.html
• Point cloud experiment : https://codepen.io/seanseansean/pen/EaBZEY
• ThreeJS GPGPU bird example : https://threejs.org/examples/?q=gpgpu#webgl_gpgpu_birds
• GPU particles : http://www.neveroccurs.com/lab/three.js/gpu_particles/?particles=256
• ThreeJS Particles: Recycling : https://medium.com/@joshmarinacci/threejs-particles-recycling-af20c56bb041
• Draw 100,000 points with regl : https://bl.ocks.org/pbeshai/28c7f3acdde4ca5a13854f06c5d7e334
• Transitioning vertices between 3D models with three.js : https://stackoverflow.com/questions/44443286/transitioning-vertices-between-3d-models-with-three-js
• Interactive Particles with Three.js : https://github.com/brunoimbrizi/interactive-particles

Shaders

• ThreeJS Shaderlib : https://ycw.github.io/three-shaderlib-skim/#basic

• Experiments for digital #inktober 2020: https://github.com/spite/sketch
• Shader - Calculate depth relative to Object: https://stackoverflow.com/questions/26328666/shader-calculate-depth-relative-to-object
• Depth as distance to camera plane in GLSL: https://stackoverflow.com/questions/16131963/depth-as-distance-to-camera-plane-in-glsl
• Shader spline : https://callumprentice.github.io/apps/shader_spline/index.html
• Converting Shaders from ShaderToy : https://hackernoon.com/converting-shaders-from-shadertoy-to-threejs-fe17480ed5c6
• Simple shader : https://iwearshorts.com/blog/simple-shader-with-threejs/
• Vertex displacement with a noise function using GLSL and three.js: https://www.clicktorelease.com/blog/vertex-displacement-noise-3d-webgl-glsl-three-js/
• OnBeforeCompile : https://stackoverflow.com/questions/58494669/pass-in-a-vector-onbefore compile-three-js
• Chainable onBeforeCompile: https://github.com/Fyrestar/Material-Plugins
• Moiré shader: https://codepen.io/MikeMcChillin/pen/RoGrJv?editors=0010
• ShaderToy - Fire shader : https://greentec.github.io/shadertoy-fire-shader-en/
• OnBeforeCompile : https://codepen.io/prisoner849/pen/BvxBPW?editors=0010
• Experiments with Perlin noise : https://www.clicktorelease.com/blog/experiments-with-perlin-noise/
• https://www.mapzen.com/blog/behind-the-scenes-tron2/
• Stripes Shader : https://andreashackel.de/tech-art/stripes-shader-2/
• Twisted Torus & Sphere : https://codepen.io/mnmxmx/pen/BdjdMz
• Matrix : https://2pha.com/demos/threejs/shaders/matrix.html
• Magma Shader : https://codepen.io/eroxburgh/pen/XWjapqj?editors=1010
• Painted FBM w controls : https://codepen.io/deadlocked247/pen/ExjGmXd?editors=0010
• https://adinunz.io/interstellar/
• Noisy Blob : https://codepen.io/dev_loop/pen/NWNMYvv?editors=1010
• Shader Template: https://codepen.io/jhnsnc/pen/wWwprB?editors=1010
• Fresnel : https://codepen.io/Fyrestar/pen/RzVLYd?editors=0010
• Neon Love : https://codepen.io/al-ro/pen/BaaBage?editors=0010
• Building a Custom Shader with GLSLify : https://blog.gskinner.com/archives/2019/01/custom-shader-glslify.html
• Voronoy portal : http://xdpixel.com/category/noise/page/5/
• https://github.com/keijiro/ShaderSketches/blob/master/Fragment/Coaxial.glsl
• https://threejsfundamentals.org/threejs/lessons/threejs-shadertoy.html

Post-processing

• Retro shaders in GLSL : https://clemz.io/article-retro-shaders-webgl.html
• Cheap blur : https://codesandbox.io/s/r3f-cheap-blur-znzl3?file=/src/index.js
• Bad TV : https://github.com/felixturner/bad-tv-shader
• Glitch and RGBShift : https://codepen.io/anandu/pen/ZNWvNK?editors=0010

ShaderToy

• Glitches : https://www.shadertoy.com/view/XtK3W3
• Distorted TV : https://www.shadertoy.com/view/ldXGW4
• Barrel Blur : https://www.shadertoy.com/view/XslGz8
• Fourier Gabor Noise : https://www.shadertoy.com/view/4dGGz1
• Retro Wave Green Screen : https://www.shadertoy.com/view/tsV3z3
• VHS noise : https://www.shadertoy.com/view/tsX3RN
• Screenshake : https://www.shadertoy.com/view/wsBXWW
• Grid : https://www.shadertoy.com/view/wdSXzm
• Hammer grid : https://www.shadertoy.com/view/ld23Dm
• Shifting ring : https://www.shadertoy.com/view/lsVSDc
• Night vision : https://www.shadertoy.com/view/Xsl3zf
• Grid : https://www.shadertoy.com/view/WlsyR2
• Sigmoid contrast : https://www.shadertoy.com/view/MtX3z2
• Demo : https://www.shadertoy.com/view/4dBcDK
• Hypnoferromagnetism: https://www.shadertoy.com/view/wdSXzK
• Shipped HUD : https://www.shadertoy.com/view/tsycWW
• Cyber Iris : https://www.shadertoy.com/view/WsScDK

GLSL Sandbox

• http://glslsandbox.com/e#53208.0
• http://glslsandbox.com/e#53340.0

Particles

• Three.js Particle Test : https://codepen.io/enesser/pen/jdenE?editors=0010
• Particle Shape Tween : https://airtightinteractive.com/demos/js/hello/
• Interactive Particles with Three.js : https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/
• Particle vortex : https://jsfiddle.net/eso3x0ox/13/
• Points cloud : https://codepen.io/seanseansean/pen/EaBZEY?editors=0010
• 3D particles exploration : https://tympanus.net/codrops/2017/12/12/3d-particle-explorations/

Vector field

• https://github.com/mjkaufer/3DVectorFields
• https://github.com/dmnsgn/vector-field
• https://github.com/rohanp/vectorfield
• http://www.marky.pl/vector-field/
• https://wow.techbrood.com/fiddle/36151

CURL Noise

• https://codepen.io/timseverien/pen/EmJNOR
• https://qiita.com/nyamadandan/items/2a8bc7a3639e7b5ce9c9
• https://codepen.io/mnmxmx/pen/rzqoeW
• https://github.com/prc5/Curl-Noise-Particles-Flow

• https://al-ro.github.io/projects/embers/

• ThreeJS nice background : https://jsfiddle.net/prisoner849/311z5ceo/
• CSS Gradient Background : https://codepen.io/P1N2O/pen/pyBNzX
• CSS Gradient Background : https://codepen.io/tr13ze/pen/pbjWwg
• 3d Globe : https://medium.com/coderbunker/hello-3d-world-bf3b79d9f89e
• Animated MeshLines : https://tympanus.net/codrops/2019/01/08/animated-mesh-lines/
• ThreeJS / 30 demos : https://mattdesl.svbtle.com/codevember
• Webmidi + ThreeJS : https://github.com/violetforest/webmidi-threejs

Examples

• CODROPS : https://tympanus.net/codrops/tag/three-js/

Portfolio

• https://stemkoski.github.io/Three.js/
• https://github.com/ykob/sketch-threejs
• https://alteredqualia.com/
• https://callumprentice.github.io/
• https://mrdoob.com/#/158/threejs_sketches
• https://github.com/gkjohnson/threejs-sandbox
• http://www.hellochar.com/
• yiwenl : https://github.com/yiwenl/Sketches / http://yiwenl.github.io/Sketches/
• Charlie Hoey : https://charliehoey.com/

Codevember / DIGITAL INKTOBER

• Codevember 2016 : https://www.clicktorelease.com/code/codevember-2016/
  • Triangle tunnel : https://www.clicktorelease.com/code/codevember-2016/30/
• Codevember 2017 : https://www.clicktorelease.com/code/codevember-2017/
• Codevember 2019 : https://github.com/KessonDalef/Codevember_2019
• DIGITAL INKTOBER 2020 : https://spite.github.io/sketch/

Good examples

• Baubles : https://spite.github.io/baubles/
• Ferrofluid : https://www.clicktorelease.com/tmp/number/ferrofluid/
• Glossy Sphere : https://medium.com/@soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857
• Perlin noise : https://codepen.io/vcomics/pen/djqNrm?editors=1010
• Mesh Deformation Study with a Sphere : https://medium.com/@qinzitan/mesh-deformation-study-with-a-sphere-ceee37d47e32
• EMSX GUI : https://www.airtightinteractive.com/demos/js/emsx/
• Supershape : http://supershape.ahoi.in/
• Create a Wave Motion Effect on an Image with Three.js: https://tympanus.net/codrops/2020/03/17/create-a-wave-motion-effect-on-an-image-with-three-js/
• Particle Love : https://particle-love.com/
• Volumetric Light Scattering in three.js : https://codepen.io/abberg/pen/pbWkjg?editors=0010 / https://medium.com/@andrew_b_berg/volumetric-light-scattering-in-three-js-6e1850680a41
• https://github.com/arscan/encom-globe
• Converting Shaders from Shadertoy to ThreeJS : https://hackernoon.com/converting-shaders-from-shadertoy-to-threejs-fe17480ed5c6
• Simulating Depth of Field with Particles using the Blurry Library : https://tympanus.net/codrops/2019/10/01/simulating-depth-of-field-with-particles-using-the-blurry-library/   
• GLSL Glitch in ThreeJS : https://codepen.io/ykob/pen/GmEzoQ?editors=0010
• https://www.codeseek.co/Samsy
• stemkoski ThreeJS examples : http://stemkoski.github.io/Three.js/index.html#shader-explorer
• Simplex Flower generator : https://codepen.io/jackrugile/pen/LeJowx?editors=0010
• Three.js - How to apply shader effect around mouse area?: https://stackoverflow.com/questions/48487398/three-js-how-to-apply-shader-effect-around-mouse-area
• https://www.lostconversation.com/interactive/
• http://inmosystems.com/blog/surrogate-rings-webgl-three-js
• High-speed Light Trails in Three.js: https://tympanus.net/codrops/2019/11/13/high-speed-light-trails-in-three-js/
• Spherical Helix : https://codepen.io/discoverthreejs/pen/GdQpbd?editors=0010
• https://www.webdesignertrends.com/2018/09/webgl-three-js/
• https://github.com/mnmxmx
• https://github.com/TheCodeTherapy/plexus-shaders
• https://codepen.io/agalliat/pen/vYGXJxQ?editors=0010
• Celestial body : https://github.com/TheoGil/celestial-bodies
• https://codepen.io/FabienMotte/pen/dYqYzw
• Drawing curves on WebGL Globe using THREE.js and D3 : https://medium.com/@xiaoyangzhao/drawing-curves-on-webgl-globe-using-three-js-and-d3-draft-7e782ffd7ab
• Nucleus : https://codepen.io/Mamboleoo/pen/Bppdda?editors=0010
• 3D particles exploration : https://github.com/jackrugile/3d-particle-explorations
• https://tympanus.net/codrops/2020/12/17/recreating-a-dave-whyte-animation-in-react-three-fiber/
• https://damienmortini.github.io/generalelectric-ib2020-webgl/
• Animated meshline : https://tympanus.net/codrops/2019/01/08/animated-mesh-lines/
• http://www.smartjava.org/content/html5-render-urban-population-growth-3d-world-globe-threejs-and-canvas/
• Mouse trail with OGL : https://tympanus.net/codrops/2019/09/24/crafting-stylised-mouse-trails-with-ogl/
• https://tympanus.net/codrops/2019/11/13/high-speed-light-trails-in-three-js/
• Audiograph : https://mattdesl.svbtle.com/audiograph
• Points globe : https://stripe.com/blog/globe
• Life of cube : https://github.com/TomHsiao1260/life-of-cube
• 3D Camera Wobble : https://github.com/pschroen/alien.js/blob/master/examples/3d_camera_wobble.html
• Iguacel Exp 28 : https://iguacel.github.io/iguacel/#/exp/28 / https://github.com/iguacel/iguacel/blob/master/src/exp/Exp28.js
• cru.ci.form : https://www.clicktorelease.com/blog/making-of-cruciform/
• Twisted Colorful Spheres with Three.js : https://tympanus.net/codrops/2021/01/26/twisted-colorful-spheres-with-three-js/
• https://codepen.io/ma_suwa/pen/gOgZbwR?editors=0010
• https://codepen.io/ma_suwa/pen/eYBMWYe?editors=1010

Inspirations

• https://www.thisiscolossal.com/2018/04/animation-of-sinusoidal-waves-in-gifs-by-etienne-jacob/
• https://i.pinimg.com/originals/14/5a/7e/145a7e65652177e6410b1948bfa47005.gif
• https://gifer.com/en/3va2
• https://giphy.com/gifs/26BRzDIHfU6ItGtRS/html5

• https://giphy.com/gifs/loop-dark-after-effects-26gsuUjoEBmLrNBxC

• https://www.behance.net/nicolaslopardo
• https://www.behance.net/gallery/72889599/Yanobox-Nodes-3-plugin-for-After-Effects
• http://www.pedroramos.co.uk/#/lab-ui/
• https://collektor.tumblr.com/image/630578707927547904
• https://a-na5.tumblr.com/post/630946505418817536/20200209-code-i-could-tweet

Font

• Datalegreya : https://github.com/figs-lab/datalegreya
• Atkinson Hyperlegible Font : https://brailleinstitute.org/freefont

---

• https://wow.techbrood.com/fiddle/44531
• https://tympanus.net/codrops/tag/three-js/
• https://twitter.com/Domenico_brz/status/1140442564690157568
• https://www.fdile.com/project/generative-art/
• https://www.fdile.com/project/generative-art/
• https://github.com/mattdesl/workshop-generative-art
• https://inconvergent.net/2019/depth-of-field/#footnotes
• https://github.com/ykob/sketch-threejs
• Bad TV shader for ThreeJS : http://felixturner.github.io/bad-tv-shader/
• https://blog.jonivesto.com/three-js-draw-a-circle/
• ThreeJS examples : https://uicookies.com/threejs-examples/
• https://medium.com/@xiaoyangzhao/drawing-curves-on-webgl-globe-using-three-js-and-d3-draft-7e782ffd7ab
• https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_convex.html
• https://redstapler.co/threejs-realistic-light-shadow-tutorial/
• https://www.clicktorelease.com/blog/experiments-with-perlin-noise/
• https://medium.com/creative-coding-space/up-and-running-in-three-js-9e53ffe8ecef
• https://www.jotform.com/blog/20-exceptional-three-js-experiments-98740/
• Rick And Morty Portal Shader : https://codepen.io/pizza3/pen/JjKjbZY 
• https://zalo.github.io/
• https://github.com/yagiz/Andromeda
• https://github.com/nudibranchrecords/hedron
• three.js Points anti-gravity is applied ver2 : https://codepen.io/ykob/pen/avEpdd?editors=1010
• Perlin cube : https://codesandbox.io/s/perlin-cubes-forked-w9myx?file=/src/App.js
• Fireball : https://ykob.github.io/sketch-threejs/sketch/fire_ball_2.html

This site is open source. Improve this page.