Что такое шейдер

Шейдер (от англ. shader) в компьютерной графике — это программный модуль, который используется для определения внешнего вида объектов и их поведения в трехмерной графике. Основная задача шейдеров — создание эффектов освещения, цвета, текстурирования и других визуальных аспектов, которые формируют конечное изображение на экране.

В зависимости от их функций, шейдеры делятся на несколько типов:

1. Вершинные шейдеры (Vertex Shaders): Определяют положение вершин в трехмерном пространстве. Они могут также выполнять преобразования координат вершин.
2. Фрагментные шейдеры (Fragment Shaders): Отвечают за определение цвета каждого фрагмента (пикселя) изображения. Они могут управлять такими аспектами, как освещение, текстурирование и т.д.
3. Геометрические шейдеры (Geometry Shaders): Определяют геометрическую форму объектов. Они могут генерировать новые вершины или изменять геометрию объектов.
4. Тесселяционные шейдеры (Tessellation Shaders): Используются для управления уровнем детализации поверхности объектов. Они позволяют более гибко управлять геометрической детализацией в зависимости от расстояния от камеры.

Шейдеры пишутся на специальных языках программирования, таких как GLSL (OpenGL Shading Language) или HLSL (High-Level Shading Language). Они играют ключевую роль в создании реалистичных и интересных визуальных эффектов в компьютерных играх и других приложениях с трехмерной графикой.

В чем разница между шейдером и текстурой

Шейдер и текстура — это два разных концепта в компьютерной графике, и они выполняют разные функции.

Шейдер:

• Определение внешнего вида объектов: Шейдер — это программный модуль, который используется для определения внешнего вида объектов в трехмерной графике. Шейдеры позволяют контролировать процессы отображения, такие как освещение, цвет, тени и другие визуальные эффекты.
• Выполнение на графическом процессоре (GPU): Шейдеры выполняются на графическом процессоре (GPU) и работают параллельно для каждого элемента отображаемой графики (например, вершины, пиксели).

Текстура:

• Изображение или данные: Текстура представляет собой изображение или набор данных, которые применяются к поверхности объекта. Она может содержать цвета, нормали, отражения и другую информацию.
• Применение к геометрии: Текстуры применяются к геометрии объекта с использованием координат текстур. Это позволяет создавать более реалистичные и детализированные визуальные эффекты, такие как текстурирование поверхностей.

Таким образом, шейдеры и текстуры тесно взаимосвязаны, но выполняют разные функции. Шейдеры контролируют внешний вид объектов, а текстуры предоставляют данные, которые используются в этих шейдерах для придания объектам определенных характеристик. Например, текстура может содержать изображение камня, а шейдер может использоваться для создания эффектов освещения и теней на этой поверхности.

Шейдеры в iOS

В iOS 17  стало возможным добавить шейдер к любой View. На платформе шейдеры применяются в контексте OpenGL ES или Metal API. Оба эти API предоставляют инструменты для создания высокопроизводительной графики на устройствах Apple.

В случае использования OpenGL ES:

1. Написание шейдеров: Шейдеры на OpenGL ES пишутся на языке GLSL (OpenGL Shading Language). Вы можете создать файлы с расширением .vert (вершинный шейдер) и .frag (фрагментный шейдер), в которых определены соответствующие шейдеры.
2. Компиляция шейдеров: Шейдеры компилируются во время выполнения программы с использованием API OpenGL ES. Это может включать в себя чтение исходного кода из файлов, компиляцию и проверку ошибок.
3. Создание программы шейдеров: После компиляции вершинного и фрагментного шейдеров они объединяются в программу шейдеров, которая затем используется при рендеринге.
4. Привязка программы шейдеров: Программа шейдеров привязывается к контексту OpenGL ES.
5. Применение шейдеров при рендеринге: В процессе рендеринга, когда нужно отобразить объекты на экране, программа шейдеров активируется, и ее шейдеры выполняются для каждого фрагмента на экране.

В случае использования Metal API:

1. Написание шейдеров: Шейдеры на Metal пишутся на языке Metal Shading Language (MSL). Они могут храниться в отдельных файлах с расширением .metal.
2. Компиляция шейдеров: Шейдеры компилируются во время сборки приложения с использованием инструментов компиляции Metal Shading Language.
3. Создание пайплайна отрисовки (Render Pipeline): В Metal используется понятие Render Pipeline, который включает в себя вершинный и фрагментный шейдеры, а также другие конфигурационные параметры.
4. Применение пайплайна отрисовки при рендеринге: В процессе рендеринга пайплайн отрисовки активируется, и его шейдеры выполняются для отображения графических объектов.

Пример использования шейдера в Swift с Metal включает в себя создание программы шейдеров, настройку пайплайна отрисовки и рендеринг графики. В этом примере создается простой вершинный и фрагментный шейдер, а затем они объединяются в пайплайн отрисовки.

import Metal
import MetalKit

