のぐそんブログ

暗いおじさんがシコシコ書くブログです。

TouchDesigner基礎基礎メモ2

SOPで作成したネットワークをレンダリングしてみる SOPで作成した3Dオブジェクト群(ネットワーク)をレンダリングしてみます。

TouchDesigner基礎基礎メモ1

TouchDesignerとは TouchDesignerは、オペレーターと呼ばれるプログラムのモジュールをつなげることで、コードを書かなくてもビジュアルプログラミングができる開発環境です。 表現自体は色々できるみたいなのですが、リアルタイムで操作する映像表現などに…

タイポグラフィのメモ

タイポグラフィのメモ 文字はなんとなく感覚で調整していることが多いので、 参考に少し調べてみました。

THREE.BufferGeometryの使い方を調べる

THREE.BufferGeometryの使い方の基礎的な部分をまとめたいと思います。 THREE.BufferGeometryとは var geometry = new THREE.BufferGeometry(); BufferGeometryはピュアなWebGLのAPIを扱うようにGeometryを作成できます。 BufferGeometryは作成時は何も情報…

Three.jsでポストプロセスを試してみる

THREE.jsにはポストプロセス用のフィルターが用意されている。 使い方を調べてみる。 ポストプロセスはオブジェクトに対して適応するのではなくシーン全体に対して適応する。

Three.jsのGeometryのattributesをいじってみる

Three.jsでは、ビルドインクラスに沢山のGeometry用のクラスが用意されています。 ただ、そのままの形状を使わず、少し頂点座標を動かしてみようと思います。

UVマッピングについて

UVとはポリゴンにテクスチャを貼るためのテクスチャの座標のことです。 UV座標はX、YのVector2(2次元)の情報となります。 主にテクスチャの特定の位置を表示したい場合などに使用します。

THREE.jsのテクスチャについて調べる

