頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

2023/05/19 102 users ウェブデザイン ICS MEDIA 別ウィンドウ 実装 予算

ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コ... 続きを読む

Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介

2021/12/05 130 users ライブラリ three.js 成果 クラス カメラ

こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な... 続きを読む

Next2D | Rendering Engine, NoCode Tool, Underlying Framework.

2021/11/27 110 users Engine Read More

Next2D libraries and tool.Rendering Engine, NoCode Tool, Underlying Framework. PlayerIt is a library that fully supports WebGL, allowing you to create rich, interactive graphics, cross-platform applications, and games without having to deal with browser or device compatibility. read more 続きを読む

最新WebGL通信 〜いまキャッチアップしたいWebGL2・WebGPU・WebXRとは〜 - ICS MEDIA

2019/01/10 53 users ICS MEDIA ブラウザベンダー キャッチ 正式リリース

2011年に仕様が正式リリースされて以来、WebGLは多くのブラウザベンダー、コンテンツ開発コミュニティの手によって普及してきました。本記事では、2019年1月現在のWebGLの現状と周辺技術、そして未来について紹介します。 環境が完全に普及したWebGL 1.0WebGLの最初のバージョンであるWebGL 1.0は、現在ではデスクトップ... 続きを読む

WebGLを使ったマンガビューワを作っている - daiiz

2018/08/19 183 users daiiz マンガビューワ

自炊用マイ・マンガビューワーの話 京都なんか ＃4 御池ビルの前の木々 こんにちは daiizです Nota Inc.でスクボ.iconScrapbox というwikiを作っています 趣味開発では、画像に関するネタで何か作るのが好き tweetを撮る SVG Screenshot QR Screenshot YubiCameraの説明 今日は、3つくらい工夫を施して簡単なマンガビュ... 続きを読む

深層学習用ライブラリを自作して二足歩行を学習させてみた – EL-EMENT blog

2018/06/30 94 users CUDA 二足歩行 ライブラリ ツッコミ 経緯

WebGLとCUDAで動く深層学習用のライブラリを作って深層強化学習 (Deep Deterministic Policy Gradient, DDPG) で二足歩行を学習させました。学習環境の作成にはOimoPhysicsを使いました。 開発の経緯や以下実装方法、学習結果などです。例によって怪しい個所へのツッコミは歓迎です。 >> Open Repository on GitHub これ... 続きを読む

次世代仕様のWebGPUとは？　次期macOSでのOpenGL非推奨化はWebGLに影響をもたらすのか - ICS MEDIA

2018/06/14 74 users WebGPU 次期macOS ICS MEDIA 近況 ウェブ

ICS MEDIA 3D表現 2018/06/14 次世代仕様のWebGPUとは？　次期macOSでのOpenGL非推奨化はWebGLに影響をもたらすのか ウェブの3Dグラフィックスを扱う新しい仕様として、WebGPUが提案されています。広く普及したWebGLがある中で、WebGPUとはどういった目的で生まれようとしているのでしょうか？　本記事ではWebGLとWebGPUの違いと、近況を紹介します... 続きを読む

巨大な地理空間データをサクッと可視化できる、Uber社製オープンソースwebGIS「Kepler.gl」 – GUNMA GIS GEEK

2018/05/31 58 users GUNMA GIS GEEK 地理空間データ 可視化 自社

巨大な地理空間データをサクッと可視化できる、Uber社製オープンソースwebGIS「Kepler.gl」 kepler.gl Uber社では、自社で集めた地理空間データを可視化するためのフレームワーク deck.gl をオープンソースとして公開していますが、deck.glを用いて作成されたwebGIS「Kepler.gl」のver.1.0が公開されました。 webGLに対応したブラウザであれば、サ... 続きを読む

WebGLでレイトレしてゲームを作ってみた - SEGA TECH Blog

2017/06/26 54 users レイトレーシング ドラッグ SEGA TECH Blog

