From 45ddf0f9f4ae7b66040af88146242163f6c168bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20D=C3=BCrrenberger?= Date: Sun, 8 Aug 2021 17:32:13 +0200 Subject: [PATCH] Add SFML to the framework list --- 04/README-de.md | 2 +- 04/README-fa.md | 2 +- 04/README-fr.md | 2 +- 04/README-id.md | 2 +- 04/README-it.md | 2 +- 04/README-jp.md | 2 +- 04/README-pt.md | 2 +- 04/README-ru.md | 2 +- 04/README-vi.md | 2 +- 04/README.md | 5 ++--- 04/sfml/CMakeLists.txt | 20 ++++++++++++++++++ 04/sfml/data/shader.frag | 12 +++++++++++ 04/sfml/src/main.cpp | 45 ++++++++++++++++++++++++++++++++++++++++ 13 files changed, 88 insertions(+), 12 deletions(-) create mode 100644 04/sfml/CMakeLists.txt create mode 100644 04/sfml/data/shader.frag create mode 100644 04/sfml/src/main.cpp diff --git a/04/README-de.md b/04/README-de.md index aa0ecfd4..ae5768bc 100644 --- a/04/README-de.md +++ b/04/README-de.md @@ -34,7 +34,7 @@ Wenn Du lieber offline statt online mit [SublimeText](https://www.sublimetext.co ## Ausführen von Shadern in Deiner bevorzugten Umgebung -Falls Du bereits Erfahrung mit der Programmierung in einer Umgebung wie [Processing](https://processing.org/), [three.js](http://threejs.org/) oder [OpenFrameworks](http://openframeworks.cc/) gesammelt hast, möchtest Du Deine Shader vielleicht in dieser Umgebung ausführen lassen. Die folgenden Codebeispiele zeigen Dir, wie man Shader unter Verwendung der gleichen Uniforms, die wir in diesem Buch verwenden, in diesen Umgebungen ausführen kann. (In der [GitHub-Ablage dieses Kapitels](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04) findest Du den gesamten Sourcecode für die Einbindung von Shadern unter den drei genannten Umgebungen.) +Falls Du bereits Erfahrung mit der Programmierung in einer Umgebung wie [Processing](https://processing.org/), [three.js](http://threejs.org/), [OpenFrameworks](http://openframeworks.cc/) oder [SFML](https://www.sfml-dev.org/) gesammelt hast, möchtest Du Deine Shader vielleicht in dieser Umgebung ausführen lassen. Die folgenden Codebeispiele zeigen Dir, wie man Shader unter Verwendung der gleichen Uniforms, die wir in diesem Buch verwenden, in diesen Umgebungen ausführen kann. (In der [GitHub-Ablage dieses Kapitels](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04) findest Du den gesamten Sourcecode für die Einbindung von Shadern unter den drei genannten Umgebungen.) ### Ausführung unter **three.js** diff --git a/04/README-fa.md b/04/README-fa.md index ae3f2aa3..6135f041 100644 --- a/04/README-fa.md +++ b/04/README-fa.md @@ -35,7 +35,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput ![](glslGallery.gif) ## اجرا کردن شیدر هایتان در فریمورک ها دلخواهتان -اگر تجربه کار با فریمورک هایی مثل: [Processing](https://processing.org/), [Three.js](http://threejs.org/) یا [OpenFrameworks](http://openframeworks.cc/) دارید, برای استفاده از آن ها برای شیدر نویسی هم هیجان زده خواهید شد. در ادامه نمونه هایی از چگونگی تنطیم فریمورک ها برای اجرای شیدر ها با همان چارچوب گفته شده در ان کتاب می‌پردازم. (در [GitHub repository for this chapter](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04) ,سورس کد کامل برای استفاده از این سه فریمورک را می‌یابید.) +اگر تجربه کار با فریمورک هایی مثل: [Processing](https://processing.org/), [Three.js](http://threejs.org/),[OpenFrameworks](http://openframeworks.cc/) یا [SFML](https://www.sfml-dev.org/) دارید, برای استفاده از آن ها برای شیدر نویسی هم هیجان زده خواهید شد. در ادامه نمونه هایی از چگونگی تنطیم فریمورک ها برای اجرای شیدر ها با همان چارچوب گفته شده در ان کتاب می‌پردازم. (در [GitHub repository for this chapter](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04) ,سورس کد کامل برای استفاده از این سه فریمورک را می‌یابید.) ### در **Three.js** diff --git a/04/README-fr.md b/04/README-fr.md index 09b280b8..80ec59bf 100644 --- a/04/README-fr.md +++ b/04/README-fr.md @@ -48,7 +48,7 @@ Il s'appelle [glslGallery](https://github.com/patriciogonzalezvivo/glslGallery), ## Lancer vos shaders depuis votre plateforme favorite -Si vous avez déjà programmé à l'aide de frameworks/APIs comme : [Processing](https://processing.org/), [Three.js](http://threejs.org/) ou [OpenFrameworks](http://openframeworks.cc/), +Si vous avez déjà programmé à l'aide de frameworks/APIs comme : [Processing](https://processing.org/), [Three.js](http://threejs.org/), [OpenFrameworks](http://openframeworks.cc/) ou [SFML](https://www.sfml-dev.org/), vous êtes sans doute impatients de tester vos shaders dans ces environnements. Les exemples suivants montrent comment intégrer les shaders sur ces plateformes en conservant les conventions de nommage que nous utiliserons dans ce livre. Vous retrouverez le code source complet sur le [dépôt GitHub de ce chapitre](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04). diff --git a/04/README-id.md b/04/README-id.md index ca9a83cf..3479af67 100644 --- a/04/README-id.md +++ b/04/README-id.md @@ -35,7 +35,7 @@ Jika anda memilih untuk mengerjakannya offline menggunakan [SublimeText](https:/ ## Menjalankan Shader pada Framework Favoritmu -Dalam kasus kamu mempunyai pengalaman dalam pemrograman pada framework seperti: [Processing](https://processing.org/), [Three.js](http://threejs.org/) or [OpenFrameworks](http://openframeworks.cc/), anda mungkin tertarik untuk mencoba shader pada platform yang nyaman bagi anda. Contoh berikut adalah cara untuk menyetel shader pada beberapa framework terkenal denggan uniform yang sama yag akan kita gunakan di seluruh buku ini, (Dalan [Repositori Bithub Bab ini](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), anda akan menemukan kode sumber lengkap untuk 3 framework ini). +Dalam kasus kamu mempunyai pengalaman dalam pemrograman pada framework seperti: [Processing](https://processing.org/), [Three.js](http://threejs.org/), [OpenFrameworks](http://openframeworks.cc/) or [SFML](https://www.sfml-dev.org/), anda mungkin tertarik untuk mencoba shader pada platform yang nyaman bagi anda. Contoh berikut adalah cara untuk menyetel shader pada beberapa framework terkenal denggan uniform yang sama yag akan kita gunakan di seluruh buku ini, (Dalan [Repositori Bithub Bab ini](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), anda akan menemukan kode sumber lengkap untuk 3 framework ini). ### Dan **Three.js** diff --git a/04/README-it.md b/04/README-it.md index ac0ede7f..04dde885 100644 --- a/04/README-it.md +++ b/04/README-it.md @@ -34,7 +34,7 @@ Se si preferisce lavorare offline utilizzando [SublimeText](https://www.sublimet ## Eseguire i vostri shader nel vostro framework preferito -Nel caso in cui si dispone già di esperienze di programmazione in framework quali: [Processing](https://processing.org/), [Three.js](http://threejs.org/) o [OpenFrameworks](http://openframeworks.cc/), probabilmente sarete ansiosi di provare gli shader sulle piattaforme su cui vi trovate bene. I seguenti sono esempi di come impostare gli shader in alcuni dei framework più popolari con le stesse uniforms che andremo ad utilizzare in questo libro. (Nella [repository GitHub per questo capitolo](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), troverete il codice sorgente completo per questi tre framework.) +Nel caso in cui si dispone già di esperienze di programmazione in framework quali: [Processing](https://processing.org/), [Three.js](http://threejs.org/), [OpenFrameworks](http://openframeworks.cc/) o [SFML](https://www.sfml-dev.org/), probabilmente sarete ansiosi di provare gli shader sulle piattaforme su cui vi trovate bene. I seguenti sono esempi di come impostare gli shader in alcuni dei framework più popolari con le stesse uniforms che andremo ad utilizzare in questo libro. (Nella [repository GitHub per questo capitolo](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), troverete il codice sorgente completo per questi tre framework.) ### In **Three.js** diff --git a/04/README-jp.md b/04/README-jp.md index 9fa188cf..675e19e1 100644 --- a/04/README-jp.md +++ b/04/README-jp.md @@ -36,7 +36,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput ## 好みのフレームワークでシェーダーを実行する -もし[Processing](https://processing.org/)、[Three.js](http://threejs.org/) 、[OpenFrameworks](http://openframeworks.cc/)などのフレームワークを使ったブログラミングの経験があるならば、慣れ親しんだ環境でシェーダーを試してみたいと思うでしょう。下記では人気のあるこれらのフレームワークで、この本で紹介するシェーダーを実行できるように設定する方法をお見せします（この本の[GitHubのリポジトリ](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04)にはこれら3つのフレームワークのためのソースコードが丸ごと置いてあります）。 +もし[Processing](https://processing.org/)、[Three.js](http://threejs.org/)、[OpenFrameworks](http://openframeworks.cc/) 、[SFML](https://www.sfml-dev.org/)などのフレームワークを使ったブログラミングの経験があるならば、慣れ親しんだ環境でシェーダーを試してみたいと思うでしょう。下記では人気のあるこれらのフレームワークで、この本で紹介するシェーダーを実行できるように設定する方法をお見せします（この本の[GitHubのリポジトリ](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04)にはこれら3つのフレームワークのためのソースコードが丸ごと置いてあります）。 ### **Three.js**を使う diff --git a/04/README-pt.md b/04/README-pt.md index cc7bf77f..5d4815b3 100644 --- a/04/README-pt.md +++ b/04/README-pt.md @@ -34,7 +34,7 @@ Se você prefere trabalhar offline usando o [SublimeText](https://www.sublimetex ## Rodando seus shaders em seu framework favorito -Para o caso de você já ter experiência em programar em um framework como [Processing](https://processing.org/), [Three.js](http://threejs.org/) ou [OpenFrameworks](http://openframeworks.cc/), você provavelmente está animado para tentar os shaders nessas plataformas que você se sente confortável. Os exemplos a seguir são formas de como configurar os shaders em alguns frameworks populares com os mesmos uniforms que vamos usar ao longo desse livro. (No [Repositório GitHub para esse capítulo](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), você encontra o código completo para esses três frameworks.) +Para o caso de você já ter experiência em programar em um framework como [Processing](https://processing.org/), [Three.js](http://threejs.org/), [OpenFrameworks](http://openframeworks.cc/) ou [SFML](https://www.sfml-dev.org/), você provavelmente está animado para tentar os shaders nessas plataformas que você se sente confortável. Os exemplos a seguir são formas de como configurar os shaders em alguns frameworks populares com os mesmos uniforms que vamos usar ao longo desse livro. (No [Repositório GitHub para esse capítulo](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), você encontra o código completo para esses três frameworks.) ### Em **Three.js** diff --git a/04/README-ru.md b/04/README-ru.md index f42381cf..34c17f4e 100644 --- a/04/README-ru.md +++ b/04/README-ru.md @@ -34,7 +34,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput ## Запуск шейдера в вашем любимом фреймворке -Если у вас уже есть опыт программирования на таких фреймворках, как [Processing](https://processing.org/), [Three.js](http://threejs.org/) или [OpenFrameworks](http://openframeworks.cc/), вы можете попробовать шейдеры прямо в них. Ниже показаны способы установки используемых в книге uniform-переменных на некоторых популярных фреймворках. В [репозитории](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04) этой главы на Гитхабе вы найдёте полный исходный код для этих трёх фреймворков. +Если у вас уже есть опыт программирования на таких фреймворках, как [Processing](https://processing.org/), [Three.js](http://threejs.org/), [OpenFrameworks](http://openframeworks.cc/) или [SFML](https://www.sfml-dev.org/), вы можете попробовать шейдеры прямо в них. Ниже показаны способы установки используемых в книге uniform-переменных на некоторых популярных фреймворках. В [репозитории](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04) этой главы на Гитхабе вы найдёте полный исходный код для этих трёх фреймворков. ### **Three.js** diff --git a/04/README-vi.md b/04/README-vi.md index 835711de..9cbaca58 100644 --- a/04/README-vi.md +++ b/04/README-vi.md @@ -36,7 +36,7 @@ Nếu bạn thích làm việc offline bằng [SublimeText](https://www.sublimet ## Chạy shader trên framework yêu thích -Trong trường hợp bạn đã có kinh nghiệm lập trình với các framework như: [Processing](https://processing.org/), [Three.js](http://threejs.org/) hay [OpenFrameworks](http://openframeworks.cc/), you có thể sẽ muốn thử shader trên các nền tảng đó. Dưới đây là hướng dẫn sử dụng shader trên các framework phổ biến với các uniform giống như shader được viết trong quyển sách này. (Trong [repository GitHub cho chương này](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), bạn có thể tìm thấy mã nguồn hoàn chỉnh của cả 3 framework này). +Trong trường hợp bạn đã có kinh nghiệm lập trình với các framework như: [Processing](https://processing.org/), [Three.js](http://threejs.org/), [OpenFrameworks](http://openframeworks.cc/) hay [SFML](https://www.sfml-dev.org/), you có thể sẽ muốn thử shader trên các nền tảng đó. Dưới đây là hướng dẫn sử dụng shader trên các framework phổ biến với các uniform giống như shader được viết trong quyển sách này. (Trong [repository GitHub cho chương này](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), bạn có thể tìm thấy mã nguồn hoàn chỉnh của cả 3 framework này). ### Với **Three.js** diff --git a/04/README.md b/04/README.md index 3dde2f23..d46222d3 100644 --- a/04/README.md +++ b/04/README.md @@ -36,7 +36,7 @@ If you prefer to work offline using [SublimeText](https://www.sublimetext.com/) ## Running your shaders on your favorite framework -In case you already have experience programming in a framework like: [Processing](https://processing.org/), [Three.js](http://threejs.org/) or [OpenFrameworks](http://openframeworks.cc/), you're probably excited to try shaders on these platforms you feel comfortable with. The following are examples of how to set shaders in some popular frameworks with the same uniforms that we are going to use throughout this book. (In the [GitHub repository for this chapter](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), you'll find the full source code for these three frameworks.) +In case you already have experience programming in a framework like: [Processing](https://processing.org/), [Three.js](http://threejs.org/), [OpenFrameworks](http://openframeworks.cc/) or [SFML](https://www.sfml-dev.org/), you're probably excited to try shaders on these platforms you feel comfortable with. The following are examples of how to set shaders in some popular frameworks with the same uniforms that we are going to use throughout this book. (In the [GitHub repository for this chapter](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), you'll find the full source code for these three frameworks.) ### In **Three.js** @@ -211,10 +211,9 @@ void ofApp::draw(){ For more information about shaders in openFrameworks go to this [excellent tutorial](http://openframeworks.cc/ofBook/chapters/shaders.html) made by [Joshua Noble](http://thefactoryfactory.com/). - ### In **Blender** -[GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) is an addon that allows you to programatically generate textures using GLSL Shaders and is fully compatible with the rest of the sandboxes on this chapter. How it works: +[GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) is an addon that allows you to programmatically generate textures using GLSL Shaders and is fully compatible with the rest of the sandboxes on this chapter. How it works: 1. Operator Search: `F3` (or `SpaceBar` depending on your setup). Type `GlslTexture` diff --git a/04/sfml/CMakeLists.txt b/04/sfml/CMakeLists.txt new file mode 100644 index 00000000..246f3279 --- /dev/null +++ b/04/sfml/CMakeLists.txt @@ -0,0 +1,20 @@ +cmake_minimum_required(VERSION 3.15) + +project(TheBookOfShaders LANGUAGES CXX) + +set(CMAKE_CXX_STANDARD 17) +set(CMAKE_CXX_EXTENSIONS OFF) +set(CMAKE_CXX_STANDARD_REQUIRED ON) + +find_package(SFML 2.5 COMPONENTS graphics REQUIRED) + +add_executable(TheBookOfShaders + src/main.cpp +) + +target_link_libraries(TheBookOfShaders sfml-graphics) + +install(TARGETS TheBookOfShaders + RUNTIME DESTINATION .) +install(DIRECTORY data + DESTINATION .) \ No newline at end of file diff --git a/04/sfml/data/shader.frag b/04/sfml/data/shader.frag new file mode 100644 index 00000000..04f281fd --- /dev/null +++ b/04/sfml/data/shader.frag @@ -0,0 +1,12 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec3 u_mouse; +uniform float u_time; + +void main() { + vec2 st = gl_FragCoord.st/u_resolution; + gl_FragColor = vec4(st.x,st.y,0.0,1.0); +} \ No newline at end of file diff --git a/04/sfml/src/main.cpp b/04/sfml/src/main.cpp new file mode 100644 index 00000000..5600d778 --- /dev/null +++ b/04/sfml/src/main.cpp @@ -0,0 +1,45 @@ +#include + +#include + +int main() +{ + auto window = sf::RenderWindow{ { 800U, 800U }, "The Book of Shaders" }; + window.setFramerateLimit(144); + + auto clock = sf::Clock{}; + + auto shape = sf::RectangleShape{ sf::Vector2f{ window.getSize() } }; + + auto shader = sf::Shader{}; + if (!shader.loadFromFile("data/shader.frag", sf::Shader::Fragment)) + { + std::cerr << "Couldn't load fragment shader\n"; + return -1; + } + + auto mouse_position = sf::Vector2f{}; + + while (window.isOpen()) + { + for (auto event = sf::Event{}; window.pollEvent(event);) + { + if (event.type == sf::Event::Closed) + { + window.close(); + } + else if (event.type == sf::Event::MouseMoved) + { + mouse_position = window.mapPixelToCoords({ event.mouseMove.x, event.mouseMove.y }); + } + } + + shader.setUniform("u_resolution", sf::Glsl::Vec2{ window.getSize() }); + shader.setUniform("u_mouse", sf::Glsl::Vec2{ mouse_position }); + shader.setUniform("u_time", clock.getElapsedTime().asSeconds()); + + window.clear(); + window.draw(shape, &shader); + window.display(); + } +} \ No newline at end of file