基本的なテクスチャの貼り方 一番シンプルな貼り方は下記になります。 let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.load('images/n.jpg', functio…

THREE.jsでの環境マッピング

環境マッピングとは 環境マッピングとは、オブジェクトの周りの環境を、オブジェクトの表面に映り込ませるたり、屈折させたりすることです。 サングラスに周りの風景が映り込むイメージです。 環境マッピングの準備 よりリアルに環境マッピングを表現するた…

WebGLでのプリミティブタイプについて

WebGLでの頂点をどのように描画するかの指定をプリミティブタイプで行います。 頂点を3つ使ってポリゴンを描くか、頂点を2つ使って線を描くか、頂点を1つ使って点を描くかなどの指定することができます。 基礎的な部分ですが、種類が沢山あるのでまとめてお…

PLYファイルを使ってパーティクルを作成

PLYファイルからパーティクルシステムを作成してみます。 PLYファイルとは PLY(Polygon Model File)3Dファイル形式の一つです。 ポリゴンファイルのフォーマットで、3Dスキャナから得られた情報を保持するためによく利用されます。 PLYファイルをTHREE.jsで…

WebGLでライトを実装する為に最低限理解しておく必要基礎知識

今回はWebGLでライトを実装する為に最低限理解しておく必要があることについてまとめました。 法線 法線とは向きを表すベクトルです。法線ベクトルと呼ぶ場合のあります。

Three.jsでGLSLを触るための基礎基礎メモ

GLSLの基礎 「WebGLを使って三角形を描画する為の基礎知識」でも少しかきましたが、GLSLは頂点シェーダーと、フラグメントシェーダーがあります。 頂点シェーダーではgl_Positionという組み込み変数に頂点データを必ず渡す必要があります。 フラグメントシェ…

WebGLでの行列による変換処理を理解する上で、最低限知る必要がある言葉

WebGLでの行列による変換処理を理解する上で、最低限しっていないといけない言葉について書きたいと思います。 下記を参考にさせていただきました。 3D 描画の基礎知識

Three.jsでパーティクルを作ろうと思った際に調べたこと

Three.jsでパーティクルをつくるにはどうすればいいのか調べてみました。

Three.jsで頂点座標を指定して三角形を描く

以前、「WebGLを使って三角形を描画する為の基礎知識」の記事をかきましたが、WebGLのラッパーライブラリであるTHREE.jsでも同じようなことができるのでメモしておきます。 当然ですが、ナマのWebGLを触るよりより簡単に書けるようになっています。

expressでサーバ−を立てるの超基礎編

サーバー側の知識が限りなくゼロに近いオジサンですが、 expressを使って、まずはindex.htmlを表示だけしてみようと思います。

Socket.ioの超基礎編

expressとSocket.ioを使う サーバー側の知識が限りなく0に近いオジサンですが、 Socket.ioを使って、サーバーとクライアントで双方向通信をやってみます。

THREE.Sceneについて少し調べる

THREE.Sceneは、オブジェクトを配置する基盤なのですが、THREE.Scene.addしか使ったことがなかったので、他にどんなことができるか調べました。

WebGLを使って三角形を描画する為の基礎知識

WebGLを使って三角形を描画する為の基礎知識を学びたいと思います。 ちなみに、こちらに記載されている内容だけでは三角形は描画できません。

マイナス思考をプラス思考で考える

私は典型的なマイナス思考型の人間です。 いつからこんなにマイナス思考になったのかわかりませんが、 少なくとも学生時代から劣等感が強い人間だったと思います。 世間のキラキラした人達は「根拠のない自信」が大事だと、白い歯を見せながら言います。 私…

3Dで使う行列の基礎について

行列とは wikipediaで調べたところ行列とは以下のことらしいです。 数学の線型代数学周辺分野における行列(ぎょうれつ、英: matrix)は、数や記号や式などを行と列に沿って矩形状に配列したものである。行の数と列の数が同じ行列は行列の和(英語版)が成分…

Three.jsの使いそうなマテリアル

Three.jsで使いそうなマテリアルです。 MeshBasicMaterial 面用のマテリアル。 陰がつかないので塗りつぶした状態になる。 new THREE.MeshBasicMaterial({color: 0x66B6FF});

3Dで使う基本的な数学の知識その1(javascript編)

3Dを使う上で必須の数学の知識があります。 まずは基礎からやっていこうと思います。

AR.js導入メモ

AR.jsがリリースされたので、導入手順をメモしました。 わからないパラメータや処理があり、わかったら追記していこうとおもっています。 手順 AR.js導入手順。 ArToolkitSourceを作成 ArToolkitContextを作成 ArMarkerControlsを作成 ARで表示するオブジェ…

Three.jsのカメラについて

カメラの定義方法 カメラの基本的な定義方法は下記。 ※レンダーとシーンの作成は割愛

SELECT文だけの修飾メモ

SQL

SELECT文だけの修飾 DISTINCT 検索結果の中で重複した行を取り除いてくれます。 用途としては、データの種類を取得する場合などに使用します。 SELECT DISTINCT 列名 FROM テーブル名

three.jsのライトについてのメモ

three.jsのライトについて three.jsでは他のオブジェクトとと同じようにライトも追加することができます。 【ライト追加前】 【ライト追加後】 上記のように、ライトは明るさもですが、影の描画に大きく影響します。

UnityのRigidbodyの使い方の基礎の基礎

Unityは3Dゲーム開発用のエンジンなので、物理演算のコンポーネント(Rigidbody)が用意されています。 自分用のメモとして学んだことをまとめたいと思います。

Unityの基礎の基礎操作

Unityの基礎の基礎操作です。自分用のメモの為に書きました。

SQL基礎の基礎の基礎〜WHERE句での絞込〜

SQL

SELECT文ではほとんどのケースでWHERE句を使用します。 つまり WHERE句が使えなければ、SELECT文は使えないことになるので、 まとめてみたいと思います。

SQLの基礎の基礎の基礎

SQL

基礎の基礎の基礎ですが、SQL分の4大命令について自分のメモ用にまとめたいと思います。

機械学習は難しい②

前回は「人工知能って何?」というところからやり始めましたが、 今回は機械学習の基礎の基礎の基礎について調べてみました。

機械学習は難しい①

世間ではバズワード的に「人工知能(AI)」という言葉が流行っています。 書店に行けば関連書だらけです。 しかし、己の知能が劣化が激しく、自分の知能のメンテナンスで忙しい私には関係のない話だと思っていましたが、社内で「人工知能」のプロジェクトの…

デザイナーがプログラムを学ぶ理由

この話は、私のような会社のお荷物化しているデザイナーに向けての記事になります。 デザイナーとしてバリバリやってる方にはまるで関係ない話です。 私のメインの業務内容は、デザインとフロントエンド開発です。 ワイヤー書いて、デザインして、HTML書い…