class MetalViewController: UIViewController {
    var device: MTLDevice!
    var metalLayer: CAMetalLayer!
    var pipelineState: MTLRenderPipelineState!
    var commandQueue: MTLCommandQueue!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupMetal()
        setupPipeline()
    }
    
    func setupMetal() {
        device = MTLCreateSystemDefaultDevice()
        metalLayer = CAMetalLayer()
        metalLayer.device = device
        metalLayer.pixelFormat = .bgra8Unorm
        view.layer.addSublayer(metalLayer)
        commandQueue = device.makeCommandQueue()
    }
    
    func setupPipeline() {
        let pipelineDescriptor = MTLRenderPipelineDescriptor()
        pipelineDescriptor.vertexFunction = makeVertexFunction()
        pipelineDescriptor.fragmentFunction = makeFragmentFunction()
        pipelineDescriptor.colorAttachments[0].pixelFormat = .bgra8Unorm
        
        do {
            pipelineState = try device.makeRenderPipelineState(descriptor: pipelineDescriptor)
        } catch {
            fatalError("Error creating pipeline state: \(error)")
        }
    }
    
    func makeVertexFunction() -> MTLFunction {
        let source = """
        using namespace metal;

        struct VertexIn {
            float4 position [[attribute(0)]];
        };

        struct VertexOut {
            float4 position [[position]];
        };

        vertex VertexOut basic_vertex(VertexIn in [[stage_in]]) {
            VertexOut out;
            out.position = in.position;
            return out;
        }
        """
        
        do {
            return try device.makeLibrary(source: source, options: nil).makeFunction(name: "basic_vertex")!
        } catch {
            fatalError("Error creating vertex function: \(error)")
        }
    }
    
    func makeFragmentFunction() -> MTLFunction {
        let source = """
        using namespace metal;

        struct VertexOut {
            float4 position [[position]];
        };

        fragment float4 basic_fragment(VertexOut in [[stage_in]]) {
            return float4(1.0, 0.0, 0.0, 1.0); // Red color
        }
        """
        
        do {
            return try device.makeLibrary(source: source, options: nil).makeFunction(name: "basic_fragment")!
        } catch {
            fatalError("Error creating fragment function: \(error)")
        }
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        metalLayer.frame = view.layer.bounds
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        render()
    }
    
    func render() {
        guard let drawable = metalLayer.nextDrawable() else { return }
        
        let commandBuffer = commandQueue.makeCommandBuffer()
        let renderPassDescriptor = MTLRenderPassDescriptor()
        renderPassDescriptor.colorAttachments[0].texture = drawable.texture
        renderPassDescriptor.colorAttachments[0].loadAction = .clear
        renderPassDescriptor.colorAttachments[0].clearColor = MTLClearColorMake(0.0, 0.0, 0.0, 1.0)
        renderPassDescriptor.colorAttachments[0].storeAction = .store
        
        guard let renderEncoder = commandBuffer?.makeRenderCommandEncoder(descriptor: renderPassDescriptor) else { return }
        
        renderEncoder.setRenderPipelineState(pipelineState)
        
        // Здесь вы можете добавить код для передачи вершин и других данных шейдеру
        
        renderEncoder.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3)
        renderEncoder.endEncoding()
        
        commandBuffer?.present(drawable)
        commandBuffer?.commit()
    }
}

import Metal

import MetalKit

​

class MetalViewController: UIViewController {

    var device: MTLDevice!

    var metalLayer: CAMetalLayer!

    var pipelineState: MTLRenderPipelineState!

    var commandQueue: MTLCommandQueue!

    override func viewDidLoad() {

        super.viewDidLoad()

        setupMetal()

        setupPipeline()

    }

    func setupMetal() {

        device = MTLCreateSystemDefaultDevice()

        metalLayer = CAMetalLayer()

        metalLayer.device = device

        metalLayer.pixelFormat = .bgra8Unorm

        view.layer.addSublayer(metalLayer)

        commandQueue = device.makeCommandQueue()

    }

    func setupPipeline() {

        let pipelineDescriptor = MTLRenderPipelineDescriptor()

        pipelineDescriptor.vertexFunction = makeVertexFunction()

        pipelineDescriptor.fragmentFunction = makeFragmentFunction()

        pipelineDescriptor.colorAttachments[0].pixelFormat = .bgra8Unorm

        do {

            pipelineState = try device.makeRenderPipelineState(descriptor: pipelineDescriptor)

        } catch {

            fatalError("Error creating pipeline state: \(error)")

        }

    }

    func makeVertexFunction() -> MTLFunction {

        let source = """

        using namespace metal;

​

        struct VertexIn {

            float4 position [[attribute(0)]];

        };

​

        struct VertexOut {

            float4 position [[position]];

        };

​

        vertex VertexOut basic_vertex(VertexIn in [[stage_in]]) {

            VertexOut out;

            out.position = in.position;

            return out;

        }

        """

        do {

            return try device.makeLibrary(source: source, options: nil).makeFunction(name: "basic_vertex")!

        } catch {

            fatalError("Error creating vertex function: \(error)")

        }

    }

