Shader Adventures: a runner tool

by Victor Gridnevsky

Hello. λ.meetup #2 happened less than a week ago and there is a tiny thing I want to share with all of you.

It is yet another tool to run your shader code outside of ShaderToy and similar sites.
I made it so I can use it in deck.js for my talks and I plan to improve it from time to time. For example, it lacks WebGL2 support, but I intend to fix that (upd: I already started working on an update and I want to polish it). After all, WebGL2 is just better.

It is based on threejsfundamentals code, but I think I made a convenient wrapper.

λ.meetup #2 (russian)

by Victor Gridnevsky , Murat Kasimov

Hello. At Jan 17, 2020, we did a meetup about functional programming and GLSL shaders in Roonyx's office.

For now, there's a problem with Victor's presentation, but you can check our Murat's talk: «ЭФФЕКТЫ: ПРЕОБРАЗОВАНИЯ, КОМПОЗИЦИИ, ТРАНСФОРМЕРЫ».

Привет. 17 января 2020 мы собрали митап о функциональном программировании и GLSL шейдерах в офисе компании Roonyx.

Сейчас презентация Виктора недоступна, но вы можете просмотреть презентацию Мурата: «ЭФФЕКТЫ: ПРЕОБРАЗОВАНИЯ, КОМПОЗИЦИИ, ТРАНСФОРМЕРЫ».

Trying to compose non-composable: joint schemes

by Murat Kasimov


In this blog post I would like to show you an experimental method for dealing with multiple effects in Haskell that I have called joint schemes. What is the joint schema? It’s a schema that describes how some specific effect should be composed with other effects. I never seen something similar before, so I decided to dig into the capabilities of this approach.

In Haskell we get used to work with effects as functors, whose objects (arguments) are some expressions, which we are interested at some particular moment.

Shader Adventures: GLSL Language

by Victor Gridnevsky

This article introduces GLSL fundamentals using ShaderToy site.

GLSL language is a computer programming language, similar to C. To program your own fragment shaders, you need a basic understanding of its syntax: if you can write your “Hello, World” program, you can ignore this part of the article.

So, let's start with a brief explanation if you are not sure.

You will definitely need:

  • a concept of functions and function arguments
  • to understand what main function does
  • to know about data types like int, float

(Alternatively, you can read more about C in a tutorial by TutorialsPoint.)

So, programs are executed sequentially, meaning that in the simplest case, your code is being executed line-by line. Sequences of these lines are written inside braces / curly brackets: { } so the code is divided to different parts doing different things. There are several ways to tell the computer how this part is called.

For example, it’s hard to achieve much by simply executing sequences of lines: we can calculate something the way we do on a calculator, but it’ll be harder to express something like this: z = (sin(y^2) + 15) / 2.

GLSL language makes it possible to use parentheses “( )” for computation order. It also considers priorities between things like sum and subtraction, multiplication and division while calculating values.

So, taking the idea of parentheses in mind, we can write code like this:

Shader Adventures: 2D basics

by Victor Gridnevsky

In this article, I will discuss basic operations on 2D space, which are easy to write and useful when one needs to manipulate output image.

First, we need some background to change. Let's calculate it instead of using a texture; I will use a grid to show the examples. Doing this will tell us more about the math we will need later.

By manipulating Cartesian coordinate values, we will scale, rotate and shift our grid. Possible with shifting pixel coordinates, but less convenient.

We should not forget about aspect ratio. Our screen's width and height is different. So when we have our formulas for X and Y to get the cells, these will appear stretched.

Shader Adventures

by Victor Gridnevsky

This is a series of articles with anything about fragment shaders. If I want to describe these shaders in one sentence, I’ll tell that shaders are programs, allowing us to make 2D and 3D animations and even play music.

I am adding to a pile of existing articles about the shaders because I was asked the questions other people answered publicly before. To improve this situation, I am writing my answers in the order I am being asked. And, to be honest, I am not sure if I am failing so far.

Shader adventures” will be extended each week until I think it describes enough.

I started writing notes while playing with shaders a year ago. Only last month was productive at all, really: I found ways to implement different effects and draw different things. I had fun playing with the shader code, so I told others about the idea. Finally, I decided to improve my notes, fill the gaps and make my notes publicly available.


My current plan is:

  • 3D: raymarching basics (reviewing)
  • 3D: normals
  • 2D distance functions
  • 3D: transparency
  • 3D: reflections and refractions