Posts Tagged‘Shadertoy’

Branchless Photoshop Blend Modes

by Pol Jeremias on April 3, 2016

No Comments

If you have used Adobe Photoshop you have probably seen that it allows users to draw (or create content) in different layers. These layers can after be combined in many different ways, the blend modes. https://en.wikipedia.org/wiki/Blend_modes.

The blog post you are reading right now builds on top of the idea of having a branchless RGB to HSL conversion (http://www.poljeremias.com/branchless-rgb-to-hsl), and it proposes branchless solutions to the most common color blending operations.

If you want to just play around with it, visit the following Shadertoy, there you can try live the different branchless blending operations : https://www.shadertoy.com/view/Md3GzX

This post contains implementations for the following blending operations :


  • Source
  • Destination
  • Multiply
  • Screen
  • Exclusion
  • Overlay
  • Hard Light
  • Soft Light
  • Color Dodge
  • Color Burn
  • Linear Dodge
  • Linear Burn
  • Vivid Light
  • Linear Light
  • Pin Light
  • Hard Mix
  • Substract
  • Divide

  • Addition
  • Difference
  • Darken
  • Lighten
  • Invert
  • Invert RGB
  • Hue
  • Saturation
  • Color
  • Luminosity



Continue Reading

A Branchless RGB to HSL Conversion

by Pol Jeremias on January 31, 2016

1 Comment

Last week I needed a branchless implementation of a colorspace conversion that would go from RGB (Red, Green, Blue) colors to HSL (Hue, Saturation, Lightness). Since I couldn’t find any other implementation that worked for my situations, I decided to write my own, which you will find below!

Code

vec3 rgb2hsl( in vec3 c )
{
    const float epsilon = 0.00000001;
    float cmin = min( c.r, min( c.g, c.b ) );
    float cmax = max( c.r, max( c.g, c.b ) );
    float cd   = cmax - cmin;
    vec3 hsl = vec3(0.0);
    hsl.z = (cmax + cmin) / 2.0;
    hsl.y = mix(cd / (cmax + cmin + epsilon), cd / (epsilon + 2.0 - (cmax + cmin)), step(0.5, hsl.z));

    vec3 a = vec3(1.0 - step(epsilon, abs(cmax - c)));
    a = mix(vec3(a.x, 0.0, a.z), a, step(0.5, 2.0 - a.x - a.y));
    a = mix(vec3(a.x, a.y, 0.0), a, step(0.5, 2.0 - a.x - a.z));
    a = mix(vec3(a.x, a.y, 0.0), a, step(0.5, 2.0 - a.y - a.z));
    
    hsl.x = dot( vec3(0.0, 2.0, 4.0) + ((c.gbr - c.brg) / (epsilon + cd)), a );
    hsl.x = (hsl.x + (1.0 - step(0.0, hsl.x) ) * 6.0 ) / 6.0;
    return hsl;
}

If you are curious about the actual RGB to HSL conversion, you should take a look at this article from Wikipedia, which explains the differences between HSL, HSV, HSI, RGB (and others), and describes the math behind the transformations, click here.

Also, I have done a very simple Shadertoy comparison between the branchless colorspace conversion (left side) and a traditional colorspace conversion that I found on the net.

You should see how colors transition from left to right without changes.

Continue Reading

Screen Shot 2016-01-18 at 2.07.05 PM

My Top 10 Shadertoy Picks of 2015

by Pol Jeremias on January 18, 2016

No Comments

This is something I have been wanting to do since we started Shadertoy almost three years ago now!

Every year, we get tons of submissions and sometimes it is easy to forget the amount of great shaders we have seen during last year. So, I have gone through all last year’s shaders and pick the best 10. This list reflects only my personal opinions, based mostly on two factors: aesthetics and tech.

If you like any of the shaders click on the picture and you will see them live running on your browser. Here is my top 10 Shadertoy picks of 2015 :

 


10

“Impact” by Cabbibo

Impact

 


9

“Mistery Mountains” by Dave_Hoskins

Mistery Mountains

Continue Reading

Capture

Two Tweet Challenge in Shadertoy

by Pol Jeremias on February 23, 2015

No Comments

How big is two tweets?

If one tweet is 140 characters long, well you guessed it right, two tweets is 280 characters! Here is a sample of what two tweets could look like :

This is a sample tweet written to show how many characters can fit in the first tweet. This is a sample tweet written to show how many ch…This is a sample tweet written to show how many characters can fit in the first tweet. This is a sample tweet written to show how many ch…

So, how much content can you squeeze in 280 characters of code? This was the question asked by Shadertoy user Nimitz when he started the “Two Tweet Challenge”. The challenge received more than 100 submissions, incredible! And the results are crazy, as in crazy awesome, but before looking at some of my favorites, here are the links to the official competition and the official winners:

Contest Information
Judging Information
The Results
See all Submissions

So now, let’s take a look at how much code you can put in 280 chars. Below you can find the code to generate the shader called Metasin, which I made for the competition, this one is only 252 chars:

Metasin – https://www.shadertoy.com/view/4llGDH

void main(){vec4 q=gl_FragCoord/iResolution.xyzx; float t=iGlobalTime*0.15;for(float i=1.;i<30.;i+=1.) q.w+=1.-smoothstep(.0,.15,length(q.xy-vec2(i/30.+sin(i+t),.5+.3*sin(q.x*10.*sin(t)+t)))); gl_FragColor=vec4(1.-q.w)*4.*sqrt(q.x*q.y*(1.-q.x)*(1.-q.y));}

Continue Reading

SNES & Mode 7 in Shadertoy

by Pol Jeremias on January 13, 2015

No Comments

Last Sunday, I was watching this video (“Super Nintendo Effects Dev Special – Did You Know Gaming? Feat. Mario Castañeda”) that talks about the different effects that could be achieved with the SNES and I realized I could write a very simple Shadertoy inspired by the Mode 7!

Let’s start with the basics though: Do you remember the SNES and its Mode 7?

If you don’t, you have probably seen it, it was used in many games, such as : F-Zero, Pilotwings, Yoshi’s Safari, Secret of Mana,  Final Fantasy (many), Super Mario RPG, Super Mario Kart, Super Mario World, Chrono Trigger, The Legend of Zelda: A Link to the Past…

Mode 7 in Mario Kart

Mode 7 in Mario Kart

Mode 7 is a graphics mode on the Super NES video game console that allows a background layer to be rotated and scaled on a scanline-by-scanline basis to create many different effects.

http://en.wikipedia.org/wiki/Mode_7

Disclaimer: I have never actually work with the original Mode 7, this post and its shadertoy are just guess work based on the Wikipedia article. If you did work with it, please share your thoughts, I would like to learn more about it.

From a technical perspective, looks like the Mode 7 is just a texture projection, a very special one, that results on an image that looks like it is 3D. If you look at the picture again, the actual circuit looks like it is using the special projection, however, the karts look like regular sprites that are scaled based on the distance.

Continue Reading