Warning: include_once(/home/instaren/public_html/wp-content/plugins/hummingbird-performance/helpers/wp-hummingbird-helpers-core.php): failed to open stream: No such file or directory in /home/instaren/public_html/wp-content/advanced-cache.php on line 22

Warning: include_once(): Failed opening '/home/instaren/public_html/wp-content/plugins/hummingbird-performance/helpers/wp-hummingbird-helpers-core.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/instaren/public_html/wp-content/advanced-cache.php on line 22

Warning: include_once(/home/instaren/public_html/wp-content/plugins/hummingbird-performance/core/class-abstract-module.php): failed to open stream: No such file or directory in /home/instaren/public_html/wp-content/advanced-cache.php on line 23

Warning: include_once(): Failed opening '/home/instaren/public_html/wp-content/plugins/hummingbird-performance/core/class-abstract-module.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/instaren/public_html/wp-content/advanced-cache.php on line 23

Warning: include_once(/home/instaren/public_html/wp-content/plugins/hummingbird-performance/core/modules/class-module-page-caching.php): failed to open stream: No such file or directory in /home/instaren/public_html/wp-content/advanced-cache.php on line 24

Warning: include_once(): Failed opening '/home/instaren/public_html/wp-content/plugins/hummingbird-performance/core/modules/class-module-page-caching.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/instaren/public_html/wp-content/advanced-cache.php on line 24
GLSL vs HLSL | Instarender

If you’re developing a game for UE4 or Unity, you’re going to have to write your shaders in HLSL if you want to support all platforms. If you’re making a web app or a game with Game Maker Studio, you’ll be writing your code in GLSL ES. There’s also CAD shader languages like Open Shader Language (OSL) or Maya’s proprietary shader language.

So, the shader language world is a bit fragmented, but every language here is similar enough to C that you can easily read one or the other.

So this will be an overview of every difference between HLSL and GLSL, and how to port between them.

Alternatives – Cross Compilers & Node based Editors


There are alternatives to actually learning all 3 languages, such as node based material editors like Unreal’s material editor or Unity Asset Store packages like Shader Forge.

Shader languages are thus hidden behind an abstraction layer, which is great for non-programmers, but extra abstraction means you have to find people that understand yet another layer of a system, which may not be worth the trouble.


It’s difficult to make a shader editor that’s not dependent on a specific engine, since different engines have different variable names and places they manage shaders. Nevertheless, there’s been attempts to make shader composers, such as:

Even with these programs, you need to mess around with the code output (if any) to get it to work just right.

Cross Compilers

So why can’t I just run my code through some sort of parser that can automatically convert it from GLSL to HLSL, or visa versa? Well, there are a few resources out there that can do just that.

  • HLSL2GLSL – A language translator used by Unity that converts HLSL to GLSL. Now this is a one way operation, but maybe someone will come along and make it 2 way!

  • Google Angle – A GLSL ES to HLSL converter used by Game Maker Studio and Chrome.

  • bfgx – A macro based system that allows you to write cross platform shaders by abstracting away functions with macros.

So here’s a cool project idea, make a web app that does 2 way conversion of hlsl to glsl. Then propose it as an addon to shadertoy.com! It could be just a combination of HLSL2GLSL and Google Angle.

Syntax Differences

The syntax of each language is nearly identical, just a few different function names. Let’s start with a hello world shader, a simple UV color display:


//Vertex Shader
void MainVertexShader(
    float4 InPosition : ATTRIBUTE0,
    float2 InUV : ATTRIBUTE1,
    out float2 OutUV : TEXCOORD0,
    out float4 OutPosition : SV_POSITION
    OutPosition = InPosition;
    OutUV = InUV;

//Fragment Shader
void MainPixelShader(
    in float2 UV : TEXCOORD0,
    out float4 OutColor : SV_Target0
    OutColor = float4(UV, 1.0, 1.0);


//Vertex Shader
attribute vec4 InPosition;
attribute vec2 InUV;

varying vec2 UV;

void main()
    gl_Position = InPosition;
    UV = InUV;

//Fragment Shader
varying vec2 UV;

void main()
    gl_FragColor = vec4(UV, 1.0, 1.0);

So standard C syntax with a few things to note here:

  • in HLSL attributes are arguments in the shader functions, in GLSL, they’re keywords denoted by attribute and varying.
  • in GLSL output variables are denoted with a gl_ prefix, in HLSL they’re explicitly denoted with a out keyword. (GLSL has the out keyword as well, and allows for custom output variable names. Eventually, you must hit a main() function though.)
  • The main functions in HLSL could be named anything you want, whereas in GLSL, it must be main().
  • float4 in HLSL is the same as vec4 in GLSL, a struct with 4 floats.

//First line is HLSL, the second is HLSL
float4 v = 1.0;
vec4 v = vec4(1.0);


float4x4 m = {x1, y1, z1, w1, ...};
mat4 m = mat4(x1, y1, z1, w1, x2, y2, ...);

v = mul(m, v);
v = m * v;

//Built In functions
lerp(a, b, c);
mix(a, b, c);

fmod(1.1, 1.0);
modf(1.1, 1.0);

atan2(x, y);
atan(y, x);



credits to  Alain Galvan

Author admin
Categories Blog
Views 4146


No Comments

Leave a Reply

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.