DOCSEARCHbyAlgolia
Submit Docs

Interactive Shader Format (ISF)

website·Indexed 34 days ago

https://docs.isf.video/

A file format for creating video generators and FX plugins based on GLSL and JSON. The documentation covers the ISF specification (version 2.0), including multi-pass shaders, persistent buffers, vertex shaders, audio visualizers, and the process of converting non-ISF GLSL shaders to the ISF format.

Tokens
19.2K
Snippets
80
Records
123
Agent score
62%

What's inside ISF

  1. Overview of Interactive Shader Format (ISF)

    Interactive Shader Format (ISF) is a file format used to create video generators and FX plugins that run on desktop, mobile, and WebGL platforms. It is built on top of GLSL (OpenGL Shading Language) and provides a set of conventions that allow shaders to be reused across different software applications without environment-specific modifications. ISF compositions are typically designed for real-time execution accelerated by the GPU.

  2. Overview of the Interactive Shader Format (ISF) version 2

    The Interactive Shader Format (ISF) version 2 is a specification used to create interactive shaders. It combines JSON for metadata/parameters and GLSL for the shader logic, allowing shaders to be used across various compatible toolsets and editors.

  3. Understand the Interactive Shader Format (ISF)

    ISF (Interactive Shader Format) is a file format that describes a GLSL fragment shader and defines how to execute and interact with it. It consists of a slightly modified GLSL fragment shader preceded by a JSON blob. This JSON blob describes the shader's interface, including the number, names, and types of input/uniform variables, allowing the shader to be used in a generic and modular fashion across different host software.

  4. Understand the anatomy of an ISF composition

    An Interactive Shader Format (ISF) composition is a file (typically with a .fs extension for fragment shaders) divided into two distinct sections: a JSON blob at the top and GLSL code at the bottom. The JSON blob provides metadata and input definitions for the host application, while the GLSL code contains the logic executed on the GPU for every pixel of the output.

  5. Understand Convolution Matrices (Kernels)

    A convolution matrix, or kernel, is a grid of weights (typically 3x3 or 5x5) used to process an image. The output value of a pixel is determined by multiplying the weights of the kernel by the values of the target pixel and its neighbors, then summing the results.

    Key constraints for specific effects:

    • Blur/Sharpen: The sum of all weights should typically be 1.0 to maintain the image's overall brightness.
    • Edge Detection: The sum of all weights typically equals 0.0, which isolates high-contrast areas and sets others to black.

  6. Understand the Interactive Shader Format (ISF) structure

    The Interactive Shader Format (ISF) is a specification that combines GLSL (OpenGL Shading Language) and JSON. It allows developers to create compositions with published controls that can run across various host applications. The GLSL code is executed on the GPU for high-performance rendering on desktop, mobile, and web platforms. An ISF file consists of a JSON metadata block wrapped in a GLSL comment, followed by the GLSL shader code.

  7. Learn GLSL shader development with external resources

    Since ISF (Interactive Shader Format) is based on GLSL, developers can use these community resources to learn shader writing and explore existing examples:

    • The Book Of Shaders: A standard introduction to GLSL for artistic purposes.
    • Fragment Foundry: An interactive walkthrough of basic shader writing concepts.
    • ShaderToy: A popular platform for sharing and discovering shaders.
    • GLSL Sandbox: A sandbox environment for writing and publishing shaders.

  8. Access ISF shader development resources and samples

    To develop shaders that meet the ISF Specification, developers can utilize the following resources:

    • ISF Files Repository: A collection of over 200 generator, transition, and effects shaders available on GitHub. These serve as learning resources or standard assets.
    • ISF Test/Tutorial Filters: A set of simple test files demonstrating basic ISF features.
    • ISF Specification: The full technical specification for developers is hosted on GitHub.
    • The Book of Shaders Glossary: Recommended for further understanding of standard GLSL variables and functions used within ISF.

  9. Create an ISF Image Effect Filter

    To declare a composition as an effect filter that processes incoming image data, you must include an input in the JSON INPUTS array with TYPE set to "image" and NAME set to "inputImage".

    To sample pixels from the input image, use the IMG_NORM_PIXEL() function (or its non-normalized counterpart IMG_PIXEL()) instead of texture2D() or texture2DRect().

    Mac OS Note: Save .fs files to ~/Library/Graphics/ISF to make them available to host applications.

    /*{
	"DESCRIPTION": "demonstrates an invert image filter",
	"CREDIT": "by VIDVOX",
	"ISFVSN": "2.0",
	"CATEGORIES": [
		"TEST-GLSL FX"
	],
	"INPUTS": [
		{
			"NAME": "inputImage",
			"TYPE": "image"
		}
	]
}*/

vec3 invertColor (vec3 c) {
	return 1.0 - c;
}

void main() {
	vec4 srcPixel = IMG_NORM_PIXEL(inputImage, isf_FragNormCoord);
	srcPixel.rgb = invertColor(srcPixel.rgb);
	gl_FragColor = srcPixel;
}

  11. Implement ISF Transitions

    To create an ISF shader that functions as a transition, you must declare three specific inputs:

    1. startImage: An image input for the initial state.
    2. endImage: An image input for the final state.
    3. progress: A normalized float input (0.0 to 1.0) indicating the transition progress.

  12. Manage variable scope in ISF shaders

    Variable scope determines where a value can be accessed within an ISF shader:

    • Uniform Variables: Read-only inputs communicated from the host application. In ISF, these are typically declared in the JSON INPUTS array and are accessible globally throughout the shader.
    • Varying Variables: Interface variables used to pass data between the Vertex Shader and Fragment Shader.
    • Local Variables: Declared inside a function (e.g., main()) and accessible only within that function or specific block (like an if statement).