JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札 - ICS MEDIA
OffscreenCanvas（オフスクリーンキャンバス）はWeb Workers（ウェブワーカー）を使用してWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。本記事ではOffscreenCanvasについて機能と使い方を解説します。 ▲ OffscreenCanvasを使用したデモ。OffscreenCanvasを使用すると、Canvasへの描画負荷が高い場合でもスムーズなユーザー操作とCSSアニメーションの再生を実現できる JavaScriptでマルチスレッドに処理を実行できるWeb Workers OffscreenCanvasの説明の前に、まずはWeb Workersについて
Blotter.jsを使ってテキストに「ねじれ効果」を与える方法 - Workship MAGAZINE(ワークシップマガジン)
デモページ ソースダウンロード 近年、テキストにねじれ効果を与えるWebデザインの人気が出てきており、多くの個性的なWebサイトがこの流行を取り入れています。 今回は2つのデモを例に、Blotter.jsライブラリを使ってテキストにねじれ効果を与える方法をご紹介します。 Blotterとはthree.jsとUnderscore.jsを使用したAPIで、アーティスティックなテキスト効果を生み出せるのが特徴です。本記事でご紹介するデモでは、ページをスクロールしたりマウスを動かしたりすることでテキストにねじれ効果が与えられます。 なお今回のデモは、Bounceのプロジェクトから着想を得ました。ページをスクロールすると装飾された文字が変形し、ユニークな視覚効果を演出します。 注意：今回紹介するコードはあくまで実験的なものです。最新のCSSプロパティを使用しているため、古いブラウザは対応していない可
「TensorFlow.js」公開、Webブラウザ上で機械学習の開発、学習、実行が可能に。WebGL経由でGPUも活用
「TensorFlow.js」公開、Webブラウザ上で機械学習の開発、学習、実行が可能に。WebGL経由でGPUも活用 TensorFlow.jsの基となったオリジナルの「TensorFlow」は、Googleが開発しオープンソースとして公開されている機械学習ライブラリです。Windows、Mac、Linuxなどに対応し、Python、C＋＋、Java、Goなどに対応したAPIを備えています。 今回発表されたTensorFlow.jsはそのJavaScript版で、Webブラウザ上で実行可能。TensforFlow.jsのAPIはオリジナルTensorFlowのPython APIのすべてをサポートしているわけではありませんが、似た設計となっており、機械学習のモデルの構築、学習、学習済みモデルの実行が可能なほか、学習済みモデルのインポートも可能。 WebGLを通じてGPUを利用した処理の高
WebGLStudio
3D Development environment for the web. WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser. It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app. Try WebGLStudio.js Example Source on GitHub Documentation Learn or you can use the latest version (more features and more bugs)
Unity 5 x WebGL について詳しく調べてみた - 凹みTips
はじめに 本エントリは Unity Advent Calendar 2014 8日目の記事になります。 Unity 5 からは Build ターゲットに WebGL が追加されます。Unity 5 プリオーダ向けベータ版で現在試すことが出来ます。 Unity 2020.2b - Unity 今年の 3/18 に行われた GDC2014 で Unity 5 が発表されたタイミングで WebGL 対応が発表されました。日本でも 4/7、8 で行われた Unite 2014 においても WebGL についての講演があり、その動画や講演資料を公式サイトから閲覧することが出来ます。 http://japan.unity3d.com/blog/press/unity5 http://japan.unity3d.com/unite/unite2014/schedule Unity と Web デプロイメ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
voodoojs.com - このウェブサイトは販売用です！ - voodoojs リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
FlashVHtml – Home
Understanding the Pros and Cons of Flash and HTML in Modern Web Development For many years, two of the most commonly utilized and well-liked online technologies have been Flash and HTML. Although they are both necessary tools for producing dynamic and interactive web content, their methods and capacities differ greatly. This essay will look at the main distinctions between HTML and Flash as well a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://bashooka.com/coding/javascript-liquid-animation-effect-libraries/
» Extremely cool javaScript (from c++ source) that simulates liquid in your browser | dwaves.de
Hackery, Math & Design — Acko.net
Loop Waveform Visualizer
WebGL and Three.js