Giter VIP home page Giter VIP logo

glsltoy's Introduction

GLSL Toy

GLSL Toy is a ShaderToy clone meant with more freedoms.

  1. Runs natively ⚡
  2. Works as a live background 🖼️ (Linux only)
  3. Can execute any other code along with GLSL shaders 🤯

Usage

  1. Install dependencies
    • GL, GLFW, GLEW, X11
    • make, cc (for compiling)
    • libpng (for metablobs)
  2. Compile (with make)
    $ make
  3. Run
    ./glsl metablobs

Eye Candy

a.webp b.webp c.webp d.webp

TODO

  • (bring back) compute shader support
  • frame buffer to access previous frame
  • remove all my debug statements
  • cleanup and normalize errors
  • add more examples

Making Shaders

Each shader project is stored independently in a folder.

shader.glsl

This is the only required file: The fragment shader is used to determine each pixel's color.

Here is an example:

// shader.glsl
#version 330 core

out vec4 FragColor;

uniform vec2 resolution;
uniform float time;
uniform vec3 mouse;

void main() {

    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = (vec2(mouse) + vec2(gl_FragCoord)) / resolution;

    // Varying pixel color
    vec3 color;
	color = vec3(uv, 1) * vec3(1, 1, 1) * 0.5 * sin(time) + 0.5;

    // Output to screen
    FragColor = vec4(color, 1.0);

}

Usefull data such as the cursor position can be imported using uniform, here are the default available, a custom tick.so can add or remove these:

  • vec2 resolution - Screen size
  • float time - Time (s) since start
  • vec3 mouse - Mouse x, y and btn

Makefile

The Makefile is responsible for compiling any CPU code to an SO file called tick.so. Although the projects here use c, theoretically any language can be used as long as they export the right tokens.

Here is an example:

# Makefile
tick.so: tick.c
	cc tick.c -o tick.so -shared -lm -lglfw -lGLEW -lGL -O4 -fPIC
// tick.c
#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <stdlib.h>

float x, y;
float xv, yv;

void init(GLFWwindow* window, GLuint shader, int w, int h) {
	// Optional
	// Called on first frame
	x = rand() / (float)RAND_MAX * w;
	y = rand() / (float)RAND_MAX * h;
	xv = 2;
	yv = 2;
}

void tick(GLFWwindow* window, GLuint shader, int w, int h) {
	// Optional
	// Called every frame
	x += xv;
	y += yv;
	if (x < 0) {
		x = 0;
		xv = 2;
	} else if (x > w) {
		x = w;
		xv = -2
	}
	if (y < 0) {
		y = 0;
		yv = 2;
	} else if (y > h) {
		y = h;
		yv = -2;
	}
	// Push data to GPU
	glUniform2f(glGetUniformLocation(shader, "pos"), x, y);
}

glsltoy's People

Contributors

sollybunny avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.