(2021/12/5追記)　最新のOculusQuestの状況を https://qiita.com/wakufactory/items/b0fdf55da157e7a3346a に書きました。 OculusGoのブラウザは可能性を秘めている 話題沸騰のスタンドアロン型VRゴーグル、Oculus Goですが、ウェブブラウザが標準で搭載されています。 色々遊べそうなので、Webアプリ開発者目線でわかったことをメモって行きます。 OculusGoの標準ブラウザは、デスクトップからすぐに起動することができ、湾曲したウィンドウとして3D空間内に表示されます。 キャプチャだと随分湾曲してますが、実際見るとそれほどでもありません。(でも湾曲しない平面のモードも欲しい) 基本スペック 基本はAndroid7.1のChrome相当なので、エンジン的にはモダンブラウザとして問題なく扱えると思います。 一方で

About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)

はじめに いつもはes6のモジュール管理方式であるimport/export(ES modules)を使って、npmで手に入れたライブラリや自分で作成したモジュールをロードしているが、たまに思った挙動にならないことがある。また、export defaultしたモジュールをテストしようとしてkarmaでrequire()するとエラーになったりした。そういう場合は、とりあえずmodule.exportsを使ってみるとうまくいったりすることが多いのだが、なぜなのかはあまり考えていなかった。 ということで、実際にはどうなっているのか、またモジュールシステムとは何なのかという点で基本的なことから理解を深めて、es6のimport/exportとの違いを知り、より正しく実装できるようになれば良いと思っている。 結論としては 方針としては基本的にはES6形式で記述するが、CommonJS形式の読み書きが