    func makeFragmentFunction() -> MTLFunction {

        let source = """

        using namespace metal;

​

        struct VertexOut {

            float4 position [[position]];

        };

​

        fragment float4 basic_fragment(VertexOut in [[stage_in]]) {

            return float4(1.0, 0.0, 0.0, 1.0); // Red color

        }

        """

        do {

            return try device.makeLibrary(source: source, options: nil).makeFunction(name: "basic_fragment")!

        } catch {

            fatalError("Error creating fragment function: \(error)")

        }

    }

    override func viewDidLayoutSubviews() {

        super.viewDidLayoutSubviews()

        metalLayer.frame = view.layer.bounds

    }

    override func viewDidAppear(_ animated: Bool) {

        super.viewDidAppear(animated)

        render()

    }

    func render() {

        guard let drawable = metalLayer.nextDrawable() else { return }

        let commandBuffer = commandQueue.makeCommandBuffer()

        let renderPassDescriptor = MTLRenderPassDescriptor()

        renderPassDescriptor.colorAttachments[0].texture = drawable.texture

        renderPassDescriptor.colorAttachments[0].loadAction = .clear

        renderPassDescriptor.colorAttachments[0].clearColor = MTLClearColorMake(0.0, 0.0, 0.0, 1.0)

        renderPassDescriptor.colorAttachments[0].storeAction = .store

        guard let renderEncoder = commandBuffer?.makeRenderCommandEncoder(descriptor: renderPassDescriptor) else { return }

        renderEncoder.setRenderPipelineState(pipelineState)

        // Здесь вы можете добавить код для передачи вершин и других данных шейдеру

        renderEncoder.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3)

        renderEncoder.endEncoding()

        commandBuffer?.present(drawable)

        commandBuffer?.commit()

    }

}

​

Этот пример создает простой Metal-проект с красным треугольником, используя вершинный и фрагментный шейдеры. Вы можете настраивать шейдеры и добавлять передачу данных между вершинами и фрагментами в зависимости от ваших потребностей.

Как шейдеры используются в Android

На платформе Android с использованием языка программирования Kotlin, шейдеры обычно используются в контексте OpenGL ES (в версии 2.0 или выше) или Vulkan API для реализации графики на уровне GPU. Давайте рассмотрим пример использования шейдеров с использованием OpenGL ES.

Прежде всего, убедитесь, что вы добавили необходимые разрешения в файле AndroidManifest.xml для использования OpenGL ES:

<uses-feature android:glEsVersion="0x00020000" android:required="true" />

xxxxxxxxxx

<uses-feature android:glEsVersion="0x00020000" android:required="true" />

​

Затем вам потребуется использовать библиотеку для работы с OpenGL ES в Kotlin/Android. Пример использования библиотеки Android NDK и CMake для этого:

1. Создайте файл CMakeLists.txt в папке app вашего проекта:

cmake_minimum_required(VERSION 3.10.2)

project("YourProjectName")

add_library(native-lib SHARED src/main/cpp/native-lib.cpp)

find_library(log-lib log)

target_link_libraries(native-lib ${log-lib})

xxxxxxxxxx

cmake_minimum_required(VERSION 3.10.2)

​

project("YourProjectName")

​

add_library(native-lib SHARED src/main/cpp/native-lib.cpp)

​

find_library(log-lib log)

​

target_link_libraries(native-lib ${log-lib})

​

2. Создайте файл native-lib.cpp в папке app/src/main/cpp:

#include <jni.h>
#include <string>
#include <GLES2/gl2.h>

extern "C" JNIEXPORT void JNICALL
Java_com_example_yourapp_MainActivity_renderFrame(JNIEnv *env, jobject /* this */) {
    // Шейдеры и код рендеринга будут здесь
}

xxxxxxxxxx

#include <jni.h>

#include <string>

#include <GLES2/gl2.h>

​

extern "C" JNIEXPORT void JNICALL

Java_com_example_yourapp_MainActivity_renderFrame(JNIEnv *env, jobject /* this */) {

    // Шейдеры и код рендеринга будут здесь

}

​

3. В вашей активности (MainActivity), добавьте метод для вызова из кода Kotlin:

external fun renderFrame()

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    override fun onResume() {
        super.onResume()
        renderFrame()
    }

    companion object {
        init {
            System.loadLibrary("native-lib")
        }
    }
}

xxxxxxxxxx

external fun renderFrame()

​

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

    }

​

    override fun onResume() {

        super.onResume()

        renderFrame()

    }

​

    companion object {

        init {

            System.loadLibrary("native-lib")

        }

    }

}

​

4. Теперь вы можете использовать шейдеры в методе renderFrame в native-lib.cpp для создания программы шейдеров, передачи данных и рендеринга графики. Это будет включать в себя работу с OpenGL ES API и написание шейдеров на языке GLSL.

Обратите внимание, что использование OpenGL ES или Vulkan требует знания низкоуровневых графических API, а написание шейдеров требует знания языка GLSL.

Ссылки

• Шейдеры в iOS для начинающих
• Shady: галерея AGSL-шейдеров
• Variablur: размытие для SwiftUI на основе Metal
• Как заставить Flutter глитчевать?