2017 - 06 - 26 WebGLでレイトレしてゲームを作ってみた SEGA Shader WebGL レイトレース レイトレーシング Ray Tracing Tweet すべての色をつなげよう WHOLE MATCH PAZZLE 操作方法 マウスのドラッグ（タッチパネルの場合はスライド）で玉を一列横か縦にスライドさせることが出来ます。 ルール 同じ色同士ですべての玉をつなげると一面クリア... 続きを読む

React VRで始めるお手軽WebVRプログラミング | HTML5Experts.jp

2017/06/23 60 users React VR Facebook GitHub WebVR

連載： React VR (1) React VR というのは、Facebookが開発し、GitHubにてBSDライセンスで公開しているオープンソースのVRアプリケーションフレームワークです。現在のところは、Webブラウザ向けにWebGLとWebVRを使ったVRアプリケーションを作るための様々な仕組みを提供しています。 VRコンテンツは、実行して動いた時の満足感がかなり高いです React VRを... 続きを読む

毎日GLSLでアニメーションを作ってる - マルシテイア

2017/06/08 117 users GLSL マルシテイア チャネル アニメーション 六本木

2017 - 06 - 08 毎日GLSLでアニメーションを作ってる 最近GLSLや WebGL の世界に入門して、毎日こんなアニメーションを作っている。 4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。 以前から気になっていたBRDG/VRDG方面のイベントらしい。 会場は六本木のSuperdeluxe。出張先のオフィスか... 続きを読む

最速のアニメーションライブラリはこれだ!? JSライブラリの性能をDOMとWebGLで徹底検証 - ICS MEDIA

2017/02/21 61 users CPU アニメーション JavaScriptライブラリ 前回

HTML5のアニメーション実装に役立つ様々なJavaScriptライブラリがあります。前回の記事「 ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ 」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。 JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます 。また、パフォーマンスがよければCPU... 続きを読む

