[{"data":1,"prerenderedAt":357},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fshaders":266,"\u002Fblog\u002Fshaders-surround":350},[4],{"title":5,"path":6,"stem":7,"children":8,"page":265},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261],{"title":10,"path":11,"stem":12},"2020 - The best Javascript Frameworks","\u002Fblog\u002F2020-the-best-javascript-frameworks","blog\u002F2020 - The best Javascript Frameworks",{"title":14,"path":15,"stem":16},"5 Essential Reasons for E2E Testing","\u002Fblog\u002F5-essential-reasons-for-e2e-testing","blog\u002F5 Essential Reasons for E2E Testing",{"title":18,"path":19,"stem":20},"5 Mistakes Front-end Developers should Avoid","\u002Fblog\u002F5-mistakes-front-end-developers-should-avoid","blog\u002F5 Mistakes Front-end Developers should Avoid",{"title":22,"path":23,"stem":24},"5 Things to motivate you to perform Unit Testing","\u002Fblog\u002F5-things-to-motivate-you-to-perform-unit-testing","blog\u002F5 Things to motivate you to perform Unit Testing",{"title":26,"path":27,"stem":28},"52 Articles, 7 Books and a Pandemic","\u002Fblog\u002F52-articles-7-books-and-a-pandemic","blog\u002F52 Articles, 7 Books and a Pandemic",{"title":30,"path":31,"stem":32},"6 Levels of Autonomous Vehicles","\u002Fblog\u002F6-levels-of-autonomous-vehicles","blog\u002F6 Levels of Autonomous Vehicles",{"title":34,"path":35,"stem":36},"ADAS","\u002Fblog\u002Fadas","blog\u002FADAS",{"title":38,"path":39,"stem":40},"Ambient Intelligence","\u002Fblog\u002Fambient-intelligence","blog\u002FAmbient Intelligence",{"title":42,"path":43,"stem":44},"Best 5 Hybrid Mobile App Development Frameworks","\u002Fblog\u002Fbest-5-hybrid-mobile-app-development-frameworks","blog\u002FBest 5 Hybrid Mobile App Development Frameworks",{"title":46,"path":47,"stem":48},"Blockchains - How and Why?","\u002Fblog\u002Fblockchains-how-and-why","blog\u002FBlockchains - How and Why",{"title":50,"path":51,"stem":52},"Brain Computer Interfaces","\u002Fblog\u002Fbrain-computer-interfaces","blog\u002FBrain Computer Interfaces",{"title":54,"path":55,"stem":56},"Computational Fluid Dynamics","\u002Fblog\u002Fcomputational-fluid-dynamics","blog\u002FComputational Fluid Dynamics",{"title":58,"path":59,"stem":60},"Computer Vision","\u002Fblog\u002Fcomputer-vision","blog\u002FComputer Vision",{"title":62,"path":63,"stem":64},"Cryptography","\u002Fblog\u002Fcryptography","blog\u002FCryptography",{"title":66,"path":67,"stem":68},"Design Patterns - Why and How?","\u002Fblog\u002Fdesign-patterns-why-and-how","blog\u002FDesign Patterns - Why and How",{"title":70,"path":71,"stem":72},"Edge Computing","\u002Fblog\u002Fedge-computing","blog\u002FEdge Computing",{"title":74,"path":75,"stem":76},"Embracing Decentralized Development","\u002Fblog\u002Fembracing-decentralized-development","blog\u002FEmbracing Decentralized Development",{"title":78,"path":79,"stem":80},"Extended Reality Simplified","\u002Fblog\u002Fextended-reality-simplified","blog\u002FExtended Reality Simplified",{"title":82,"path":83,"stem":84},"Good practices for Git","\u002Fblog\u002Fgood-practices-for-git","blog\u002FGood practices for Git",{"title":86,"path":87,"stem":88},"How do browsers work","\u002Fblog\u002Fhow-do-browsers-work","blog\u002FHow do browsers work",{"title":90,"path":91,"stem":92},"How to be a Full Stack Engineer","\u002Fblog\u002Fhow-to-be-a-full-stack-engineer","blog\u002FHow to be a Full Stack Engineer",{"title":94,"path":95,"stem":96},"How to be an effective Engineer?","\u002Fblog\u002Fhow-to-be-an-effective-engineer","blog\u002FHow to be an effective Engineer",{"title":98,"path":99,"stem":100},"How to choose components for a desktop PC on your own","\u002Fblog\u002Fhow-to-choose-components-for-a-desktop-pc-on-your-own","blog\u002FHow to choose components for a desktop PC on your own",{"title":102,"path":103,"stem":104},"Industry 4.0","\u002Fblog\u002Findustry-4","blog\u002FIndustry 4",{"title":106,"path":107,"stem":108},"Industry 4.0 & Mixed Reality","\u002Fblog\u002Findustry-4-and-mixed-reality","blog\u002FIndustry 4 & Mixed Reality",{"title":110,"path":111,"stem":112},"Internet of Behaviours","\u002Fblog\u002Finternet-of-behaviours","blog\u002FInternet of Behaviours",{"title":114,"path":115,"stem":116},"Internet of Things","\u002Fblog\u002Finternet-of-things","blog\u002FInternet of Things",{"title":118,"path":119,"stem":120},"Let's talk about SOLID Principles","\u002Fblog\u002Flets-talk-about-solid-principles","blog\u002FLets talk about SOLID Principles",{"title":122,"path":123,"stem":124},"LiDAR","\u002Fblog\u002Flidar","blog\u002FLiDAR",{"title":126,"path":127,"stem":128},"Machine Vision -Transforming Industries AI","\u002Fblog\u002Fmachine-vision-transforming-industries-ai","blog\u002FMachine Vision -Transforming Industries AI",{"title":130,"path":131,"stem":132},"Mathematics in Software Engineering","\u002Fblog\u002Fmathematics-in-software-engineering","blog\u002FMathematics in Software Engineering",{"title":134,"path":135,"stem":136},"Micro Frontends - A Modern Approach to Front-End Development","\u002Fblog\u002Fmicro-frontends-a-modern-approach-to-front-end-development","blog\u002FMicro Frontends - A Modern Approach to Front-End Development",{"title":138,"path":139,"stem":140},"Optimizing for Search Engines","\u002Fblog\u002Foptimizing-for-search-engines","blog\u002FOptimizing for Search Engines",{"title":142,"path":143,"stem":144},"Physics Engine","\u002Fblog\u002Fphysics-engine","blog\u002FPhysics Engine",{"title":146,"path":147,"stem":148},"Point cloud","\u002Fblog\u002Fpoint-cloud","blog\u002FPoint cloud",{"title":150,"path":151,"stem":152},"Processes for Better Software Volume 1","\u002Fblog\u002Fprocesses-for-better-software-volume-1","blog\u002FProcesses for Better Software Volume 1",{"title":154,"path":155,"stem":156},"Processes for Better Software Volume 2","\u002Fblog\u002Fprocesses-for-better-software-volume-2","blog\u002FProcesses for Better Software Volume 2",{"title":158,"path":159,"stem":160},"Processes for Better Software Volume 3","\u002Fblog\u002Fprocesses-for-better-software-volume-3","blog\u002FProcesses for Better Software Volume 3",{"title":162,"path":163,"stem":164},"Quantum Computers","\u002Fblog\u002Fquantum-computers","blog\u002FQuantum Computers",{"title":166,"path":167,"stem":168},"Quantum Computing and its Potential Impact on Software Development","\u002Fblog\u002Fquantum-computing-and-its-potential-impact-on-software-development","blog\u002FQuantum Computing and its Potential Impact on Software Development",{"title":170,"path":171,"stem":172},"Quantum Cryptography","\u002Fblog\u002Fquantum-cryptography","blog\u002FQuantum Cryptography",{"title":174,"path":175,"stem":176},"Ray tracing - What you need to know","\u002Fblog\u002Fray-tracing-what-you-need-to-know","blog\u002FRay tracing - What you need to know",{"title":178,"path":179,"stem":180},"Reflections on how we code","\u002Fblog\u002Freflections-on-how-we-code","blog\u002FReflections on how we code",{"title":182,"path":183,"stem":184},"Robotic Process Automation","\u002Fblog\u002Frobotic-process-automation","blog\u002FRobotic Process Automation",{"title":186,"path":187,"stem":188},"Self Driving Cars - A Better Tomorrow","\u002Fblog\u002Fself-driving-cars-a-better-tomorrow","blog\u002FSelf Driving Cars - A Better Tomorrow",{"title":190,"path":191,"stem":192},"Semantic Web - A Smarter Future","\u002Fblog\u002Fsemantic-web-a-smarter-future","blog\u002FSemantic Web A Smarter Future",{"title":194,"path":195,"stem":196},"Sensor Fusion","\u002Fblog\u002Fsensor-fusion","blog\u002FSensor Fusion",{"title":198,"path":199,"stem":200},"Serverless Computing and the Future","\u002Fblog\u002Fserverless-computing-and-the-future","blog\u002FServerless Computing and the Future",{"title":202,"path":203,"stem":204},"Shaders","\u002Fblog\u002Fshaders","blog\u002FShaders",{"title":206,"path":207,"stem":208},"Smart Home Automation","\u002Fblog\u002Fsmart-home-automation","blog\u002FSmart Home Automation",{"title":210,"path":211,"stem":212},"The Perils of Ray-Tracing","\u002Fblog\u002Fthe-perils-of-ray-tracing","blog\u002FThe Perils of Ray-Tracing",{"title":214,"path":215,"stem":216},"The Psychology of Software Bugs Understanding and Preventing Common Mistakes","\u002Fblog\u002Fthe-psychology-of-software-bugs-understanding-and-preventing-common-mistakes","blog\u002FThe Psychology of Software Bugs - Understanding and Preventing Common Mistakes",{"title":218,"path":219,"stem":220},"Top 5 Advantages of MongoDB","\u002Fblog\u002Ftop-5-advantages-of-mongodb","blog\u002FTop 5 Advantages of MongoDB",{"title":222,"path":223,"stem":224},"Top Trends in Augmented Reality","\u002Fblog\u002Ftop-trends-in-augmented-reality","blog\u002FTop Trends in Augmented Reality",{"title":226,"path":227,"stem":228},"Top features of Unreal Engine","\u002Fblog\u002Ftop-features-of-unreal-engine","blog\u002FTop features of Unreal Engine",{"title":230,"path":231,"stem":232},"Unity 3D - Why to go with it?","\u002Fblog\u002Funity-3d-why-to-go-with-it","blog\u002FUnity 3D - Why to go with it",{"title":234,"path":235,"stem":236},"Virtual Reality Advantages","\u002Fblog\u002Fvirtual-reality-advantages","blog\u002FVirtual Reality Advantages",{"title":238,"path":239,"stem":240},"Virtual Test Drive & Autonomous Driving","\u002Fblog\u002Fvirtual-test-drive-and-autonomous-driving","blog\u002FVirtual Test Drive & Autonomous Driving",{"title":242,"path":243,"stem":244},"WebAssembly and Progressive Web Apps","\u002Fblog\u002Fwebassembly-and-progressive-web-apps","blog\u002FWebAssembly and Progressive Web Apps",{"title":246,"path":247,"stem":248},"What are Best Practices?","\u002Fblog\u002Fwhat-are-best-practices","blog\u002FWhat are Best Practices",{"title":250,"path":251,"stem":252},"What are Digital Twins?","\u002Fblog\u002Fwhat-are-digital-twins","blog\u002FWhat are Digital Twins",{"title":254,"path":255,"stem":256},"What makes Mixed Reality the next big thing?","\u002Fblog\u002Fwhat-makes-mixed-reality-the-next-big-thing","blog\u002FWhat makes Mixed Reality the next big thing",{"title":258,"path":259,"stem":260},"Why Game Engines?","\u002Fblog\u002Fwhy-game-engines","blog\u002FWhy Game Engines",{"title":262,"path":263,"stem":264},"Why we need User Experience Design?","\u002Fblog\u002Fwhy-we-need-user-experience-design","blog\u002FWhy we need User Experience Design",false,{"id":267,"title":202,"author":268,"body":272,"date":341,"description":342,"extension":343,"image":344,"meta":345,"minRead":346,"navigation":347,"path":203,"seo":348,"stem":204,"__hash__":349},"blog\u002Fblog\u002FShaders.md",{"name":269,"avatar":270},"Aghil Jose",{"src":271,"alt":269},"\u002Fassets\u002Fimages\u002Fabout.jpg",{"type":273,"value":274,"toc":331},"minimark",[275,279,282,285,290,293,297,300,304,307,311,314,318,321,325,328],[276,277,278],"p",{},"A shader is a program used to render different pixels. Shaders are used when\ndetailing shadows, lighting, texture gradients and more. However, they can do\na lot more than just their namesake. You can often see shaders being packaged\nas mods for games, transforming the dull, pixelated games into stunning,\nsun-soaked landscapes.",[276,280,281],{},"Shader is a set of instructions that runs on the GPU (Graphics Processing\nUnit). GPU is a processing unit or a circuit, specially designed for faster\nand efficient computer graphics operation or image manipulation.",[276,283,284],{},"Shaders are categorised based on their functionality.",[286,287,289],"h2",{"id":288},"vertex-shader","Vertex Shader",[276,291,292],{},"Vertex shader transforms each vertex's 3D position in virtual space to the 2D\ncoordinate at which it appears on the screen (as well as a depth value for the\nZ-buffer). Vertex shaders can manipulate properties such as position, colour\nand texture coordinates, but cannot create new vertices. The output of the\nvertex shader goes to the next stage in the pipeline, which is either a\ngeometry shader if present, or the rasterizer. Vertex shaders can enable\npowerful control over the details of position, movement, lighting, and colour\nin any scene involving 3D models.",[286,294,296],{"id":295},"pixel-shader","Pixel Shader",[276,298,299],{},"Pixel shaders, also known as fragment shaders, compute colour and other\nattributes of each \"fragment\"- a unit of rendering work affecting at most a\nsingle output pixel. The simplest kinds of pixel shaders output one screen\npixel as a colour value. More complex shaders with multiple inputs\u002Foutputs are\nalso possible. Pixel shaders range from simply always outputting the same\ncolour, to applying a lighting value, to doing bump mapping, shadows, specular\nhighlights, translucency and other phenomena.",[286,301,303],{"id":302},"tessellation-shader","Tessellation Shader",[276,305,306],{},"As of OpenGL 4.0 and Direct3D 11, a new shader class called a tessellation\nshader has been added. It adds two new shader stages to the traditional model-\ntessellation control shaders (also known as hull shaders) and tessellation\nevaluation shaders (also known as Domain Shaders), which together allow for\nsimpler meshes to be subdivided into finer meshes at run-time according to a\nmathematical function. The function can be related to a variety of variables,\nmost notably the distance from the viewing camera to allow active\nlevel-of-detail scaling. This allows objects close to the camera to have fine\ndetail, while further away ones can have coarser meshes, yet seem comparable\nin quality. It also can drastically reduce required mesh bandwidth by allowing\nmeshes to be refined once inside the shader units instead of down-sampling\nvery complex ones from memory.",[286,308,310],{"id":309},"geometry-shader","Geometry Shader",[276,312,313],{},"The geometry shader is responsible for the creation of new rendering\nprimitives parting from the output of the vertex shader. A geometry shader is\nexecuted once per primitive, which is, in the worst case (when it is used to\nemit point primitives), the same as the vertex shader. The best-case scenario\nis when it is used to emit triangles, because only then will it be executed\nthree times less than the vertex shader, but this complexity is relative.\nAlthough the geometry shader's execution could be cheap, it always increases\nthe scene's complexity, and that always translates into more computational\ntime spent by the GPU to render the scene.",[286,315,317],{"id":316},"compute-shader","Compute Shader",[276,319,320],{},"The compute shader is a general-purpose shader that is used outside of a\nrendering pipeline. That means they are not used to draw a primitive or to\nshade a pixel. They are used for using GPUs parallel processing capability for\ngeneral-purpose tasks. Additional stages in animation or lighting algorithms\ncan be examples of compute shaders.",[286,322,324],{"id":323},"shaders-transform-dull-and-dreary-environments-that-may-have-lacked-a","Shaders transform dull and dreary environments that may have lacked a",[276,326,327],{},"cohesive look to staggeringly beautiful works of art.",[276,329,330],{},"Disclaimer : The views and opinions expressed in the article belong solely to\nthe author, and not necessarily to the author's employer, organisation,\ncommittee or other group or individual.",{"title":332,"searchDepth":333,"depth":333,"links":334},"",2,[335,336,337,338,339,340],{"id":288,"depth":333,"text":289},{"id":295,"depth":333,"text":296},{"id":302,"depth":333,"text":303},{"id":309,"depth":333,"text":310},{"id":316,"depth":333,"text":317},{"id":323,"depth":333,"text":324},"2021-02-07","Why do we need shaders and what types of shaders are out there.","md","\u002Fassets\u002Fimages\u002Fblog\u002F080221\u002Ftitle.jpg",{},4,true,{"title":202,"description":342},"AdXc0uxTP5VczjSgPcoG7LiX_fQV1gRuUBb6mPylgaY",[351,354],{"path":143,"title":142,"description":352,"date":353},"How do physics engines help create a better experience for games and simulations.","2021-02-12",{"path":207,"title":206,"description":355,"date":356},"What are smart homes and how they can make our lives better.","2021-01-31",1790408587594]