タグ

JavaScriptと3dに関するfield_combatのブックマーク (12)

  • Three.jsでオフスクリーンキャンバスを使う - ICS MEDIA

    オフスクリーンキャンバスはWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。具体的には、canvasの描画処理が大きかった場合にオフスクリーンキャンバスを使うと、ボタンクリック時の反応やCSSアニメーションが滑らかになるでしょう。 Three.jsでもオフスクリーンキャンバスを利用できます。複雑なことをしなければ難しくなく、通常のThree.jsのコードに少しの実装を追加するだけで実現できます。 オフスクリーンキャンバスの機能については、記事「オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札」で詳しく解説しています。この解説を読み進める

    Three.jsでオフスクリーンキャンバスを使う - ICS MEDIA
  • Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita

    はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはこちら サンプルコードはこちら 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版(ShapeFile)を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国(又は府省等)が作成したかのような態様で公表・利用してはいけません。(コンテンツを編集・加工等して利用する場合の記載例)「新宿駅周辺屋内地図データ」(国土交通省)(https://www.geospatial.jp/ckan/dataset/mlit-i

    Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita
  • Shadertoy はじめました - Qiita

    https://www.shadertoy.com/view/MtGSWc (※音が出ます) Shadertoy 楽しいデスネ! 去年(2016)末、javascript でも SiON みたいなソフトウェアシンセを作れないかなと思って GPGPU シンセサイザについて下調べをしていました。その際 Shadertoy が GPU による音生成に対応している事を知り、裏側でどういう処理をしているのか調べていました。 残念ながら、GPGPU シンセサイザは汎用性を持たせるのは難しい、という結論に至ったのですが(この経緯については後日書きたいと思います)、先週 GLSL 作曲入門 という記事が投函され Shader Music が結構注目されているのを見て、せっかく勉強したので乗っかてみることにしました。 どうせならちゃんと描きたい とりあえず簡単な Shader Music を実装しようと思っ

    Shadertoy はじめました - Qiita
  • WebGLを使ってブラウザ上で3Dモデルを描画した話 - DMM.comラボエンジニアブログ

    皆様、はじめまして!DMM.com Labo システム部 事業サービス開発部の久野です。この度、社内の勉強会のLTで話した内容をまとめてみました! 内容はWebGLというJavaScriptAPIを使って、ブラウザ上で3Dモデルをアニメーション付きで描画するために何を行ったのか、です。 ▼実際に動作するデモです。 テクスチャを大量に読み込まなければならないので表示まで時間がかかるかもしれません。 ▲ブラウザによっては動作しない可能性がありますがデモプログラムなので悪しからず。 WebGLとはなんぞや? WebGLとはKronos Groupが管理するOpenGL ES 2.0をブラウザ上のJavaScriptから扱えるようにしたAPIです。GPU(グラフィックカードまたはグラフィックボード)の機能を駆使して高度な3D描画を高速に行うことが出来、昨今のPC、スマートフォン等の主要なブラウ

    WebGLを使ってブラウザ上で3Dモデルを描画した話 - DMM.comラボエンジニアブログ
    field_combat
    field_combat 2016/06/30
    スゴイな
  • http://www.jthree.jp/

    http://www.jthree.jp/
  • 『スマートフォンで動くリアルタイム3Dグラフィック』

    はじめまして。 アメーバ事業部コア室コアディベロップメントグループの新屋です。 コア室では3Dアニメーションライブラリの開発を行っています。 リアルタイム・プリレンダ問わず3Dモーショングラフィックが好きで趣味でも3Dの制作をしています。プリレンダはTAKCOMさん、WOWのdaihei shibataさん、ogaoooooさん、リアルタイムはMasato Tsutsuiさん等の作品が好きです。 リアルタイム3D 昨今のスマートフォンの処理能力の向上に伴い、webブラウザでも一昔前にPCで動作していたようなリッチなコンテンツも高速に処理できるようになりました。 スマホサービスでは必ずと言っていい程CSSjavascriptでのUI・演出アニメーションが組込まれています。 そうしたアニメーションの表現力を引き上げる方法の一つとしてリアルタイム3Dを紹介します。 リアルタイム3Dを扱う言語

    『スマートフォンで動くリアルタイム3Dグラフィック』
    field_combat
    field_combat 2013/07/11
    3Dは色々な面で大きな壁だな。来年くらいを目途にガッツリ勉強しよう
  • creatorish.com

    Buy this domain. creatorish.com 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

  • PhiloGL: A WebGL Framework for Data Visualization, Creative Coding and Game Development

    PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development. Idiomatic JavaScript PhiloGL is built on JavaScript good practices and idioms, providing an expressive and powerful API Focused on Performance PhiloGL tries to be as close to the gl calls as possible, providing a clear yet tight abstraction to WebGL All the Modules you need PhiloGL modules cover from Program

    field_combat
    field_combat 2011/03/01
    WebGL用ライブラリ
  • deanm/pre3d @ GitHub

    Pre3d, a JavaScript 3d rendering engine Play with an application built using Pre3d, like GraphyCalc. See a demo like monster, colorscube, lorenz84, or gji. View technical samples like spin ring, textured cube, extruded sphere with normals, 3d cubic bezier spiral, or slink. Get the latest code from the git repository, as a zip file, or as a tarball. Keep in touch on the mailing list. Email the auth

  • Loading...

  • javascriptで擬似ポリゴン | 村式開墾日記

    こんにちは。中川です。 先日行われたカヤックさん [1]とクックパッドさん [2]主催の「技術者交流会 ~おいしいソースのつくり方~ 」 [3]のライトニングトークで発表させていただきました。 たくさんの技術者の方と交流でき、発表も聞けて料理もおいしく、非常に充実した時間を過ごせました。 関係者の皆様、このような機会を設けていただきありがとうございました。 さて、当日はHTML5のcanvasと、ドロネー三角形分割という技術を使って写真をポリゴンっぽくするデモを発表しました。 特徴点を手で打っておけば後は自動で面を生成します。 プレゼン資料: http://seeds.ville.jp/electriccafe/slides/ [4] デモ: ※Firefox3.0.9、chrome2.0β でのみ動作を確認しています。 IEやSafari、chrome1.0では動きません。 1)ドロネー

  • O3D API - Google Code

    What is O3D? O3D is an open-source web API for creating rich, interactive 3D applications in the browser. This API is shared at an early stage as part of a conversation with the broader developer community about establishing an open web standard for 3D graphics. Get involved Download the plug-in (Windows and Mac) and explore the samples to see O3D's capabilities. Linux users, see these instruction

    field_combat
    field_combat 2009/04/22
    Google製3Dプラグイン。今後の動向を見守る
  • 1