CANNON.jsとは？ CANNON.jsは、JavaScript製の軽量な物理エンジンです。 Three.jsにインスパイアされていて、Three.jsの構文に非常に似ています。 物理演算結果は、以下のように簡単にThree.jsのオブジェクトにコピーすることができるようになっています。 cannonObj.position.copy(threeObj.position); cannonObj.quaternion.copy(threeObj.quaternion); cannonObj.addEventListener("collide", function(e) { alert("The object just collided with the ground!"); console.log("Collided with body:", e.with); console.log("

数値型の年、月、日を引数として、yyyymmdd形式で返す関数をプログラマーに依頼したらこんなのが返ってきた。 function yyyymmdd(y, m, d) { var ymd = y; if (m < 10) { ymd += '0' + m; } else { ymd += m; } if (d < 10) { ymd += '0' + d; } else { ymd += d; } return ymd; } 間違っちゃいないけど… JavaScriptの初心者向けのサイトとかだと、こういうのがサンプルとして載っていることもなくはないけれど、このコードからはより良いものを作ろうという意思が少しも感じられない。書いていて「もう少しいい感じに書けないかな」とか考えないんだろうか。 というわけで、もう少しいい感じに書いてみたのがコレです。 function yyyymmdd(y,

Javascriptはブラウザのクライアントサイドで動く唯一の言語と言ってもいいので、普段書かなくてもちょいちょい書くことになる。そんな時用に、他の言語使っていると忘れてしまうJavascriptの重要な法則をまとめておく。 基本的にリファレンスにしているのはMozilla Developer Network (MDN)のドキュメントの以下のページ。MDNはJavascript関連では一番ちゃんとしたドキュメントだと信じている。 Working with Objects - MDN 継承とプロトタイプチェーン - MDN this - MDN オブジェクトモデルの詳細 - MDN プロトタイプベース言語 Javascriptはプロトタイプベースのオブジェクト指向言語で、クラスベースのオブジェクト指向言語(例: C++, Java)とは異なる部分が多々ある。 例えば、クラスベース言語はクラス

(R84利用) Processingでよくやる手抜きモーションブラー的なやつがthree.jsで若干つまづいた＋意外と情報がなかったのでメモ。まず呼び方がわからない。 こういうやつ。 この描画量でTHREE.Line30本で済むのでエコ。 Processingの場合どうやっていたのか // メインループ void draw(){ // 通常特定の色でクリアするところを // background(0); // 半透明のrectでちょっとずつフェードアウト noStroke(); fill(0, 20); rect(0, 0, width, height); // なんらかの描画処理 // ... } 同じことをしようとしてthree.jsでつまづいた点 普通に書くときっちりクリアされてしまう 背景も回ってしまう renderer.autoClear = false;ではないっぽい 軌跡表示

JavaScriptの配列まとめ JavaScriptの配列は、メソッドが充実しておりとても使い勝手が良いです。 しかし、その反面出来ることが多すぎてどれを使えば良いかわからないため、まとめました。 配列の操作 配列は、特定の位置をindexで指定し代入と参照を行うことで変数同様に扱えます。 しかし、JavaScriptの配列はいくつか特定の用途に使えるメソッドを持っていますので、これらを紹介していきます。 先頭あるいは最後の要素に対する操作 配列arrayの先頭要素はarray[0]を指し、最後の要素はarray[array.length - 1]を指します。 配列にはこれらの要素に対する操作を行うメソッドが定義されています。 どれらも対象の配列に対して破壊的な変更を行うメソッドであることに注意してください。 操作一覧 先頭あるいは最後の要素に対する操作は、キューやスタックを実装するに当

前提 three.js Release r74 · mrdoob/three.js 課題 1つの要素なんだけど、諸般の事情により複数のGeometryとして定義されてしまっているものを、1つのGeometryとして作り直したい。 実例としては、GeoJsonで定義されている世界地図を、D3.jsで投影して、それをThree.jsに読み込ませるとき、国ごとに1つのオブジェクトになってしまっているので、おそらくGeometryの数だけ処理が重くなる。それを1つのGeometryにすることで、多少なりとも処理や管理を簡単にしたい。 手法 var geoms = getMultipleGeometries(); // returned multiple geometries, created yourself. var merged_geom = new THREE.Geometry(); var

Function ベースのクラスについて 新しいプログラムを作るときは、新しい class キーワードを使ってクラスを作るのが、今後、普通となると思われますが、古いプログラムでは従来の Function ベースのコードが多く残っているはずです。それらを読めないと、古いコードの変更や再利用ができないので、Function ベースのクラスも理解できるようにする必要があります。 新しいクラスと古い Function ベースのクラスは混在することができます。新しいクラスの基底クラスとして Function ベースのクラスを使用することもできます。 クラス式とクラス宣言との違い クラス式とクラス宣言はほとんど同じですが、いくつかの違いがあります。 クラス式ではクラス名 className はオプションである。一方、クラス宣言では必須。 クラス式ではクラスの再宣言が可能。一方、クラス宣言ではエラーが発

はじめに three.jsを利用して、Leapで検知した手のモデルを単純に描画することを考える. 大枠の処理の流れは下のようになるはずである. three.jsのsceneを初期化する. Leapで手を検出し、three.jsのsceneへmeshを追加. Leapで手や指の位置情報を取得し、meshの位置情報へ反映. Leapで手が消失したら、three.jsのsceneからmeshを削除. 2.〜4.を繰り返す. leap.jsを生で使うと、上記の2.や4.が発生するタイミングを検知するために、 「frame.handsの要素毎に`hand.id`を取得し、前回frameで保持しておいた`hand.id`と比較して一致しなかったら...」 のような実装をすることになる. また、管理しているhand.idと作成したメッシュの紐付け関係を保持したり、等の処理が必要となるが、一々これを自分で

【2021/10/15 追記】 この記事は更新が停止されています。現在では筆者の思想が変化している面もありますので，過去の記事として参考程度にご覧ください。 予備知識 PHPはフォームから送信された値などをコード実行開始に自動的に変数として使えるようにしてくれる非常に便利なプログラミング言語です．しかし，それをそのまま用いるとエラーが発生したり，脆弱性になってしまったりするケースがたくさんあります．使う前には適当なチェック処理が必要です． どういった変数が対象になるか 以下に挙げられた変数は，ユーザーが勝手に値や構造を書き換えたり，送信をそもそも行わずにアクセスしたりすることが可能な信用できない変数だと思ってください．例え，ラジオボタンで選択肢を限定していたり，隠し要素として埋め込んでいたりしたとしても，これに該当してしまいます．

なにをやったの ふらっと外に出てみたらちょうど空が夕焼けていて「ずいぶん日が短くなってきたなあ」とか、あるいは夜、なんとなく空を見上げてみたら綺麗な満月で「もうひと月たったか」とか、そんな、ふと時の流れを感じる瞬間が僕は好きです。 が、社会人になってから、退社したら外はもう夜、という日がほとんどになって、そんな瞬間を感じることが減ってしまったなあとふと思いました。 そんなわけで、その時刻の空の色（イメージ）、月齢、天気を反映した時計ウィジェットを作ってみました。モードラインなどに置いておくと、ふと目をやったときに、ちょっとほっこりできるかもしれません。 スクリーンショット モードラインに設置 色のサンプル インストール GitHub: https://github.com/zk-phi/sky-color-clock load-path の通ったディレクトリにダウンロード (clone)、

const div = document.querySelector('div'); const p = document.querySelector('p'); div.addEventListener('mouseover', e => { div.style.transform = 'scale(1.5)'; }); div.addEventListener('mouseout', e => { div.style.transform = 'scale(1.0)'; });

アイレット株式会社デザインセクションでマークアップエンジニアとして働いているくどうです。CSS Advent Calendarに参加するのは初めてですがどうぞよろしくお願いします。 概要 CSS Grid Layoutを使っていますか？ たしかに最初はとっつきにくいし、1frってなんだよ…と言いたくなる気持ちもわかります。 しかし、こういった新機能は我々の新しい武器です。少々癖が強い武器ですが、忍者の手裏剣、ブルース・リーのヌンチャク、あるいは宮本武蔵の二刀流よろしく使いこなすことができれば強力でしかも超cool。超wavyでごめんね。ならばマスターするしかないですね！ というわけで本日はレスポンシブな表組みレイアウトを3パターン紹介します。 実践 PC時は横、スマホ時は縦に行方向が変化する表組みレイアウト まずはディスプレイ幅の広いPCの時には行方向を横に、ディスプレイ幅の狭いスマホ時に

dFdxとdFdyとは GLSL1.1以降からdFdx/dFdyという組み込み関数が使えるのですが、そこまで使う機会がないため、使い方を知っている方は少ないかもしれません。 dFdx/dFdyはスクリーンのX方向・Y方向の偏微分を計算するフラグメントシェーダの関数です。 偏微分というと、難しそうな印象を受けるかもしれませんが、単なるスクリーン上の画素値（本当は任意の値）の差分です。 この記事では、dFdx/dFdyの使い方をエッジ検出の実例を踏まえて解説します。 なお、WebGLでdFdx/dFdyを使用するためには、gl.getExtension("OES_standard_derivatives")と拡張を有効にする必要があります。 dFdxとdFdyでお手軽エッジ検出！ dFdx/dFdyに関しては、難しいことを考えずに実例を見たほうが分かりやすいです。 今回はShadertoyで動

突然の宣伝ですが、「WebGL Bits」という実験サイトをやってまして、ここではWebGLで作ったちょっとした小ネタをいくつか載せています。 ちょっと前に「Simplex Noise」というGLSLで実装されたSimplex Noiseというアルゴリズムを使ってグラフィックパターンを生成するコンテンツを作りました。 今回はそのGLSL版Simplex Noiseの使い方やパターンの生成方法の考え方について説明したいと思います。 特にライブラリは使わず、直接WebGLのAPIを使用する前提の話になってしまいますが、基本的にGLSLの話しかしないのでもしかしたら何らかのライブラリで独自のシェーダーを使う場合にも応用が利くかもしれません（？） Simplex Noiseコンテンツの概要 「Simplex Noise」で作られるグラフィックパターンがどんな感じなのかは、上の画像やサイトを見てもら

OpenGLはいろいろなプラットフォームで使えますが、その中でもWebGLはブラウザ上のJavaScriptでササっと動作確認できるので非常に便利です。 今回はこれを使って、自分の勉強がてらGPGPUの入門＆体験ができるような記事をまとめてみました。 なおWebGLについては wgld.org が大変強力です。これだけ豊富な内容が無料かつ日本語で読めるのは神のようなサイトです！　ここにはお世話になりました。 GPGPUとは GPUはグラフィックを扱うハードウェア... というくらいの理解は皆さん持っていると思います。これを使ってグラフィック以外の汎用計算に活用しようというのがGPGPU (General Purpose GPU) ですが、GPUの特徴をひとことで言うと SIMD (Single Instruction Multiple Data)という並列処理機構になります。 並列処理とい

循環的セル・オートマトン twitterで見かけて興味を持ったので書いてみた糞コード。 セル・オートマトンについて調べていたら、「Cyclic Cellular Automata」というのに出くわしたんだけど、動画を見る限り、完全に頭おかしい挙動をしているので、是非実装してみたい…… https://t.co/WUTJDWS9gF — えせはら(似非原重雄) (@esehara) 2015, 8月 22 CCAはセル・オートマトンの一種で、概ね次のようなものである： セルはn段階の状態を持つ（n段階目の次の状態は第1段階に循環する） 周囲に閾値以上の次段階セルがいるとき、自分も次ステップで次段階になる したがって： 近傍の種類（ムーア近傍かフォン・ノイマン近傍か） 近傍の範囲 閾値 セルの取りうる状態数 が指定されれば、このようなセル・オートマトンが決定される。 これに基づいてコード化され

さまざまなニュースアプリ、ブログ、SNSと近年テキストの情報はますます増えています。日々たくさんの情報が配信されるため、Twitterやまとめサイトを見ていたら数時間たっていた・・・なんてこともよくあると思います。世はまさに大自然言語時代。 from THE HISTORICAL GROWTH OF DATA: WHY WE NEED A FASTER TRANSFER SOLUTION FOR LARGE DATA SETS テキスト、音声、画像、動画といった非構造データの増加を示したグラフ そこで注目される技術が、「要約」です。膨大な情報を要点をまとめた短い文章にすることができれば、単純に時間の節約になるだけでなく、多様な視点から書かれた情報を並べて吟味することもできます。 本文書は、この文書要約(Text Summarization)についてその概観を示すことを目的として書かれていま