Devkor WebGL/Graphics Study

Day 1: OT & Graphics Pipeline

Day 2: Shader & glsl

• https://devkor-team.github.io/webgl_study/study_day2/shader_index.html

Day 3: Intro to Threejs

• https://devkor-team.github.io/webgl_study/study_day3/threejs_index.html

Day 4: Texture, Light, Camera Control & GLTF

• https://devkor-team.github.io/webgl_study/study_day4/texture_and_light/threejs_index.html

• https://devkor-team.github.io/webgl_study/study_day4/camera_control/threejs_index.html

• https://devkor-team.github.io/webgl_study/study_day4/gltf/threejs_index.html

Day 5: Particles, Raycasts & Physics

• https://devkor-team.github.io/webgl_study/study_day5/particle/threejs_index.html

• https://devkor-team.github.io/webgl_study/study_day5/physics/threejs_index.html

• https://devkor-team.github.io/webgl_study/study_day5/raycaster/threejs_index.html

Generic Graphics (+ OpenGL/WebGL) Materials

Mozilla WebGL : https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

WebGL Fundamentals : https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html

Intro To OpenGL : https://duriansoftware.com/joe/an-intro-to-modern-opengl.-table-of-contents

VertexShaderArt : https://www.vertexshaderart.com/

glTF formats : https://github.com/KhronosGroup/glTF-Tutorials

TU Wien Rendering course by 2 minute papers: https://www.youtube.com/playlist?list=PLujxSBD-JXgnGmsn7gEyN28P1DnRZG7qi

TU Computer Graphics Channel : https://www.youtube.com/channel/UCS9CFdjdEcq_NhaSFb_P-yA/featured

Cem Yuksel's Graphics Course (University of Utah) : https://www.youtube.com/watch?v=vLSphLtKQ0o&list=PLplnkTzzqsZTfYh4UbhLGpI5kGd5oW_Hh&index=1

Shader tutorials : https://thebookofshaders.com/

Stanford Graphics materials : https://stanford.edu/class/ee267/lectures/lecture1.pdf

The Cherno's intro on OpenGL : https://www.youtube.com/watch?v=W3gAzLwfIP0&list=PLlrATfBNZ98foTJPJ_Ev03o2oq3-GGOS2&index=1

Pixi.js Materials

Tutorial : Image Gallery: https://css-tricks.com/building-an-images-gallery-using-pixijs-and-webgl/

Pixi.js without react-pixi-fiber : https://www.devauthority.com/react/using-pixi-js-with-react-functional-components-hooks/

using react-pixi-fiber : https://medium.com/@mikkanthrope/react-with-pixijs-c8fc4c50facd

Using buffers in shaders : https://www.html5gamedevs.com/topic/44397-filter-buffer/

fluid effect : https://codepen.io/boxabrain/pen/gObrZyQ

Learing pixi : https://github.com/kittykatattack/learningPixi

Good Examples:

• https://studio-dot.fr/
• https://bornfight.github.io/pixi.js-playground/
• https://www.salvatorecasalino.it/interactive-resume/
• https://www.family.ikea.es/25aniv-demo-version/hub/
• https://wetransfer.com/ideas-report/2021/intro
• https://phage-lab.com/
• https://www.awwwards.com/websites/pixijs/?ads=1&page=1

Threejs Materials

Scrolling with nice 3d windows : https://www.youtube.com/watch?v=U29j5NiSMVQ

Threejs Journey by Bruno Simon : https://threejs-journey.com/

Detailed threejs by Discover threejs : https://discoverthreejs.com/

Threejs Bookshelf / Various materials on threejs, by community : https://discourse.threejs.org/t/three-js-bookshelf/2468

Bokoko33's Landing Page Remake Tutorial : https://www.youtube.com/watch?v=rxTb9ys834w

Good Examples:

• https://www.hkdi.edu.hk/dreamfactory/index.html
• https://2019.makemepulse.com/
• https://bokoko33.me/
• https://henryheffernan.com/