Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team
JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
WebGLと比較して学ぶWebGPU
Webブラウザ向けの低レベルAPI「WebGPU」について、WebGLと比較しながらそのメリットを紹介します。 本記事は、TechFeed Experts Night#5 〜 Web3D,WebXRを語るのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 みなさん、こんにちは。@emadurandalと申します。今回は「WebGLと比較して学ぶWebGPU」と題して発表させていただきます。 私自身の紹介についてですが、私は2015年ごろにWebGLにはじめて触れて、それ以来3Dライブラリ開発をずっとやっています。Rhodoniteというライブラリを開発して、長らくWeb3Dの情報を発信しています。現在は株式会社HIKKYで、WebGLベースのメタ
オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札 - ICS MEDIA
OffscreenCanvas（オフスクリーンキャンバス）はWeb Workers（ウェブワーカー）を使用してWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。本記事ではOffscreenCanvasについて機能と使い方を解説します。 ▲ OffscreenCanvasを使用したデモ。OffscreenCanvasを使用すると、Canvasへの描画負荷が高い場合でもスムーズなユーザー操作とCSSアニメーションの再生を実現できる JavaScriptでマルチスレッドに処理を実行できるWeb Workers OffscreenCanvasの説明の前に、まずはWeb Workersについて
Game by ball 8
[Go to “teaching” in Morimoto Lab] Game by ball 8 ①画素へのアクセス（画像処理） ②メタボール ①は画像処理の基本で、OpenCVのようなライブラリに任せてしまうのではなく、そのような画像処理の中身を理解し、自分で１から実装できるようにしておくのに不可欠です。 ②はCGの手法の一つで、滑らかな境界を作るために用いられます。 今回は簡易版です。 ※この回は講義2コマ分になるかも。 1. 画素の操作による画像処理 画像処理の便利な関数はいくつかProcessingに用意されているが、自分でそのような画像処理を実装する場合を見て行く。 Images and Pixelsという公式チュートリアルの “Pixels, pixels, and more pixels”の一部分を以下で説明する。 ↑画素の実際の並びは上の図のようになっていますが、 画素は
three.jsでマーチングキューブによるメタボール表現を実装してみた (モバイルでも動くよ)｜Takumi HASEGAWA (unshift Inc.)
マーチングキューブはめちゃくちゃざっくりいうと、3次元ボクセルデータをポリゴンデータに変換するものです。8つの隣接したボクセルがつくる立方体を1つの単位 (セルと呼ぶ) として考えます。 各ボクセルは値を持っており、そのボクセル値によってセルの辺上にどのように頂点を配置するかが決まり、その頂点によってポリゴンの面が作られます。 頂点の配置方法は、セルを構成する8つのボクセル値がある閾値 (等面閾値と呼ぶらしい) を超えるか超えないかによって決まります。なので1つのセルに対して2の8乗 = 256通りあります。 これはセル内のポリゴンの張り方を示した図です。15種類ですが、表裏を考えると256通りになります。 セル内に貼るポリゴンの数は最大5枚 (三角形ポリゴンなので頂点数は3)なので、たとえばセルの数が縦50 x 横50 x 奥行き50 の空間でマーチングキューブをする場合、 50 x 5
おまたせ！p5.js 1.0 公開！
原文：Lauren McCarthy 翻訳：Ayato, deconbatch, reona396, takawo（アルファベット順） Puedes leer la versión en español de este artículo aquí. You can read the English version of this post here. Você pode ler a versão em português deste artigo aqui. p5.js のバージョン1.0が公開されました！p5.js はクリエイティブな表現やウェブ上でのコーディングを可能にし、アーティスト、デザイナー、教育者、初心者全てに向けた JavaScript ライブラリです。プロジェクト開始から7年が経ちましたが、Kate Hollenbach が一年前にロードマップを作成してからバージョン 1.
Reactで画像やテキストにWebGLエフェクトをかけるライブラリ作った - マルシテイア
amagiです。先日React用コンポーネントライブラリのREACT-VFXをリリースしました。 REACT-VFXを使うと、画像や動画、テキストにWebGLでエフェクトをかけることが出来ます。 ⚡𝙍𝙀𝘼𝘾𝙏-𝙑𝙁𝙓 released！⚡ I created React components to add WebGL effects to images, videos and plain texts in your app. It also supports animated GIFs...😎 Visit website for details:https://t.co/mlnmExpUVZ#REACTVFX #WebGL #React #Threejs #GLSL pic.twitter.com/uDUQ8MKNcK— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayos
10 Javascript Liquid Animation Effect Libraries – Bashooka
glfx.js An image effects library for JavaScript using WebGL. Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone. Blotter.js A JavaScript API for drawing unconventional text effects on the web. Blotter provides a simple interface for build
Blotter.jsを使ってテキストに「ねじれ効果」を与える方法 - Workship MAGAZINE(ワークシップマガジン)
デモページ ソースダウンロード 近年、テキストにねじれ効果を与えるWebデザインの人気が出てきており、多くの個性的なWebサイトがこの流行を取り入れています。 今回は2つのデモを例に、Blotter.jsライブラリを使ってテキストにねじれ効果を与える方法をご紹介します。 Blotterとはthree.jsとUnderscore.jsを使用したAPIで、アーティスティックなテキスト効果を生み出せるのが特徴です。本記事でご紹介するデモでは、ページをスクロールしたりマウスを動かしたりすることでテキストにねじれ効果が与えられます。 なお今回のデモは、Bounceのプロジェクトから着想を得ました。ページをスクロールすると装飾された文字が変形し、ユニークな視覚効果を演出します。 注意：今回紹介するコードはあくまで実験的なものです。最新のCSSプロパティを使用しているため、古いブラウザは対応していない可
毎日GLSLでアニメーションを作ってる - マルシテイア
最近GLSLやWebGLの世界に入門して、毎日こんなアニメーションを作っている。 4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。 以前から気になっていたBRDG/VRDG方面のイベントらしい。 会場は六本木のSuperdeluxe。出張先のオフィスからも近いので、少し早退して行ってみる事にした。 そこではハードな電子音に合わせて、GLSLやHaskellのライブコーディングによるVJが行われていた。 先週末に開催したチャネル#16 のライブ映像を公開しました。 https://t.co/YgpC3YYC0B #unity3d #tidal #maxmsp #tokyo #BRDG #livecoding #kodelife pic.twitter.com/rWaHodipUA— BRDG / VRDG (@toky
The Book of Shaders
Patricio Gonzalez Vivo、Jen Lowe著 この本はフラグメントシェーダーについてのガイドブックです。難解で複雑なフラグメントシェーダーの世界を、一歩一歩わかりやすくご案内します。 翻訳について この文書はPatricio Gonzalez VivoのThe Book of Shaderの日本語訳です。 技術的な内容はできる限り正確に伝えるように心がけていますが、その他の部分では言葉を補ったり簡略化したり、表現を変えている部分もあります。英語が得意な方はぜひ原文もお読みください。 フィードバックにはgithubのレポジトリをご利用ください。 目次 イントロダクション 初めの一歩 シェーダーとは？ ハロー・ワールド！ ユニフォーム変数 シェーダーを使う アルゴリズムで絵を描く シェイピング関数 色について 形について 二次元行列 パターン Generative desi
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Colorful Fluid by Yuichiroh Arai - Experiments with Google
2Dの流体 (stable fluids) の表現を使ってクリエイティブコーディングをしてみた。｜Takumi HASEGAWA (unshift Inc.)
DIMENSIONAL RIFT
» Extremely cool javaScript (from c++ source) that simulates liquid in your browser | dwaves.de
Graphtoy
GitHub - patriciogonzalezvivo/glslEditor: Simple WebGL Fragment Shader Editor