[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js | コリス

2016/01/12 60 users コリス GitHub Modernizr canvas CSS

スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub ... 続きを読む

Mozilla の開発した asm.js と WebGL が 1 つの到達点へ達しました：ゲームエンジンである Unity が WebGL によるゲームの完全サポートを開始しました | Mozilla Japan ブログ

2015/12/09 68 users 抄訳 長年 パートナー 米国 Unity

[この記事は、米国 Mozilla の Future Releases Blog に掲載された "Mozilla-pioneered asm.js and WebGL achieve milestone as the Unity game engine provides full support for WebGL titles" の抄訳です]とても良いニュースがあります。長年のパートナーである ... 続きを読む

Adobe、「Flash Professional」の名称を変更　「Animate」に - ITmedia ニュース

2015/12/01 124 users animate ネイティブサポート SVG アドビシステムズ

アドビシステムズは12月1日、Flash制作ソフト「Adobe Flash Professional CC」の名称を「Adobe Animate CC」に変更すると発表した。来年初頭に予定しているアップデートから適用する。 約20年にわたってWebアニメーション制作ツールの標準として利用されてきたが、既にHTML5 CanvasやWebGLのネイティブサポートも果たしている上、SVGなどさまざまな... 続きを読む

【CEDEC 2015】ブラウザゲーム新時代の幕開けか？　”WebGL”が可能にしたブラウザと3DCGの新たな道 [ファミ通app]

2015/08/27 59 users 造詣 幕開け モデリング ファミ通App ウェブブラウザ上

CEDEC2015で実施されたそもそも“WebGL”について造詣の無い人に簡単に説明をすると、WebGLとは”ウェブブラウザ上で3Dグラフィックを表示させることができる標準仕様”のこと。もっと噛み砕いてざっくりと説明をするなら、“JavaScript”のような比較的入門者向けとも言えるプログラミング言語で、Webブラウザ上に3Dグラフィックのモデリングを生成することができるシステム”だ。従来までな... 続きを読む

HTML5 CanvasとWebGLでアイコンフォント集Font Awesomeを扱う方法 – ICS LAB

2015/08/17 55 users ICS LAB HTML5 Canvas 方法

こんにちは、ICS池田です。 「Font Awesome」(フォント・アウェサム)はWebサイトに手軽にアイコンを組み込むことができる無料のフォントセットです。アイコンを画像ではなくテキスト(文字)として表示させることができるため、制作時の手間を軽減させたりページの読み込み時間の短縮に役立ちます。TwitterのCSSフレームワーク「Bootstrap」でも採用されるなど人気のアイコンフォントです... 続きを読む

JavaScript を PNG に圧縮する

2015/05/04 489 users PNG バイト JavaScript 手法 容量制限

JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PN... 続きを読む

東京メトロの運行データから作られたリアルタイムシミュレーションマップ「metrogram3D」 - GIGAZINE

2015/02/26 50 users GIGAZINE 各駅 蜘蛛 路線 代表格

東京にはたくさんの路線が蜘蛛の巣のように張り巡らされており、初めて東京で電車に乗った人からすれば「なんでこんなにたくさんの電車が走っているんだ？」と混乱するのも仕方がないもの。そんな東京を走る電車の代表格である「東京メトロ」の運行データを視覚的に分かるようにしたサイトが「metrogram」、さらにWebGLを使って運行データを3Dで表現することで各駅の「深さ」や位置関係がより分かりやすくなったの... 続きを読む

HTML5 CanvasとWebGLの使い分け―ICS LAB

2015/02/16 166 users CreateJS canvas ICS池田 口頭 スライド

こんにちは、ICS池田です。 2015年2月10日(火)、アドビシステムズ株式会社でCreateJS勉強会 (第5回) が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容も出来る限り記載しました。 なお、前編(CanvasとWebGLの比較)と... 続きを読む

超簡単に3DCGできるJavaScriptライブラリ作った - aikeの日記

2015/01/29 378 users aike 敷居 three.js 四角い箱 違和感

ブラウザでWebGLが使えるようになって3DCG作成はずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。　three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表... 続きを読む

WebGLでPortal Shieldとかを描く - すぎゃーんメモ

2014/12/26 56 users すぎゃー http 練習 知識

JavaScript唐突にWebGLを勉強してみようと思って、練習として作ってみた。http://sugyan-static.herokuapp.com/webgl/portalkey.htmlhttp://sugyan-static.herokuapp.com/webgl/portalshield.html(※WebGL対応ブラウザでご覧ください) WebGLについて全然知識が無かったので、この... 続きを読む

Unity 5 x WebGL について詳しく調べてみた - 凹みTips

2014/12/07 118 users beta Unity 凹みTips 本エントリ Unity 5

2014-12-08 Unity 5 x WebGL について詳しく調べてみた はじめに 本エントリは Unity Advent Calendar 2014 8日目の記事になります。 Unity 5 からは Build ターゲットに WebGL が追加されます。Unity 5 プリオーダ向けベータ版で現在試すことが出来ます。 Unity - Beta - Unity 5.0 今年の 3/18 に行... 続きを読む

【忙しい人向け】JavaScriptで3D物理エンジン動かしてみる (three.js + ammo.js) - Qiita

2014/11/12 58 users Qiita Blender MMD Unity レンダリング

きっかけ Blenderでアペンドミクさん表示したい。Blenderにpmxを読み込みレンダリングまで ↓ Unityでアペンドミクさん動かしたい。MMD4Mecanimを使用してMMDモデルにUnityで踊って頂いてみた。 ↓ WEBブラウザ上でMMD動くの！？MMD on three.js / three.jsで遊んでみる（29） ↓ とりあえずWEBGLと物理エンジン試してみよう　←イマココ... 続きを読む

[JS]エフェクトの美しさがスゴイ！Webページを水面にし、波紋を生み出すスクリプト -jQuery Ripple | コリス

2014/11/05 115 users コリス jQuery GitHub waves 波紋

Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。 それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。 jQuery Ripples Plugin -GitHub ↑ファイルサイズを軽減してます。実際はもっと本物の水面です。 ... 続きを読む