【WebGL特集】第2回：回転する立方体｜株式会社モックス
※この記事は2013年の記事を2018年5月に加筆修正したものです。three.jsの使用バージョンはr92です。 【前記事】 【WebGL特集】第1回：WebGLって何？ 今回から、webGLの具体的な表示方法を解説していきます。 １、テキストエディタの用意 webGLはテキストで記述していきます。メモ帳でもかまいませんが、記述が多くなるので使いやすいテキストエディタを用意したほうが良いでしょう。webGLはHTMLの中にjavascriptとして記述していきます。webGLと言っていますが、厳密にはjavascriptのライブラリの一つであるThree.jsを使いwebGLを表現しています。今後はややこしくなるのでwebGLという言葉を使っていきます。 ２、FireFoxの用意 表示の確認に使用するブラウザは、FireFoxを使います。出来たwebGLのJavaScriptが記述された
【WebGL特集】第1回：WebGLって何？｜株式会社モックス
※この記事は2013年の記事を2018年5月に加筆修正したものです。 みなさんこんにちは。 今日から8回にわたってWebGLの特集記事を公開していきます。 まずは以下をご覧ください。マウスでグリグリ動かせます。 See the Pen WebGLExample by 住岡義和 (@mox-motion) on CodePen. これがWebGLです。WebGLはブラウザ上で３DCGのポリゴングラフィックをリアルタイムで表示する技術です。2013年10月から対応ブラウザが増えだし、2018年5月時点で、モバイルを含む多くのブラウザで対応しております。FlashやUnityのように別途インストールの必要がなく、近い将来、WEB界隈での3Dポリゴンのリアルタイム表示においては一番現実的な手段になるのではといわれています。 ■webGL おすすめサイト10選 webGLの技術はプログラムと組み合わ
【WebGL特集】第4回：Blenderでモデル出力｜株式会社モックス
※この記事は2013年の記事を2018年6月に加筆修正したものです。three.jsの使用バージョンはr92です。最新バージョンではJsonモデルの読み込みはできなくなっております。 【前記事】 【WebGL特集】第1回：WebGLって何？ 【WebGL特集】第2回：回転する立方体 【WebGL特集】第3回：カメラをグリグリ 前回までは、CGソフトを使わず、three.jsのチカラのみで３Dオブジェクトを出力していました。 今回はBlenderというフリーの3DCGソフトを使い、自作のオブジェクトモデルをコンバートし出力する方法を解説します。 １、なぜBlenderなのか 2018年時点ではwebGLと最も相性のいい3DCGソフトはBlenderです。モデルのみであれば一応、各ソフトにwebGL出力用のプラグインなり、Collada出力なり、何かしらの手段がないことはないのですが、バグやエ
TypescriptからThree.jsを使ってみた記録 - Qiita
概要 ここにあるように簡単なTypescriptの環境設定を行った後、次にTypescriptからThree.jsの機能を使えるように設定して簡単な3Dプログラムを実行してみました。 その記録です。 今回もほとんどコマンドラインからの操作で作業を行っています。 WebGLの機能を使用しているので要WebGLです。 使用したPCの環境は64bit版のWindows7ですが、ここから先は主にnpmから使える機能とJavascript・HTMLといった技術しか使用していないので、他の環境でも参考になるかもです。 Typingsのインストールと、TypingsによるThree.jsのtsd設定 TypescriptからThree.jsを使用できるようにするためにThree.jsの型の定義を取得・設定しています。 Typescript用の型定義の取得･設定には、前は tsd というものが使用されてい
React NativeでGLSL書けるか試してみた | ランサーズ（Lancers）エンジニアブログ
この記事はランサーズ Advent Calendar 2017の21日目の記事です。 はじめまして、フロントエンドエンジニアの加藤です。8月からランサーズのユーザーファーストデザイン室というチームでデザイナーの人たちと一緒に働いています。 突然ですが、みなさんはglslsandboxを見て、知らない外人のお兄さんの作品を見て毎日感動してますよね？そして、うちの仕事では使う機会ないなぁと涙を流していますよね？ しかし、仕事は自分で勝ち取るものなのだと誰かが言っていました。どうやって今の仕事の環境の上で書けるかを試してみるといいかもしれません。以前、gl-reactを使ってReactで書いたアプリケーションの上でGLSLを書ける方法を試したことがありますが、現在であれば一番新規フロントエンド開発で選定されそうなReact Nativeで書ければ、もしかしたら仕事で書けるかもしれません！ GLS
WebGL - Low-Level 3D Graphics API Based on OpenGL ES
LOW-LEVEL 3D GRAPHICS API BASED ON OPENGL ES WebGL™ is a cross-platform, royalty-free open web standard for a low-level 3D graphics API based on OpenGL ES, exposed to ECMAScript via the HTML5 Canvas element. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES API. It stays v
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.js - JavaScript 3D library
WebGL での開発を始める - Unity マニュアル