diff --git a/04/README-de.md b/04/README-de.md index aa0ecfd..ae5768b 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 ae3f2aa..6135f04 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 09b280b..80ec59b 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 ca9a83c..3479af6 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 ac0ede7..04dde88 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 9fa188c..675e19e 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 cc7bf77..5d4815b 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 f42381c..34c17f4 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 835711d..9cbaca5 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 3dde2f2..d46222d 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 0000000..246f327 --- /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 0000000..04f281f --- /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 0000000..5600d77 --- /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