Shader Academy: Learn computer graphics by solving challenges

(shaderacademy.com)

232 points | by pykello 3 days ago ago

62 comments

  • E-Reverance 19 hours ago

    A lot of the styling looks very similar to some default choices popular llm's make; a default which I had never seen prior to their existence.

    Also the ai-generated textures make it all the more likely that the rest of site is vibe-coded.

    I'm not anti-ai per se, but using the defaults does affect my (and presumably others) impression of the quality of the site

    • E-Reverance 19 hours ago
      • crashprone 7 hours ago
      • delusional 17 hours ago

        What am i looking at there?

        • E-Reverance 17 hours ago

          The expected output to the quiz does not seem like something someone would intentionally choose

          • Etherlord87 14 hours ago

            You didn't present some context on how you reached this content on the website. It looks as if it was an exercise to produce a shader detecting edges based on derivative functions or just sampling neighboring texture pixels.

            • yorwba 11 hours ago

              The title is "Vector of Change" and the description is "Your challenge is to make something as close as the expected shader." and that's all the context you get. It doesn't seem like a very well-designed exercise.

              • szpro 10 hours ago

                Hey, thanks for sharing this feedback. I am one of the creators of shader academy and I created this challenge. This is ranked challenge, so we do not provide answer and the score of it is used in our ranking https://shaderacademy.com/ranking For now we do not have other ranked challenges, but we will add more in future.

                How would you improve description of this challenge? As you can notice, we provide a lot of hints, description etc. for other challenges, but this one is vague on purpose.

                Thank you

                • raincole 7 hours ago

                  Personally I know it's about edge detection at the first glance. But I think you should have two things:

                  1) Make it clear that the lack of instructions is intentional

                  2) Have a "pixel inspection" tool so we can check the exact RGB values in the expected and diff images more easily.

                  • szpro 7 hours ago

                    Thanks a lot, I think this is valid feedback and we will do that. About 1) we made assumption that for ranked challenges it would be obvious why it is vague, but we can fix it.

                    Thank you!

    • raincole 18 hours ago

      I'd rather the author spend time on what they want to make (shader quiz) instead of CSS.

      • agentcoops 11 hours ago

        As someone who has always despised front-end programming, I would be more than satisfied if LLMs turned out to only be particularly good at that. Given the number of pages we've all seen where the content as well as the front-end are obviously 90% AI-generated, I understand the knee-jerk reaction against sites clearly designed by AI, but it's unfortunate that leads to a negative reaction against (or even just a difficulty distinguishing) sites where people share a tool/knowledge of their own that they never would have shared if it would have taken even just a few days of futzing around with CSS/figuring out the latest JS framework...

        I think people under-estimate how much of an effect the unreasonable complexity of modern front-end programming has had, especially outside of tech. My wife works in the non-profit world and I have been completely blown away by how much "designers" barely able to tweak a wordpress plugin get away with charging... She's an "AI skeptic" herself, but almost cried with joy when I showed her V0 [0].

        [0] Not as good at coding as others, but probably the single most impressive AI product I've played with from a UX perspective.

        • raincole 10 hours ago

          I've found it ridiculous that people can see this insanely useful, free resource and their first reactions are "meh the buttons are default AI style."

          • snet0 8 hours ago

            In cases like this, where it's used to "automate the boring stuff", I just see it as outsourcing. You don't want to spend time building the frustrating CSS/HTML or whatever that isn't your skill set, and the LLM is quite great at doing it.

          • szpro 8 hours ago

            thank you for your comment! I hope you enjoy our platform!

      • 7 hours ago
        [deleted]
      • E-Reverance 17 hours ago

        I don't think they made most of the quizzes either (see link in my other reply)

        • raincole 17 hours ago

          No? The quiz is clearly some kind of edge detection filter. The light blue "grid" is the background to let you know there are transparent pixels in the expected output. It looks like something designed with intention to me. They just forgot to put the text description.

          • E-Reverance 17 hours ago

            Click on where it says DIFF; its not edge detection

            More likely to be some kind of color space thresholding

            • E-Reverance 16 hours ago

              Never mind, you were right that it is edge detection (a terrible one though lol):

              https://shaderacademy.com/shaders/glsl/ranked_1/fragmentExpe...

              But I still stand by the ai-gen'd aspect

              • szpro 10 hours ago

                Hey, so I responded about it in other thread, but let me respond here.

                Most challenges were created by us, but we use LLM for example to generate comments in the code or generate some simple boiler plate.

                Sometimes, it is also useful to create similar challenge to already existing one.

  • bob1029 4 hours ago

    My journey into shaders started in Unity with Shader Graph and I eventually wound up using some much older ideas - Baked GI w/ the standard URP lit shader [0]. The built-in shaders already give you most of what an average gamer could ask for:

    > The Lit Shader lets you render real-world surfaces like stone, wood, glass, plastic, and metals in photo-realistic quality. Your light levels and reflections look lifelike and react properly across various lighting conditions, for example bright sunlight, or a dark cave. This Shader uses the most computationally heavy shading model in the Universal Render Pipeline (URP).

    If you add on top of this a willingness to bake lights [1] like it's the early 2010s again, you can achieve extremely high quality scenes without getting tied up in distracting code paths and tools. Your time is much better spent out in the field acquiring actual textures, meshes, audio samples, etc. Painting & lighting an exotic texture IRL and then using a depth-sensing camera to capture it can be orders of magnitude more productive.

    [0] https://docs.unity3d.com/Packages/com.unity.render-pipelines...

    [1] https://docs.unity3d.com/Packages/com.unity.render-pipelines...

  • tyilo 6 hours ago

    I can't get https://shaderacademy.com/challenge/intro_1 to work on Firefox 142.0b5. Even with the provided answer the output is just a red rectangle.

    • ahmkool 6 hours ago

      Are you using Firefox on Linux ? For some reason it doesn't really work for some users - can you try to switch to Chrome or another browser ?

  • crashprone 6 hours ago

    The idea is amazing, congratulations on getting the product out! However, there's a lot about this site that doesn't sit well with me. The rather generic site design and uninspiring results of the challenges are something that I could probably overlook, but what irks me the most is the lack of any human aspect throughout the site. How does an academy completely gloss over the contributions of various amazing people who've been teaching shaders for years now and are responsible for making shaders accessible and fun? I would've never learnt what GLSL is, without ShaderToy. If someone started learning shaders through this site and never discovered the treasure trove of material on iquilezles' website, how do we expect them to jump straight into "Ray Marching"? I can't help but think that the site intentionally holds back information on various other phenomenal shader learning resources.

    Existing works of art like iquilezles "Planet Fall" should be part of the recommended curriculum if only to inspire others and set the baseline for what's possible with shaders.

  • vjk800 15 hours ago

    Is there something of practical value you can do nowadays if you know about shaders and all this low level graphics stuff?

    I'm under impression that if I want to make an actual game, it makes no sense to do any of this stuff myself because the many existing game engines do it much better and faster out of the box and all the possible style choices in graphics are abstracted away into parameters in the engine.

    • jplusequalt 9 hours ago

      >Is there something of practical value you can do nowadays if you know about shaders and all this low level graphics stuff?

      Learning something new is always worthwhile, even if you have no immediate practical usecase for that knowledge.

      Also, neither Unity or Unreal are a drop in replacement for shader programming. If you want to do anything advanced you'll need to get your hands dirty rolling your own GLSL/HLSL.

    • gwilikz 11 hours ago

      If your goal is to just make a game, then sure, there’s probably not a huge gain in learning low-level graphics.

      But the reason existing game engines already do it better is because well… there’s still people out there who learn low-level graphics and maintain / improve those engines. Right?

    • adastra22 15 hours ago

      Games typically have custom shaders.

      But this is more than just games. Shaders are how you program a GPU. There are plenty of use cases.

    • szpro 15 hours ago

      That's a good point, but I think very often people still have hard time creating effects they want. For example good few years ago I published few shaders on Unity Asset Store (like https://assetstore.unity.com/packages/vfx/shaders/fragmentat...) and there were quite a lot of purchases (and still are sometimes).

      My point is, you can create more complex effects and provide them as a tool/out of the box effect (wrapper)

    • raincole 9 hours ago

      Even simplest (in terms of graphics) 2D games like Balatro have custom shaders today. It's an extremely valuable, and commonly applied skill set among game devs.

      > game engines... all the possible style choices

      Nah. Nope. Never happens.

      Game engines might have node-based shader editors, but they're roughly as low-level as GLSL.

      Honestly I don't even know whether I'd call GLSL shaders "low-level." When I hear of low-level graphic code I'd imaging one's talking about managing pipeline state objects manually or something.

    • Kiro 13 hours ago

      Shaders are not some hidden rendering pipeline technicality you can abstract away and forget about. Even if you don't write raw shader code you still need to use something like a shader graph for most games, or you will be very limited.

    • KeplerBoy 15 hours ago

      Many art styles are achieved by writing a small handful of shaders by hand.

  • larodi 13 hours ago

    weirdly it claims my FF140 does not support webgl on Intel Mac with OSX15.7 which clearly supports Metal, and also supports webgl as per chronos website https://get.webgl.org/

  • ahmkool 15 hours ago

    Hey, I'm the co-creator of Shader Academy and wanted to thank you for referencing our platform - very helpful for us !

    Also, for the people interested in providing feedback, ideas for improvements, what you'd like us to build next, etc - feel free to join our Discord: https://discord.com/invite/VPP78kur7C

    • szpro 15 hours ago

      I am also other author of shader academy. To clarify comments about ai, we use it sometimes to add comments in a code (people needed it to solve problems) or sometimes to generate some boilerplate code.

  • pjmlp 3 hours ago

    Looks cool for rainy weekends.

  • setsewerd 20 hours ago

    This might not be entirely relevant since I'm not an expert in the 3d visual community but my friends launched this project and it might be something you'd be interested in

    Shader Park https://share.google/FgjTgechf1J3n4l5X

    • FrequentLurker 18 hours ago

      Here is a clean link if anyone wants: https://shaderpark.com

      • mdaniel 7 hours ago

        Thank you, and now I have a new pattern to watch out for in URLs. After all the energy we just had to go through to rescue all the goo.gl links when Big Evil decided that hosting a redirect webserver was too much trouble for them, and here we go again with share.google - crazypants

  • wanderingbit 21 hours ago

    I’ve been looking for something like this. The problem is, when to find the time to do it.

  • claytongulick 7 hours ago

    This looks cool!

    Maybe it's because I'm on my phone and I don't see the full UI, but I'm having trouble navigating the tutorial section.

    I don't need the "hello world" basic tutorials, I'm looking to jump in to a point that meets where I am with GLSL - is there a TOC or something for the tutorials?

    Some sort of path or progression that you can jump around on?

    • ahmkool 4 hours ago

      Hey, thank you ! there are 5 tutorial exercises - filter the exercises by the intro difficulty. Once you're done with them we recommend choosing some interesting easy exercises and reading the learnings info about them - there is no real order but we are working on a concept of tracks to order our exercises a bit more. Coming soon

  • danielvaughn 21 hours ago

    This is incredible, very well done.

    • szpro 8 hours ago

      thank you!

  • Fraterkes 9 hours ago

    @dang I think something might be going wrong with the automatic flagging in this thread. I’m seeing a few pretty normal comments that are all dead.

    • tomhow 9 hours ago

      Thanks - they were from a new account that had falsely triggered a spam filter, but they have to be tuned a bit more strictly for new accounts.

  • addfr 7 hours ago

    [dead]

  • wfhrto 19 hours ago

    Cool! I pasted some of the puzzles into ChatGPT and it solved them!

    • rs186 10 hours ago

      Congratulations! You just wasted 5 minutes of your life and got absolutely nothing in return.

    • vivzkestrel 7 hours ago

      you should read the MIT published study that doing this actually makes your less smarter over long periods of time

    • jplusequalt 9 hours ago

      What's the point of following a tutorial series if you can't be bothered to learn the subject?

    • NoteyComplexity 18 hours ago

      So… what does it prove? Do you learn anything?

      Just because Alpha go exist back in the days, go competition doesn’t go away. Just because ChatGpt exists these days, it doesn’t replace our desires of learning something more interactively.

      ChatGPT can answer many things, but it seems miss the point if you use it for a website designed for learning.

      • wfhrto 18 hours ago

        ChatGPT can solve the problems for me. I can spend my time doing other things other than learning stuff it can do.

        • maplethorpe 17 hours ago

          Does being able to solve basic computer graphics problems mean ChatGPT can solve all computer graphics problems? If not, does that mean advanced computer graphics problems fit into the bucket of "things that are worth learning?"

          Because if the advanced problems are worth learning, but the basic problems are not worth learning, how are you supposed to jump straight to learning the advanced stuff while skipping the rest? You'll inevitably end up needing to learn the basics first anyway.

        • NoteyComplexity 16 hours ago

          Fr, what is the “other stuff” you all claims to be? Since I have heard many people who heavily use AI claimed to save time for “other stuff”, but I never heard about what is their “other stuff”.

          If what you actually want to do is not really related to shader, there is a huge chance you have started your learning process in a wrong direction, which is a bit different to the definition of “being efficient”.

          So tell me what you want to do.

          • deadbabe 16 hours ago

            They will just write more AI prompts.

            There is no point where a vibe coder will put down their glasses and say “I will now write this code by hand”.

        • KeplerBoy 17 hours ago

          This mindset will be the great filter for kids these days.

          Yes, LLMs are sort of competent in many, many areas, but if you refuse to learn stuff the LLM can do, you will fail miserably to spot when the LLM is incompetent.

    • dodol123 19 hours ago

      I don't think that how academy works

      • Y_Y 16 hours ago

        It worked for Plato