WebAssembly - pseudo-tutorial (not very in depth) Indigo Code 2017-04-17 | Companion to https://youtu.be/1J6Z5wBfSnQ, where I go over more details on how to get started with WebAssembly. This is not as in-depth a tutorial as I normally give on this channel, because the build tools are still too new for me to feel comfortable committing to a real tutorial :-)Good skeletal animation tutorial: https://www.youtube.com/playlist?list=PLRIWtICgwaX2tKWCxdeB7Wv_rTET9JtWWSource code: https://github.com/sessamekesh/wasm-3d-animation-demoLive demo: http://aws-website-webassemblyskeletalanimation-ffaza.s3-website-us-east-1.amazonaws.com/
AMA & 3D Web Game Tutorial Progress Indigo Code 2017-06-07 | I post videos so infrequently, I figured I'd put up a stream where I work on my next tutorial series! This also gives me the opportunity to have some real-time communication with my viewers, so feel free to ask me questions, or give feedback that you don't want to leave in the public comments.The project is currently called "Hoops," and it is a 3D web game where you try to bounce ping-pong balls around obstacles and land them in a basket at the end of the level.
WebAssembly overview - Its cool, its really fast. Indigo Code 2017-04-17 | What is WebAssembly, why might you want to use it, what's it like programming using it, what kind of difference does it make on a web app?Also see: https://www.lucidchart.com/techblog/2017/05/16/webassembly-overview-so-fast-so-fun-sorta-difficult/I explain the tools and code more here: https://youtu.be/XNkylRaJxjMSource code: https://github.com/sessamekesh/wasm-3d-animation-demoLive demo: http://aws-website-webassemblyskeletalanimation-ffaza.s3-website-us-east-1.amazonaws.com/Assets: https://www.mixamo.com/Outro music: TheFatRat - Monody (feat. Laura Brehm) https://www.youtube.com/watch?v=B7xai5u_tnk^ This artist is pretty much my main jam when I work on stuff, great music. Check him out.
Using Assimp in C++ - INTRO Visual Studio setup Indigo Code 2016-10-31 | ASSIMP is a C++ library that allows you to load 3D models from a variety of file formats (fbx, dae, obj, blend...) This video is about setting it up with Visual Studio, and I also briefly talk about what it is. Feel free to skip this one, it's all setup and overhead :-) I do not cover the API or using the code at all
Using Assimp in C++ - Basic Loading (geometry and materials) Indigo Code 2016-10-31 | ASSIMP is a C++ library that allows you to load 3D models from a file (fbs, dae, obj, blend...) This video covers the code needed to pull in the geometry of a model (vertices and indices) as well as any solid color materials associated with the model.Source code: https://github.com/sessamekesh/assimp-examplesI'm planning on doing more videos in this series (as of October 30, 2016), when I'm finished with the series I'll make a ZIP which will include the DLL and LIB files needed to run the samples. In the meantime, see the first video in this series for how to set it up - I know that's stupid annoying, but I don't want to make and permalink a ZIP file until I'm done with the series.This tutorial does not cover loading textures, animation, or construction of a full scene from a file. The intention of this video is to get you up and going with Assimp as quickly as possible.---------------------------------------------------------------------------------Music Provided by NoCopyrightSounds:The Eden Project - Chasing Ghosts https://www.youtube.com/watch?v=xvDTAHJy3r4 (https://www.facebook.com/iameden)Phantom Sage - MIKO https://www.youtube.com/watch?v=7t8lRdpv5IQ (https://www.facebook.com/thefantomofficial)
WebGL Shadow Mapping Tutorial - 3 - Using 32-bit floats Indigo Code 2016-03-02 | In this three-part video series, I explain how shadow mapping can be implemented in WebGL. Similar concepts may be easily applied to OpenGL programming in general, and an experienced DirectX programmer can probably learn how to use shadow mapping from these videos as well.In this video, I modify the scene in the last created video to include shadows cast on every object in the scene.Starter code: http://www.kamaron.me/tutorial-live/webgl/shadow-mapping/Video2.zipFinished code: http://www.kamaron.me/tutorial-live/webgl/shadow-mapping/Video3.zipA live demo of this tutorial is available here: http://www.kamaron.me/tutorial-live/webgl/shadow-mapping/Video3/?texSize=1024(Change the texSize= to 512, 256, 128 to improve performance or 2048 to improve quality)Finished Tutorial Source: https://github.com/sessamekesh/IndigoCS-webgl-tutorialsglMatrix download: http://glmatrix.net/async download: https://github.com/caolan/async
WebGL Shadow Mapping Tutorial - 2 - Implement Shadow Mapping Indigo Code 2016-03-02 | In this three-part video series, I explain how shadow mapping can be implemented in WebGL. Similar concepts may be easily applied to OpenGL programming in general, and an experienced DirectX programmer can probably learn how to use shadow mapping from these videos as well.In this video, I modify the scene in the last created video to include shadows cast on every object in the scene.Starter code: http://www.kamaron.me/tutorial-live/webgl/shadow-mapping/Video1.zipCode as of end of this video: http://www.kamaron.me/tutorial-live/webgl/shadow-mapping/Video2.zipA live demo of this tutorial is available here: http://www.kamaron.me/tutorial-live/webgl/shadow-mapping/Video2/?texSize=1024(Change the texSize= to 512, 256, 128 to improve performance or 2048 to improve quality)Finished Tutorial Source: https://github.com/sessamekesh/IndigoCS-webgl-tutorialsglMatrix download: http://glmatrix.net/async download: https://github.com/caolan/async
WebGL Shadow Mapping Tutorial - 1 - Set Up a Scene Indigo Code 2016-03-02 | In this three-part video series, I explain how shadow mapping can be implemented in WebGL. Similar concepts may be easily applied to OpenGL programming in general, and an experienced DirectX programmer can probably learn how to use shadow mapping from these videos as well.In this video, I only create a room scene, with a few static objects and one animated object.A live demo of this tutorial is available here: http://www.kamaron.me/tutorial-live/webgl/shadow-mapping/Video1/?texSize=1024Source code as of end of this video: http://www.kamaron.me/tutorial-live/webgl/shadow-mapping/Video1.zip(Change the texSize= to 512, 256, 128 to improve performance or 2048 to improve quality)Finished Tutorial Source: https://github.com/sessamekesh/IndigoCS-webgl-tutorialsglMatrix download: http://glmatrix.net/async download: https://github.com/caolan/async
WebGL - Creating an Interactive Mandelbrot Explorer (1 of 3) Indigo Code 2016-02-20 | In this video mini-series, I use a GLSL fragment shader to generate a rendering of the Mandelbrot set.A live demo is available at http://www.kamaron.me/tutorial-live/webgl/fragshader-mandelbrot/In this video, I set up a blank canvas that fills the entire viewable window, and adjusts its size as the window is resized.Mandelbrot Set Information: https://en.wikipedia.org/wiki/Mandelbrot_setC++ Mandelbrot still image tutorial: https://www.youtube.com/watch?v=entjSp3LIfQTutorial Code: https://github.com/sessamekesh/IndigoCS-webgl-tutorials
WebGL - Creating an Interactive Mandelbrot Explorer (2 of 3) Indigo Code 2016-02-20 | In this video mini-series, I use a GLSL fragment shader to generate a rendering of the Mandelbrot set.A live demo is available at http://www.kamaron.me/tutorial-live/webgl/fragshader-mandelbrot/In this video, I write the OpenGL fragment shader to draw a Mandelbrot image.Mandelbrot Set Information: https://en.wikipedia.org/wiki/Mandelbrot_setC++ Mandelbrot still image tutorial: https://www.youtube.com/watch?v=entjSp3LIfQTutorial Code: https://github.com/sessamekesh/IndigoCS-webgl-tutorials
WebGL - Creating an Interactive Mandelbrot Explorer (3 of 3) Indigo Code 2016-02-20 | In this video mini-series, I use a GLSL fragment shader to generate a rendering of the Mandelbrot set.A live demo is available at http://www.kamaron.me/tutorial-live/webgl/fragshader-mandelbrot/In this concluding video, I write methods to allow the user to click and drag to pan the image, or use the mouse wheel to scroll in and out of the image.Mandelbrot Set Information: https://en.wikipedia.org/wiki/Mandelbrot_setC++ Mandelbrot still image tutorial: https://www.youtube.com/watch?v=entjSp3LIfQTutorial Code: https://github.com/sessamekesh/IndigoCS-webgl-tutorials
WebGL Tutorial 05 - Phong Lighting Indigo Code 2016-02-04 | In this video, I apply simple Phong lighting to the scene I created earlier. I don't use any specular lighting, I only use one light source and it's a simple directional light, but it gets the concept across. I may cover more involved lighting later, but this at least covers the theory.A live demo is available at http://www.kamaron.me/tutorial-live/webgl/05-phong-lighting-intro/In this series, I will not be using any external libraries like Three.JS. These tutorials are intended for people comfortable (but not necessarily experienced) with JavaScript and HTML, with or without any prior graphics programming experience. Ideally, I would like anybody watching my full tutorial set to be able to create a 3D video game from scratch using WebGL.Wikipedia page on Phong lighting: https://en.wikipedia.org/wiki/Phong_reflection_modelPage with widget on dot (scalar) products of vectors: http://mathinsight.org/dot_productSource code available at https://github.com/sessamekesh/IndigoCS-webgl-tutorials/tree/432a3a36a30a9b3e6ca74373b955f771fbedd36a(Repository contains code for all these tutorials - the ones that don't directly build off each other as commits are handled as separate branches)Good asynchronous JavaScript library (for solving callback hell): https://github.com/caolan/asyncAssimp2Json: https://github.com/acgessler/assimp2jsonglMatrix library used for math: http://glmatrix.net/Other fantastic WebGL resources:http://antongerdelan.net/opengl/webgl_starter.htmlhttp://webglfundamentals.org/https://www.chromeexperiments.com/webglhttps://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorialhttps://msdn.microsoft.com/en-us/library/dn302341(v=vs.85).aspx
WebGL Tutorial 04 - Loading External Meshes and Shaders Indigo Code 2016-01-29 | In this video, I demonstrate how to add load resources from external files over the network. I replace the shaders written in previous tutorials with ones in their own files, and load a complicated mesh from a file.A live demo is available at http://www.kamaron.me/tutorial-live/webgl/04-loading-external-files/In this series, I will not be using any external libraries like Three.JS. These tutorials are intended for people comfortable (but not necessarily experienced) with JavaScript and HTML, with or without any prior graphics programming experience. Ideally, I would like anybody watching my full tutorial set to be able to create a 3D video game from scratch using WebGL.Source code available at https://github.com/sessamekesh/IndigoCS-webgl-tutorials/tree/8194fa6fbfb44abac0cef9aaa96f906b8a34c9ef(Repository contains code for all these tutorials - the ones that don't directly build off each other as commits are handled as separate branches)Good asynchronous JavaScript library (for solving callback hell): https://github.com/caolan/asyncAssimp2Json: https://github.com/acgessler/assimp2jsonglMatrix library used for math: http://glmatrix.net/Other fantastic WebGL resources:http://antongerdelan.net/opengl/webgl...http://webglfundamentals.org/https://www.chromeexperiments.com/webglhttps://developer.mozilla.org/en-US/d...https://msdn.microsoft.com/en-us/libr...
WebGL Tutorial 03 - Textured Cube Indigo Code 2016-01-27 | In this video, I demonstrate how to add textures to WebGL renderings by creating a spinning crate.A live demo is available at http://www.kamaron.me/tutorial-live/webgl/03-textured-cube/In this series, I will not be using any external libraries like Three.JS. These tutorials are intended for people comfortable (but not necessarily experienced) with JavaScript and HTML, with or without any prior graphics programming experience. Ideally, I would like anybody watching my full tutorial set to be able to create a 3D video game from scratch using WebGL.OpenGL texture coordinates: http://stackoverflow.com/a/5532670/2589028Applying textures to objects (OpenGL): https://open.gl/texturesSource code available at https://github.com/sessamekesh/IndigoCS-webgl-tutorials/tree/master/03%20-%20Textured%20CubeglMatrix library used for math: http://glmatrix.net/Other fantastic WebGL resources:http://antongerdelan.net/opengl/webgl_starter.htmlhttp://webglfundamentals.org/https://www.chromeexperiments.com/webglhttps://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorialhttps://msdn.microsoft.com/en-us/library/dn302341(v=vs.85).aspx
WebGL Tutorial 02 - Rotating 3D Cube Indigo Code 2016-01-19 | In this video, I explain the theory behind expressing 3D scenes in 2D spaces (such as your screen), and how to program with that in consideration with WebGL. I imagine this is closer to what you want to do with WebGL.A live demo is available at http://www.kamaron.me/tutorial-live/webgl/02-rotating-cube/In this series, I will not be using any external libraries like Three.JS. These tutorials are intended for people comfortable (but not necessarily experienced) with JavaScript and HTML, with or without any prior graphics programming experience. Ideally, I would like anybody watching my full tutorial set to be able to create a 3D video game from scratch using WebGL.Source code available at https://github.com/sessamekesh/IndigoCS-webgl-tutorials/tree/master/02%20-%20Rotating%20CubeglMatrix library used for math: http://glmatrix.net/Other fantastic WebGL resources:http://antongerdelan.net/opengl/webgl_starter.htmlhttp://webglfundamentals.org/https://www.chromeexperiments.com/webglhttps://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorialhttps://msdn.microsoft.com/en-us/library/dn302341(v=vs.85).aspx
WebGL Tutorial 01 - Setup and Triangle Indigo Code 2016-01-18 | WebGL is a powerful tool for adding graphics to your client side web application. In this video, I explain the basics of how WebGL works, and guide you through writing the code to display a triangle on the screen.A live demo of the result of this tutorial is available at http://www.kamaron.me/tutorial-live/webgl/01-simple-triangle/In this series, I will not be using any external libraries like Three.JS. These tutorials are intended for people comfortable (but not necessarily experienced) with JavaScript and HTML, with or without any prior graphics programming experience. Ideally, I would like anybody watching my full tutorial set to be able to create a 3D video game from scratch using WebGL.Source code available at https://github.com/sessamekesh/IndigoCS-webgl-tutorials/tree/master/01%20-%20Simple%20TriangleDiagram in video: https://www.lucidchart.com/documents/view/eba35393-4569-4651-89db-d3f5689667bf/0Other fantastic WebGL resources:http://antongerdelan.net/opengl/webgl_starter.htmlhttp://webglfundamentals.org/https://www.chromeexperiments.com/webglhttps://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorialhttps://msdn.microsoft.com/en-us/library/dn302341(v=vs.85).aspx
C++ Buddhabrot Tutorial Indigo Code 2015-12-11 | This tutorial covers how to generate an image representation of the Buddhabrot fractal using C++ 11. The image uses the PPM file format. Important moments and links to source in description.Introduction: 0:00Coding begins: 4:27Main created: 13:01Actual generation code starts: 20:35PPM output: 47:45First image generation: 51:38Description of Buddhabrot: https://en.wikipedia.org/wiki/BuddhabrotPPM file format: http://netpbm.sourceforge.net/doc/ppm.htmlGIMP (for viewing PPMs): http://www.gimp.org/Source code: https://github.com/sessamekesh/IndigoCS_Buddhabrot
Coding the Mandelbrot - C++ Tutorial Indigo Code 2014-11-01 | In this video, I create a C++ program from scratch that will generate Mandelbrot images, and walk the viewer through the process. I move really fast, assuming that you know about complex numbers, the basics of the Mandelbrot set, and the basics of C++ functions, while loops and file I/O.Links:PPM file specification - http://netpbm.sourceforge.net/doc/ppm.htmlWikipedia on the Mandelbrot set - http://en.wikipedia.org/wiki/Mandelbrot_setGIMP - http://www.gimp.org/
