生成AIを活用したSaaSサービス提供企業

  • Company
    • Company
    • 会社概要
    • グループ会社
  • Service
  • Work
  • News
  • Recruit
  • Blog
  • Contact

ブログBlog

  • ALL

  • お知らせ

  • 技術/デザイン/制作

  • ベトナム

  • ごはん

  • 日常/プライベート

  • WebGL+HTML5で3DCGを勉強してみた! Part3

    どうも。営業部の伊藤です。

    長期化しておりますが、、、続けます!!!

    Part2でSTEP3の「シェーダを生成&コンパイル」まで説明が終わりましたので、今回のブログではSTEP4の「モデルデータを用意」とSTEP5の「モデルデータからVBO(VertexBufferObject)を生成&バインド」を書きます。

    早速モデルデータを用意したいところですが、その前にプログラムオブジェクトを作成する必要があります。
    プログラムオブジェクトとはなんぞや??
    Part1のフラグメントシェーダ(ピクセルシェーダ)説明部分、Part2のvarying説明部分でも書きましたが、varying修飾子変数を利用してシェーダ間で頂点情報を橋渡しする必要があります。
    この橋渡しを実現するためのオブジェクトがプログラムオブジェクトであり、WebGL側との連係もこのオブジェクトを利用します。

    var vShader = setShader(“vertex”);
    var fShader = setShader(“fragment”);

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vShader);
    gl.attachShader(shaderProgram, fShader);
    gl.linkProgram(shaderProgram);

    setShader関数でバーテックスシェーダ(頂点シェーダ)とSTEP3のフラグメントシェーダ(ピクセルシェーダ)の生成&コンパイルまで実施し、その後にプログラムオブジェクトを生成(createProgram)しています。
    そして、作成したプログラムオブジェクト(shaderProgram)に各々のシェーダを割り当てた(attachShader)後にリンク(linkProgram)しています。
    これでパラメータ受け渡しの準備は完了しましたので、本題の「モデルデータの用意」と「VBO(VertexBufferObject)の生成&バインド」に進みます。

    “WebGL+HTML5で3DCGを勉強してみた! Part3” の続きを読む

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    伊藤 康平投稿者 伊藤 康平

    投稿日: 2012/12/172012/12/17

    カテゴリー 技術 / デザイン / 制作
  • 生活にちらばるUX

    汗と涙と鼻水が流れすぎたので木曜日に更新できませんでした。
    (※寝込んでいました)

    アプリを研究する気力がなかったため大変申し訳ございませんが
    今週はちょっと違った方向でお話をしようかとおもいます!

    ■UIとUXが入り交じるWEB業界

    最近巷で人気のバズワード!!
    「UX/UI」

    各種ブログでの説明をみたり、セミナーにいきますが、色々定義がなされているようです。
    色々定義されすぎて坂田は混乱してきました。
    UX/UIジプシーです。

    めー。

    ひつじって可愛くないんですね・・・

    そんな時に神が降臨しました。

    “生活にちらばるUX” の続きを読む

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    アバター投稿者 staff

    投稿日: 2012/12/142012/12/14

    カテゴリー 技術 / デザイン / 制作
  • Tweetbot UI 研究-vol3.機能編-

    焼き芋にココア・バナナにきなこの坂田です。※食べてみてください
    今回はvol3機能編です!
    前回の
    vol2他人インサイトでご紹介した「ユーザーが良いと評価している機能」はこんな感じでした。

    ・メニュー(タブバー)のカスタマイズ ・マルチタップ機能 ・リストの表示【これは結構否両論ありました・・・・】 ・会話・詳細へのボタン操作 ・デザインが洗練されている ・細かい設定が可能

    ■タブバーに隠れた汗(たぶん)

    この中でも自分が特別良いと感じているのは「タブバー」=メニュー部分です。
    その仕様をまずはご紹介します。

    “Tweetbot UI 研究-vol3.機能編-” の続きを読む

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    アバター投稿者 staff

    投稿日: 2012/12/062012/12/06

    カテゴリー 技術 / デザイン / 制作
  • Selenium2 + Webdriverで自動テスト中

    お疲れさまです。横井です。
    今日は久々にちょっとカタめの技術寄りのお話を書きたいとます。

    現在担当している案件でログインページを作成しているのですが、テスト対象のIDが多く、一つ一つを入力して確認するのはさすが無理だなと感じましたので、これを機に自動テストをやってみようと思いました。

    Webアプリになりますので、ブラウザからテストができるものがないかとググってみたところ、「Selenium」なるものがあるのを発見しました。

    早速使ってみると、イメージ通りではあったのですが、テストケース(HTMLベース)をつくらないといけないようでしたので、今回のテストではテスト対象のIDが多かったので、テストケースの作成に時間が取られそうな感じでしたので、もう少しプログラムを使って、テストケースを作らなくてもテストができるものがないか、再度ググり調査を開始しました。

    そうすると、「Selenium2 + Webdriver」でプログラムを書いて自動テストができるものを発見しました。
    プログラムの作成は、Java、C#、Ruby、Pythonなどが使えるようですので、今回はPythonでプログラムを書いて、現在、自動テストのテストを行っております。
    現在、FireFox、Chromeで自動テストが動くところまできております。
    (あと、IEでテストできるところまで確認したいと思います。)

    次回ぐらいには、もう少し詳細を書けるようにノウハウを貯めたいと思います。

    ではでは。

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    アバター投稿者 staff

    投稿日: 2012/12/062024/04/26

    カテゴリー 技術 / デザイン / 制作
  • そうだ、アプリの研究しよう vol.2

    最近、(元から?)体調の悪さがすぐ顔に出て困っている坂田です。
    上司様に「3徹した顔」「フレッシュさがない」とdisられます。
    2013年の抱負は「ボールドの宣伝のタマテツくらい爽やかになる」(分かる人には分かる)

    さて、いつものシリーズです!
    前回は自分がなぜこのアプリを使っているのかということを書きました!
    →vol1.じぶんインサイト。
    今回は他の人がどんな点を好んでいるのかについてまとめてみます。

    ============================
    vol2 たにんインサイト
    なぜTweetbotは人気があるのか。私のお気にいりポイントが他人と同じではないはず。
    他の人が良いを思っているところはどこなのかを考察します。
    ============================

    “そうだ、アプリの研究しよう vol.2” の続きを読む

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    アバター投稿者 staff

    投稿日: 2012/11/292012/11/30

    カテゴリー 技術 / デザイン / 制作
  • WebGL+HTML5で3DCGを勉強してみた! Part2

    どうも。営業部の伊藤です。

    前回のブログの続編です。

    以下の見慣れないエレメントタイプはバーテックスシェーダ(頂点シェーダ)とフラグメントシェーダ(ピクセルシェーダ)という点まで書きました。

    「x-shader/x-vertex」
    「x-shader/x-fragment」

    シェーダはSTEP3のタイトル(シェーダを生成&コンパイル)にも記載しているようにプログラム内でコンパイルして利用するため、コンパイルするまでは単なる文字列しかありません。
    そのため、今回はHTML内に記載しておりますが、JavaScript内部で文字列として宣言、管理する形でも問題ないです。
    該当の属性はHTMLで定義された正式なエレメントではないため、一般的なブラウザでは理解されず無視されます。
    注意しなければいけないのが、scriptタグの中身がJavaScriptと誤認されないようにしなければいけないという点です。
    それを回避するため、type属性を使って各々のシェーダを宣言しています。

    次はシェーダ内の記述を見てみます。
    言語はGLSL(OpenGL Shading Language)で実装しています。
    GLSLは名前のとおりOpenGLと親和性がある、C言語ライクな言語となります。

    ■バーテックスシェーダ(頂点シェーダ)

    attribute vec3 vertexPosition;
    attribute vec2 vertexTexture;
    uniform mat4 vertexMatrix1;
    uniform mat4 vertexMatrix2;
    varying vec2 textureCoord;

    void main(void) {
    gl_Position = vertexMatrix1 * vertexMatrix2 * vec4(vertexPosition, 1.0);
    textureCoord = vertexTexture;
    }

    ■フラグメントシェーダ(ピクセルシェーダ)

    precision mediump float;
    uniform sampler2D fragmentTexture;
    varying vec2 textureCoord;

    void main(void) {
    gl_FragColor = texture2D(fragmentTexture, vec2(textureCoord));
    }

    attribute、vec3、vec2、uniform、mat4、varyingなど様々な単語が出てきましたね。
    まず、開発経験者の方であればある程度想像できると思いますが、先頭部分は修飾子(attribute、uniform、varying)、その次はデータ型(vec3、vec2、mat4)、最後は任意の変数名(vertexPositionなど)となります。
    修飾子、データ型について纏めます。

    ○attribute
     バーテックスシェーダ(頂点シェーダ)専用の修飾子です。
     attribute修飾子で宣言された変数はWebGLとシェーダ間で頂点情報を橋渡しする(シェーダ側が受け取る)ための変数となります。
     WebGL側で同じ名前の変数に頂点情報を設定しておき、シェーダ側に情報を渡します。

    ○uniform
     バーテックスシェーダ(頂点シェーダ)、フラグメントシェーダ(ピクセルシェーダ)の両方で利用できる修飾子です。
     attribute同様に、uniformで宣言された変数はWebGL側から情報を渡すための変数となります。
     ではattributeと何が違うのか?
     attribute修飾子は3Dオブジェクトの頂点に関する情報を受け渡すための専用修飾子です。
     逆にuniform修飾子は「全頂点に対して一律に処理される情報」を受け渡すための修飾子となります。
     要約すると、3Dを描画しているcanvas上全体に情報を受け渡す場合に利用します。
     STEP6(座標変換行列を生成&通知)で詳しく説明します。

    ○varying
     バーテックスシェーダ(頂点シェーダ)、フラグメントシェーダ(ピクセルシェーダ)の両方で利用できる修飾子です。
     前回のブログにも書きましたが、フラグメントシェーダ(ピクセルシェーダ)が着色内容を計算、決定するには頂点関連の情報が必要になります。
     このバーテックスシェーダ(頂点シェーダ)とフラグメントシェーダ(ピクセルシェーダ)の橋渡しをするための変数をvaryingで定義します。

    ○vec2、vec3、mat4
     vec(数値)は浮動小数点のベクトル型です。
     数値には1~4が設定でき、添字によりベクトル要素数が変わります。
     vec2 => 2Dベクトル
     vec3 => 3Dベクトル
     vec4 => 4Dベクトル

     mat(数値)は浮動小数点の正方行列です。
     数値には2~4を設定でき、添字により正方行列数が変わります。(matは恐らくマトリックスの意ですね)
     mat2 => 2×2
     mat3 => 3×3
     mat4 => 4×4

    attributeで宣言したvertexPositionやvertexTexture、uniformで宣言したvertexMatrix1、vertexMatrix2はSTEP6(座標変換行列を生成&通知)で値の受け渡しを実施し、
    varyingで宣言したtextureCoordは頂点関連情報を受取後、フラグメントシェーダ(ピクセルシェーダ)にデータを受け渡しています。

    シェーダの宣言部(WebGLとのデータ連携方法や受皿、シェーダ間の連携方法)は以上となり、次はシェーダの処理部です。
    ご覧のとおり、バーテックスシェーダ(頂点シェーダ)、フラグメントシェーダ(ピクセルシェーダ)共にmainという関数が定義されています。C言語ライクですね。
    必ずmainという関数を定義し、そのなかに処理内容を記述します。
    そして、バーテックスシェーダ(頂点シェーダ)ではgl_Positionという組込み変数に頂点データを渡し、フラグメントシェーダ(ピクセルシェーダ)ではgl_FragColoという組み込み変数にデータを渡します。
    ※頂点データは必須となりますが、フラグメンテーションは必須ではないです。

    変数宣言(WebGLとの連係用受皿)、シェーダ間連携内容の実装、計算処理内容の実装などシェーダ自体の宣言が完了したため、次はWebGLで該当のシェーダをコンパイルします。
    まず、getElementByIdでHTML内のバーテックスシェーダ(頂点シェーダ)、フラグメントシェーダ(ピクセルシェーダ)エレメントを取得します。

    var shader;
    var shaderElement = document.getElementById(id);
    if (!shaderElement) {
    return null;
    }

    その後、エレメントタイプをチェックし、タイプ毎に該当のシェーダ生成します。
    ここで初めてシェーダを生成(createShader)しています。

    switch(shaderElement.type){
    case “x-shader/x-vertex”:
    shader = gl.createShader(gl.VERTEX_SHADER);
    break;
    case “x-shader/x-fragment”:
    shader = gl.createShader(gl.FRAGMENT_SHADER);
    break;
    default:
    return null;
    }

    次に、HTML内で宣言した変数、連携内容、計算処理などの文字列(ソース)を上記シェーダに割り当て(shaderSource)るため、firstChildでエレメント内の文字列を取得します。
    一通りの文字列取得が完了したら最後にコンパイル(compileShader)です。

    //子ノード取得
    var source = “”;
    var childNodes = shaderElement.firstChild;
    while (childNodes) {
    if (childNodes.nodeType == 3) {
    source += childNodes.textContent;
    }
    childNodes = childNodes.nextSibling;
    }
    gl.shaderSource(shader, source); // ソース割り当て
    gl.compileShader(shader); // コンパイル

    これでSTEP3の「シェーダを生成&コンパイル」は終わりです。
    &
    今回のブログも終わりです!!

    細かなところは端折りながら書いているつもりですが…想定外に長文&長期化しております。。。
    まだまだSTEP3ですが、STEP4以降も頑張って連載していきますので宜しくお願いします。

    ではでは。

    このエントリーをはてなブックマークに追加
    Share on Tumblr
    Tweet

    伊藤 康平投稿者 伊藤 康平

    投稿日: 2012/11/26

    カテゴリー 技術 / デザイン / 制作

投稿ナビゲーション

前のページ ページ 1 … ページ 40 ページ 41 ページ 42 … ページ 48 次のページ