How to Create a Sticky Image Effect with Three.js | Codrops
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js. If you recently browsed Awwwards or FWA you might have stumbled upon Ultranoir’s website. An all-round beautifully crafted website, with some amazing WebGL effects. One of which is a sticky effect for images in their project showcase. This tutorial is going to show how to recreate this special e
Liquid Distortion Effects | Codrops
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP. Today we’d like to share an interesting distortion effect with you. The main concept of this demo is to use a displacement map in order to distort an underlying image, giving it different types of effects. To demonstrate the liquid-like transitions between images, we’ve created a slideshow. What a displacement map gene
WebGL Distortion Hover Effects | Codrops
A little library that can be used for creating WebGL powered distortion hover effects using displacement images. Today we’d like to share a little hover effect library with you. The effect goes as follows: when hovering an image, we’ll use a displacement image to transition to another image. Using different displacement images, we can create a variety of looks. The main idea behind this little lib
Patricio Gonzalez Vivo
2021 Memory Studies 2021 Flight Studies: part of The FEN, the first NFT collection on the Tezos market 2019 Hogar: an oportunity to see a bigger picture 2018 Estrellas: a window to the starry sky. 2018 Órbitas: realtime simulation that explores the patterns generated by planets and satellites. 2017 PixelSpirit: one deck of cards for the modern GPU wizard of light 2017 LUNA: together with Jen Lowe
【WebGL / GLSL】「The Book of Shaders」のサンプルを、WebGL APIいじるところから頑張って再現する - Qiita
WebGL勉強中。。 【WebGL / GLSL】デザイナーにモテるためのWebGL入門（概念編） 【WebGL / GLSL】ド文系だけど、行列とかラスタライズとか頑張って理解する 上記の続きです。 概念的な学習を進めていましたが、未だにコードを書いてません。 今回こそ書きます。 「フラグメントシェーダーでお絵かき」したい！ 前回までの学習で、WebGLの仕組みを学びました。 大まかに以下の流れです。 JSで頂点定義。 それをWebGL APIを介してシェーダーへ送る シェーダーが頂点情報を受け取る 座標変換する ラスタライズする（ピクセルへ！） フラグメントシェーダーが色を決定する ディスプレイに表示される 今回は初心者向けとして、6番に特化して学ぼうという記事です。 なんで初心者向けか？それは頂点シェーダーのことを考えなくていいからです。 「3Dモデルの構成要素はポリゴンで。。。」
【WebGL / GLSL】ド文系だけど、行列とかラスタライズとか頑張って理解する - Qiita
まだモテない 前回記事、【WebGL / GLSL】デザイナーにモテるためのWebGL入門（概念編）は多くの方にご覧いただき、とてもモチベーションになりました！ ただ、私はまだ概要をさらっと掴んだだけなので、デザイナーにはまだモテていません。 悲願の「モテ」のために、WebGLをさらに踏み込んで理解しようと思います！ おさらい canvas上にグラフィックが描かれるまでの仕組みは、下記の通りでした。 GLSL（シェーダー）にて、頂点の位置（座標）や色の情報を書く。 JavaScriptのWebGL APIが、GLSLをコンパイルし情報を受け取る。 WebGL APIが、canvasにグラフィックを描く。 これがあんまりにもざっくりしすぎでした。 もう少し詳しく見てみます。 3DCGの基本、「モデル」のはなし モデル？？ 佐々木希？乃木坂46？大園桃子？ 違います。 以下の画像が3Dモデルの
【WebGL / GLSL】デザイナーにモテるためのWebGL入門（概念編） - Qiita
TBS火曜ドラマ「わたし、定時で帰ります」第4話より カワイイデザイナー: 「メインの花火、WebGLですよね！？よく実装したなって。」 冴えないエンジニア: 「え、まあ。。」 視聴者ぼく: 「！！！」 デザイナー: 「こんなのできるエンジニアと組めたらなって、ずっと憧れてたんで♡」 エンジニア: 「...」 視聴者ぼく: 「！！！！！！」 WebGLを勉強すれば何かいいことがありそうだと閃いてしまったので、 全力で勉強しようと思います。 ちなみにドラマ設定同様、自分も広告制作会社のエンジニアです。 そのためクライアントワークにWebGLを使用することを目標としています。 すべてはcanvasからはじまる。 私はAwwwards - Website Awards - Best Web Design Trendsを見るのが大好きです。 ここでsite of the DAYを受賞しているような
Crossroads Slideshow | Codrops
An experimental slideshow with an inclined look, three slide previews and a content view on click. Today we’d like to share an experimental slideshow with you. The main idea is to show three slides of a slideshow that is slightly rotated. The titles of each slide, which serve as a decorative element, overlay the images and are rotated in an opposing angle. This creates an interesting look, especia
three.js+GLSLでかまいたちの夜2風シェーダを作って描画する - Qiita
※この記事は 情報系を勉強する女子大生 Advent Calendar 2017 21日目投稿記事です。 はじめに こんにちはー。 周囲にCGやってるおじさんはいてもJDはいないので、CG布教のために書きました。対象読者層には、プログラミングをやったことがあり、かつ3DCGをあまり触ったことがない人を想定しています。 個人的に、CGの楽しさは紙の上で式を立てて考えながら実装したものがすぐに画面に反映されるところだと思っているので、特に変化がわかりやすいシェーダプログラミングをテーマに記事を書くことにしました。 ただ、ちゃんと理解してシェーダを書くにはまず座標系やアフィン変換などのちょっとめんどくさいお話をしないといけません。今回はその辺の話を一旦カッ飛ばすため、あまり面倒なことを考えなくても書けるシェーダを実装することにします。あんまり高度なことはしていないので、「え、物理ベースレンダリン
Shadertoy BETA
Build and Share your best shaders with the world and get Inspired Latest contributions: "Drawing a circle again bruh" by defnixx 22 minutes ago, "RWMusic toolbox" by RoosterWho 57 minutes ago, "Iridescent Spirals" by anej 57 minutes ago, "vortex knot flow field" by Boogaloo 1 hour ago, "Gaussian-ish airglow approx." by FordPerfect 1 hour ago
The Book of Shaders
Patricio Gonzalez Vivo、Jen Lowe著 この本はフラグメントシェーダーについてのガイドブックです。難解で複雑なフラグメントシェーダーの世界を、一歩一歩わかりやすくご案内します。 翻訳について この文書はPatricio Gonzalez VivoのThe Book of Shaderの日本語訳です。 技術的な内容はできる限り正確に伝えるように心がけていますが、その他の部分では言葉を補ったり簡略化したり、表現を変えている部分もあります。英語が得意な方はぜひ原文もお読みください。 フィードバックにはgithubのレポジトリをご利用ください。 目次 イントロダクション 初めの一歩 シェーダーとは？ ハロー・ワールド！ ユニフォーム変数 シェーダーを使う アルゴリズムで絵を描く シェイピング関数 色について 形について 二次元行列 パターン Generative desi
The Book of Shaders
by Patricio Gonzalez Vivo and Jen Lowe This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Contents About this book Getting started What is a shader? “Hello world!” Uniforms Running your shader Algorithmic drawing Shaping functions Colors Shapes Matrices Patterns Generative designs Random Noise Cellular noise Fractional brownian motion Fractals Image
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（４） - Qiita
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（４）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（３） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などの
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（４） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/69d8c8fecb090420a8404cef8c3d8bf536921a93/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTk0JUVGJUJDJTg5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02Y2NjYjg0ZGFmNjYzNTUxYWQ4NjcwYjNiNDA0ZDc2YQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG94YXMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTlhZjJmN2EwYWU0MmZiNDhmZGIyZjE0NjdjZDI4YmJk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D7c6a4e4ca3f89a617bb68c8098251ab5)
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（３） - Qiita
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（３）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（２） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などの
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（３） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/354e4bf58b3a507753e349da97854fd5b3f377ec/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTkzJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz00YzlhZjRmNTQyNjA4MjZmNDEyYzA4OTE2NTJmMmI4MA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkb3hhcyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGZmYmRmOWY2NWFmYmViZGRmNzVmNTE4MTU0YmE1MDA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Daf8f53988cc967d471b851ff9354d611)
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（２） - Qiita
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（２）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などの
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（２） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5066a659e515df97bd8c6d1272f90f7c041c1c73/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTkyJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1mNmViMGY1YjQzN2QxZmNmZjk4ZGI3MDNlOWE1YmJhMg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkb3hhcyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGZmYmRmOWY2NWFmYmViZGRmNzVmNTE4MTU0YmE1MDA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dc7e0c0ccd2457b03d8f62ff49766565c)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Liquid Distortion Effects | Demo 1 | Codrops
The Book of Shaders
Distortion Hover Effect | Codrops
GLSL Sandboxで図形描画 | enish engineering blog
GLSL Sandbox Gallery