glslViewer screenshot update

pull/361/head
Patricio Gonzalez Vivo 3 years ago
parent 26db181c24
commit d76550f41b

@ -15,7 +15,7 @@
اگر مثل من هستنید و دوست دارید مستیقا شیدر هارا را روی کنسول اجرا کنید, در اینضورت باید یک نگاهی به [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) بیاندازید. این برنامه این امکان را به شما می‌دهد که شیدر ها را در روی bash یا unix pipelines به روش مشابه [ImageMagick](http://www.imagemagick.org/script/index.php) استفاده کنید. همچنین [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) یک روش خوب برای کامپایل شیدر روی [Raspberry Pi](https://www.raspberrypi.org/) است, به همین علت [openFrame.io](http://openframe.io/) از آن برای نمایش شیدر ها استفاده می‌کند. درمورد این نرم افزار بیشتر بدانید در [اینجا](https://github.com/patriciogonzalezvivo/glslViewer).
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.png
```
**ساخت**: برای تجربه برنامه نویسی شیدر ها، من یک ویرایشگر آنلاین [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor) ساختم. این ویرایشگر در مثال های این کتاب هم تعبیه شده است, این مجموعه ابزارک های مفیدی را هم فراهم می‌کند تا تجربه کار با کد glsl را ملموس تر کند. همچنین آن را بعنوان یک برنامه وب مستقل هم می‌توانید در [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/) استفاده کنید. اطلاعات بیشتر در [اینجا](https://github.com/patriciogonzalezvivo/glslEditor).

@ -19,7 +19,7 @@ Cette application permet d'incorporer un shader dans un script `bash` ou un pipe
Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslViewer).
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.png
```
**Création** : pour améliorer l'expérience de programmation des shaders, j'ai créé un éditeur disponible ici : [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor).

@ -14,7 +14,7 @@ Seperti yang dapat anda lihat, hanya membutuhkan elemen `kanvas` dengan `class="
Jika anda seperti saya, anda mungkin akan menjalankan shader langsung dari kosol, dalam kasus tersebut anda harus melihat [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Aplikasi ini memperbolehkan anda untuk menggabungkan shader ke skrip `bash` atau pipeline unix dan menggunakannya sama mirip [ImageMagick](http://www.imagemagick.org/script/index.php). [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) juga merupakan cara yang bagus untuk menkompilasi shader pada [Raspberry Pi](https://www.raspberrypi.org/), yang mana merupakan alasan [openFrame.io](http://openframe.io/) menggunakan itu untuk menampilkan artwork shader. Pelajari lebih lanjut tentang aplikasi ini [di sini](https://github.com/patriciogonzalezvivo/glslViewer)
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.png
```
**Membuat**: untuk menerangi pengalaman pengkodean shader, saya membuat editor online bernama [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor). Editor ini disematkan pada contoh langsung buku, ini membawa serangkaian widget praktis untuk membuat pengalaman abstrak bekerja dengan kode glsl lebih nyata. Anda juga dapat menjalankannya sebagai aplikasi web mandiri dari [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/). Pelajari lebih lanjut tentang itu [di sini](https://github.com/patriciogonzalezvivo/glslEditor).

@ -13,7 +13,7 @@ Come potete vedere, è solo necessario l'elemento ```canvas``` con l'attributo `
Se siete come me, probabilmente vorrete eseguire gli shader direttamente dalla console. In questo caso date un'occhiata a [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Questa applicazione consente d'incorporare gli shader nel vostro script ```bash``` o pipelines UNIX e d?utilizzarli in modo simile a [ImageMagick](http://www.imagemagick.org/script/index.php). Anche [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) è un ottimo modo per compilare gli shader sul [Raspberry Pi](https://www.raspberrypi.org/), motivo per il quale [openFrame.io](http://openframe.io/) lo usa per visualizzare le opere d'arte di tipo shader. Potete trovare ulteriori informazioni su questa applicazione [cliccando qui](https://github.com/patriciogonzalezvivo/glslViewer).
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.png
```
**Creare**: per migliorare la programmazione degli shader, ho realizzato un editor online chiamato [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor). Questo editor è integrato agli esempi del libro e mette a disposizione una serie di comodi widget per rendere più tangibile il codice astratto GLSL. È anche possibile eseguirlo come un'applicazione standalone web da [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/). Scoprite di più a proposito [cliccando qui](https://github.com/patriciogonzalezvivo/glslEditor).

@ -13,7 +13,7 @@
もしあなたが私のような人だったら、コンソールから直接シェーダーを走らせたいと思うでしょう。その場合は[glslViewer](https://github.com/patriciogonzalezvivo/glslViewer)を試してみてください。このアプリケーションを利用すると[ImageMagic](http://www.imagemagick.org/script/index.php)を使うのと同じような方法で、シェーダーをbashスクリプトやUNIXパイプラインで使うことができます。[glslViewer](https://github.com/patriciogonzalezvivo/glslViewer)は[RaspberryPi](https://www.raspberrypi.org/)でシェーダーをコンパイルするのにとても便利なので、[openFrame.io](http://openframe.io/)でもglslViewerをシェーダーによる作品の表示に使っています。詳しくは[こちら](https://github.com/patriciogonzalezvivo/glslViewer)をご覧ください。
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.png
```
**作成する**: シェーダーのコーディングを簡単にするため、[glslEditor](https://github.com/patriciogonzalezvivo/glslEditor)というオンラインのエディターを用意しました。このエディターはこの本のサンプルにも埋め込まれています。glslEditorには幾つもの便利なウィジェットが備わっていて、直接触って具体的に結果を見ることで、抽象的なglslのコーディングをより理解しやすくしてくれます。[editor.thebookofshaders.com/](http://editor.thebookofshaders.com/)から単体で使うこともできます。詳しくは[こちら](https://github.com/patriciogonzalezvivo/glslEditor)をご覧ください。

@ -13,7 +13,7 @@ Como você pode ver, só precisa de um elemento `canvas` com `class="glslCanvas"
Se você é como eu, provavelmente vai querer rodar shaders diretamente da console, e nesse caso você deveria dar uma olhada no [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Esta aplicação lhe permite incorporar shaders em seus scripts `bash` ou pipelines do unix e usá-los de modo similiar ao [ImageMagick](http://www.imagemagick.org/script/index.php). Também, o [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) é uma boa forma de compilar shaders no seu [Raspberry Pi](https://www.raspberrypi.org/), razão pela qual o [openFrame.io](http://openframe.io/) o utiliza para exibir artes em shader. Aprenda mais sobre essa aplicação [aqui](https://github.com/patriciogonzalezvivo/glslViewer).
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.png
```
**Criar**: de modo a trazer mais luz para a experiência de codificação de shaders, eu fiz um editor online chamado [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor). Este editor está embutido nos exemplos ao vivo do livro, e traz uma série de widgets bem convenientes para tornar mais tangível a experiência abstrata de trabalhar com código GLSL. Você também pode executá-lo como uma aplicação web standalone no endereço [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/). Saiba mais sobre isso [aqui](https://github.com/patriciogonzalezvivo/glslEditor).

@ -13,7 +13,7 @@
Если вы разделяете мой подход к разработке, вам возможно захочется запускать шейдеры напрямую из консоли, в чём вам поможет [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Это приложение позволяет встраивать шейдеры в `bash`-скрипты или конвейер unix, и может использоваться по аналогии с [ImageMagick](http://www.imagemagick.org/script/index.php). Так же, [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) - отличный способ скомпилировать шейдеры на [Raspberry Pi](https://www.raspberrypi.org/), и поэтому он используется на [openFrame.io](http://openframe.io/) для демонстрации шейдеров. Подробнее с этим приложением можно познакомиться [здесь](https://github.com/patriciogonzalezvivo/glslViewer).
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.png
```
**Создание**: чтобы сделать опыт создания шейдеров более ярким, я сделал онлайн-редактор [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor). Этот редактор используется для демонстрации интерактивных примеров в книге и предоставляет набор виджетов, делающих абстрактный код на GLSL более осязаемым. Его так же можно запустить в отдельном веб-приложении по адресу [editor.thebookofshaders.com](http://editor.thebookofshaders.com/). Подробнее о редакторе [здесь](https://github.com/patriciogonzalezvivo/glslEditor).

@ -15,7 +15,7 @@ Như bạn thấy, chỉ cần một thẻ `canvas` với `class="glslCanvas"` v
Nếu bạn giống tôi, bạn có thể sẽ muốn preview shader ngay trong console, và trong trường hợp thì bạn nên ngó qua [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Ứng dụng này cho phép bạn kết hợp shader với script `bash` hay bất kỳ công cụ dòng lệnh nào của Unix giống như cách mà [ImageMagick](http://www.imagemagick.org/script/index.php) hoạt động. Ngoài ra [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) cũng là một cách hay để biên dịch shader trên [Raspberry Pi](https://www.raspberrypi.org/), cũng chính là lí do mà [openFrame.io](http://openframe.io/) dùng nó để preview shader. Tìm hiểu thêm về công cụ này tại [đây](https://github.com/patriciogonzalezvivo/glslViewer).
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.png
```
**Viết shader**: để chia sẻ kinh nghiệm code shader, tôi đã tạo một editor online gọi là [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor). Editor này được nhúng vào các ví dụ trong quyển sách này, nó bổ sung các widget rất tiện cho việc viết code GLSL. Bạn cũng có thể chạy riêng nó như một ứng dụng web ở [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/). Tìm hiểu thêm tại [đây](https://github.com/patriciogonzalezvivo/glslEditor).

@ -15,7 +15,7 @@ As you can see, it just needs a `canvas` element with `class="glslCanvas"` and t
If you are like me, you will probably want to run shaders directly from the console, in that case you should check out [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). This application allows you to incorporate shaders into your `bash` scripts or unix pipelines and use it in a similar way to [ImageMagick](http://www.imagemagick.org/script/index.php). Also [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) is a great way to compile shaders on your [Raspberry Pi](https://www.raspberrypi.org/), which is the reason [openFrame.io](http://openframe.io/) uses it to display shader artwork. Learn more about this application [here](https://github.com/patriciogonzalezvivo/glslViewer).
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.png
```
**Create**: in order to illuminate the experience of coding shaders I made an online editor called [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor). This editor is embedded on the book's live examples, it brings a series of handy widgets to make more tangible the abstract experience of working with glsl code. You can also run it as a standalone web application from [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/). Learn more about it [here](https://github.com/patriciogonzalezvivo/glslEditor).

@ -1,156 +0,0 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
float random (in float x) { return fract(sin(x)*1e4);}
float random (in vec2 st) { return fract(1e4 * sin(17.0 * st.x + st.y * 0.1) * (0.1 + abs(sin(st.y * 13.0 + st.x)))); }
float binChar (vec2 ipos, float n) {
float remain = mod(n,33554432.);
for (float i = 0.0; i < 15.0; i++) {
if ( floor(i/3.) == ipos.y && mod(i,3.) == ipos.x ) {
return step(1.0,mod(remain,2.));
}
remain = ceil(remain/2.);
}
return 0.0;
}
float char (vec2 st, float n) {
st.x = st.x*2.-0.5;
st.y = st.y*1.2-0.1;
vec2 grid = vec2(3.,5.);
vec2 ipos = floor(st*grid);
vec2 fpos = fract(st*grid);
n = floor(mod(n,10.));
float digit = 0.0;
if (n < 1. ) { digit = 31600.; }
else if (n < 2. ) { digit = 9363.0; }
else if (n < 3. ) { digit = 31184.0; }
else if (n < 4. ) { digit = 31208.0; }
else if (n < 5. ) { digit = 23525.0; }
else if (n < 6. ) { digit = 29672.0; }
else if (n < 7. ) { digit = 29680.0; }
else if (n < 8. ) { digit = 31013.0; }
else if (n < 9. ) { digit = 31728.0; }
else if (n < 10. ) { digit = 31717.0; }
float pct = binChar(ipos, digit);
vec2 borders = vec2(1.);
// borders *= step(0.01,fpos.x) * step(0.01,fpos.y); // inner
borders *= step(0.0,st)*step(0.0,1.-st); // outer
return step(.5,1.0-pct) * borders.x * borders.y;
}
float binBar (vec2 ipos, float n) {
float remain = mod(n,128.);
for(float i = 0.0; i < 8.0; i++){
if ( mod(i,10.) == ipos.x ) {
return step(1.0,mod(remain,2.));
}
remain = ceil(remain/2.);
}
return 0.0;
}
// Standard UPC-E Barcode reference from
// https://en.wikipedia.org/wiki/Universal_Product_Code
float bar (vec2 st, float n, bool L) {
vec2 grid = vec2(7.,1.);
if (L) { st = 1.0-st; }
vec2 ipos = floor(st*grid);
vec2 fpos = fract(st*grid);
n = floor(mod(n,10.));
float digit = 0.0;
if (n < 1. ) { digit = 114.; }
else if (n < 2. ) { digit = 102.0; }
else if (n < 3. ) { digit = 108.0; }
else if (n < 4. ) { digit = 66.0; }
else if (n < 5. ) { digit = 92.0; }
else if (n < 6. ) { digit = 78.0; }
else if (n < 7. ) { digit = 80.0; }
else if (n < 8. ) { digit = 68.0; }
else if (n < 9. ) { digit = 72.0; }
else if (n < 10. ) { digit = 116.0; }
float pct = binBar(ipos, digit+1.);
if (L) { pct = 1.-pct; }
return step(.5,pct);
}
float bar (vec2 st, float n) {
return bar(st,n,true);
}
float barStart (vec2 st) {
vec2 grid = vec2(7.,1.);
vec2 ipos = floor((1.0-st)*grid);
float digit = 122.0;
float pct = binBar(ipos, digit+1.);
return step(.5,1.0-pct);
}
float barEnd(vec2 st) {
vec2 grid = vec2(7.,1.);
vec2 ipos = floor((1.0-st)*grid);
float digit = 85.0;
float pct = binBar(ipos, digit+1.);
return step(.5,1.0-pct);
}
float barCode(vec2 st, float rows, float value) {
rows = ceil(rows);
vec2 ipos = floor(st*rows);
vec2 fpos = fract(st*rows);
value = value*pow(10.,ipos.x)*0.0000000001+0.1;
if (ipos.x == 0.0 ) {
return barStart(fpos);
} else if (ipos.x == rows-1.) {
return barEnd(fpos);
} else {
if (ipos.y == 0.0) {
return 1.0-char(fpos,value);
} else {
return bar(fpos,value);
}
}
}
void main(){
vec2 st = gl_FragCoord.st/u_resolution.xy;
st *= 3.;
vec2 ipos = floor(st);
vec2 fpos = fract(st);
fpos.y *= u_resolution.y/u_resolution.x;
vec3 color = vec3(0.0);
if (ipos.x == 1. && ipos.y == 1.) {
float value = 0.0;
// value = 123456789.0;
value += floor(u_time);
value = random(floor(u_time*10.))*1000000000.;
color += barCode(fpos,12.,value);
} else {
color += 1.;
}
gl_FragColor = vec4( color , 1.0);
}

@ -1,69 +0,0 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
float random (in float x) { return fract(sin(x)*1e4);}
float random (in vec2 st){ return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453); }
float bin(vec2 ipos, float n){
float remain = mod(n,33554432.);
for(float i = 0.0; i < 25.0; i++){
if ( floor(i/3.) == ipos.y && mod(i,3.) == ipos.x ) {
return step(1.0,mod(remain,2.));
}
remain = ceil(remain/2.);
}
return 0.0;
}
float char(vec2 st, float n){
st.x = st.x*2.-0.5;
st.y = st.y*1.2-0.1;
vec2 grid = vec2(3.,5.);
vec2 ipos = floor(st*grid);
vec2 fpos = fract(st*grid);
n = floor(mod(n,10.));
float digit = 0.0;
if (n < 1. ) { digit = 31600.; }
else if (n < 2. ) { digit = 9363.0; }
else if (n < 3. ) { digit = 31184.0; }
else if (n < 4. ) { digit = 31208.0; }
else if (n < 5. ) { digit = 23525.0; }
else if (n < 6. ) { digit = 29672.0; }
else if (n < 7. ) { digit = 29680.0; }
else if (n < 8. ) { digit = 31013.0; }
else if (n < 9. ) { digit = 31728.0; }
else if (n < 10. ) { digit = 31717.0; }
float pct = bin(ipos, digit);
vec2 borders = vec2(1.);
// borders *= step(0.01,fpos.x) * step(0.01,fpos.y); // inner
borders *= step(0.0,st)*step(0.0,1.-st); // outer
return step(.5,1.0-pct) * borders.x * borders.y;
}
void main(){
vec2 st = gl_FragCoord.st/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
float rows = 34.0;
vec2 ipos = floor(st*rows);
vec2 fpos = fract(st*rows);
ipos += vec2(0.,floor(u_time*20.*random(ipos.x+1.)));
float pct = random(ipos);
vec3 color = vec3(char(fpos,100.*pct));
color = mix(color,vec3(color.r,0.,0.),step(.99,pct));
gl_FragColor = vec4( color , 1.0);
}
Loading…
Cancel
Save