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
UVマッピングについて - のぐそんブログ
UVとはポリゴンにテクスチャを貼るためのテクスチャの座標のことです。 UV座標はX、YのVector2(2次元)の情報となります。 主にテクスチャの特定の位置を表示したい場合などに使用します。 試してみる まずは普通にテクスチャを貼ってみます。 テクスチャ 結果 UVマッピングしてみる 四角形の場合は6面あるので、ポリゴンがが6x2で12個あります。 それぞれのポリゴンに対して、テクスチャのどの位置を表示するか指定していきます。 UV座標を指定する場合のポイントは以下の2つです。 テクスチャ座標の原点は左下になる。 座標は％指定する。 上記の範囲のテクスチャを貼る場合は、下記のように指定します。 let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom =
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
OpenGL ES2.0 入門 基礎編（テクスチャ） - Qiita
前提 『マルチプラットフォームのためのOpenGL ES入門 基礎編―Android/iOS対応グラフィックスプログラミング』 の抜粋メモです。9章の内容。 コードについては断片のみなので、本書を読んでください。 テクスチャ OpenGL ES で扱うことの出来る画像を Texture と呼ぶ。 テクスチャ座標系とUV OpenGL に読み込まれた画像は、その瞬間からテクスチャとして扱われ、テクスチャとしての制限を受ける。OpenGL にアップロードされたピクセル情報は Texel(テクセル) と呼ばれ、明確に区別される。 テクスチャでは画像のX軸に相当する横軸を U軸、縦軸を V軸 と呼ぶ。 OpenGL ES で2Dの座標を扱うときは左下が原点」 OpenGL ES は、画像をVRAMにアップロードした際に、 上下を逆さにして 格納する。 座標は 0.0〜1.0 に丸められる。 「左下
GLSLでフラグメントシェーダーを書く場合のメモ - のぐそんブログ
フラグメントシェーダーを使った描画についてのメモです。 ちなみに頂点シェーダーを考慮すると難易度が高くなって私には理解できなくなるので、一旦下記のツールを使う前提で書いていきます。 http://glslsandbox.com/ gl_FragColorの使い方 gl_FragColorは描画用の組み込み変数なので、定義が不要です。 方はvec4になります。 定義の仕方は下記です。設定する値の型はfloatになります。 //RGBAで設定 gl_FragColor = vec4(0.5,0.5,0.5,0.5); gl_FragCoordの使い方 gl_FragCoordはピクセル座標の組み込み変数です。 型はvec4になります。 //gl_FragCoordを利用して色をしていする float c = gl_FragCoord.x /resolution.x; gl_FragColor
wgld.org | GLSL: GLSL だけでレンダリングする |
GLSL only さて始まりました、GLSL オンリーでレンダリングを行っていこうという本章。第一回目となる今回は、ベースとなる HTML や javascript のパーツを実際に作っていきつつ、必要な最低限の知識を身につけられる内容にしたいと思っています。 そもそも、GLSL だけで描画するってどういうことなの？ というところからのスタートになりますので上級者の方には物足りない内容になるかもしれませんが、ひとつひとつ丁寧に書いていきたいと思います。というのも、けして最初から脅しをかけるわけではないのですが、この手の分野は理解に苦労するような内容が多いように思うからです。 また、あらかじめある程度は 3D プログラミングに関する知識があったほうが確実に有利です。頭の中でロジックを組み立てるためには、優れた 2D や 3D のグラフィック処理に関する予備知識があって困ることはありません。
WebGLにおける画像処理
WebGLでは、画像の加工処理は簡単である。どれくらい簡単か？まずは続きを読んで頂きたい。 この記事は、「WebGLの基本」の続きである。 あらかじめ「WebGLの基本」を読むことをお勧めする。 WebGLで画像を描くには「テクスチャー」を使う必要がある。 WebGLでは、レンダリングする際に「ピクセル」ではなく「クリッピング空間座標」を使用したが、 これと同じように、テクスチャを描く際には「テクスチャ座標」を使用する。 テクスチャ座標は、テクスチャの大きさに関わらず0.0から1.0の数値で指定する。 テクスチャーとテクスチャ座標 長方形を１つだけ描く(WebGLが描くのは、正確には「２つの三角形」であるが)状況を想定すると、 WebGLが描画に必要とするのは「テクスチャーのどの部分が、長方形のどの部分に対応するのか」 という情報である。 頂点シェーダーからフラグメントシェーダーへこの情報
WebGLの仕組み
この記事は「WebGLの基本」の続きである。 WebGLの話を進めるに当たって、WebGLやGPUが、実際には どのように動作しているのかを取り上げようと思う。 始めに押さえておきたいのは「GPUは２つのことをやる」という点である。 １点目は、「頂点データ(頂点座標に限らず、与えられたバッファ上のデータストリーム)」を 「クリップ空間の座標データに変換処理する」こと、 ２点目は、「１つ目の処理の結果」を元に「ピクセルを描画する」ことである。 頂点シェーダーの位置づけと役割 WebGLのコードで、 var primitiveType = gl.TRIANGLES; var offset = 0; var count = 9; gl.drawArrays(primitiveType, offset, count); と書いた場合、それは「９つの頂点データを処理せよ」という意味の、 GPUに対す
日経BOOKプラス｜日本経済新聞出版社
藤井聡太が勝ち続ける理由 藤井聡太 “運命のライバル”永瀬拓矢と王座戦で再戦 9月4日に開幕する第72期王座戦五番勝負は、藤井聡太王座と前王座の永瀬拓矢九段の対戦になりました。『藤井聡太が勝ち続ける理由 王座戦――八冠の先へ』（日本経済新聞社編／日本経済新聞出版）の抜粋から、“運命のライバル”といえる2人の関係性をひもときます。 ビジョナリーが伝えたい「生きるための最高の知恵」 『WIRED』創刊編集長「他の人が考えないような方法で考える」 テクノロジーと人類のポジティブな未来像を示し続けてきたケヴィン・ケリー氏。米SNSでも話題を呼んだ同氏の新刊『生きるための最高の知恵』をもとに、常識を打破する方法とマインドを変え続けることの意義について深掘り。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Liquid Distortion Effects | Demo 1 | Codrops
The Book of Shaders
Distortion Hover Effect | Codrops
The Book of Shaders
Tag: GLSL | Blog | Takumi Hasegawa
