DEV Community

Cover image for Como Criar Códigos Artísticos com C++ e GLSL(Shaders)
Marcos Oliveira
Marcos Oliveira

Posted on

4

Como Criar Códigos Artísticos com C++ e GLSL(Shaders)

GLSL é uma linguagem para criar sombreamentos(ou shaders em inglês) de alto nível. Ela é baseada no C, por isso possui uma sintaxe muito similar.

GLSL é a principal linguagem de sombreamento para OpenGL, é muito usada por programadores artistas, ou seja, um código para criar arte e vice-versa.


▶️ Assista ao Vídeo

Como Criar Códigos Artísticos com C++ e GLSL(Shaders)


👀 Códigos criados no Vídeo

main.cpp

#include <SFML/Graphics.hpp>
#include <iostream>

int main(){
  sf::RenderWindow window(sf::VideoMode(1280,720), "SFML GLSL Shaders"); 

  sf::Shader shader;
  sf::Clock clock;
  sf::RectangleShape rect(
    sf::Vector2f(
      static_cast<float>(window.getSize().x),
      static_cast<float>(window.getSize().y)
    )
  );

  if(!shader.loadFromFile("shader.frag", sf::Shader::Fragment)){
    std::cerr << "Failed to load file.\n";
    return EXIT_FAILURE;
  }

  while( window.isOpen() ){
    sf::Event event;
    while( window.pollEvent(event)){
      if( event.type == sf::Event::Closed ){
        window.close();
      }
    }

    float time = clock.getElapsedTime().asSeconds();

    shader.setUniform("iTime", time);

    shader.setUniform("iResolution", sf::Glsl::Vec3(
      window.getSize().x, 
      window.getSize().y, 
      1.0
    ));

    window.clear();
    window.draw(rect, &shader);
    window.display();
  }

  return EXIT_SUCCESS;
}
// g++ main.cpp -lsfml-graphics -lsfml-window -lsfml-system
Enter fullscreen mode Exit fullscreen mode

shader.frag

#version 150 core

uniform float iTime;
uniform vec3 iResolution;
out vec4 fragColor;

vec3 rand_colors(float f){
  vec3 a = vec3(0.5f, 0.5f, 0.5f);
  vec3 b = vec3(0.5f, 0.5f, 0.5f);
  vec3 c = vec3(1.0f, 1.0f, 1.0f);
  vec3 d = vec3(0.123f, 0.456f, 0.567f);

  return a + b * cos(6.5 * (c * f + d));
}

void main(){
  vec2 fragCoord = gl_FragCoord.xy;
  vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;

  for(int i = 0;  i < 4; ++i){
    uv = fract(uv);
    uv -= 0.5;

    float d = length(uv);

    vec3 color = rand_colors(d + iTime);

    d = sin(d * 8.f + iTime * 3.f) / 6.f;
    d = abs(d);
    //d -= 0.5;
    d = 0.02f / d;
    color *= d;

    fragColor = vec4(color, 1.0);
  }
}
Enter fullscreen mode Exit fullscreen mode

Código básico .frag para criar um projeto do zero:

#version 150 core

uniform float iTime;
uniform vec3 iResolution;
out vec4 fragColor;

void main(){
  vec2 fragCoord = gl_FragCoord.xy;
}
Enter fullscreen mode Exit fullscreen mode

🔗 Links citados no Vídeo

Links para cursos:

Links adicionais:

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (1)

Collapse
 
v_systems profile image
V_Systems

Apply your GLSL skills to the V Shader Hackathon, running until 22 May 2025!
Create unique Shader art to win up to $1000 – in collaboration with Gamedevjs.com

  • Create your original Shader
  • Upload the Javascript to the V Systems blockchain to turn it into an NFT
  • Be one of the 16 winners of prizes ranging $500-$1000

How to join: medium.com/vsystems/13-26-april-cr...

Any questions? Join our community!

$150K MiniMax AI Agent Challenge — Build Smarter, Remix Bolder, Win Bigger!

$150K MiniMax AI Agent Challenge — Build Smarter, Remix Bolder, Win Bigger!

Developers, innovators, and AI tinkerers, build your AI Agent and win $150,000 in cash

Signup Now

👋 Kindness is contagious

Explore this practical breakdown on DEV’s open platform, where developers from every background come together to push boundaries. No matter your experience, your viewpoint enriches the conversation.

Dropping a simple “thank you” or question in the comments goes a long way in supporting authors—your feedback helps ideas evolve.

At DEV, shared discovery drives progress and builds lasting bonds. If this post resonated, a quick nod of appreciation can make all the difference.

Okay