サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Switch 2
qiita.com/doxas
introduction みなさまこんばんは。 doxas と申します。 こちらは Three.js Advent Calendar 2019 - Qiita の 12 日目の記事です。 令和元年の年の瀬、いかがお過ごしでしょうか。 私はと言いますと、なかなかに余裕の無い毎日を送っておりまして今年はアドベントカレンダーも書く余裕が無いなと思っていたのですが、technohippy さんが毎日のようにアドベントカレンダーへの投稿を呼びかけているのを見るにつけ、これはせめて少しでもお手伝いしなければと思い立ち筆を執った次第です。（イベントの主催とかもそうですが、こういうの呼びかける側というのはそこそこに精神的疲弊があったりしますよね……） technohippy こと、あんどうやすしさんはオライリーの「初めての Three.js」の訳者さんなのはみなさんご存知かと思いますが、私もこれで thr
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 動機 世の中には様々な種類のシェーダ記述言語があるかと思いますが、そのなかでも GLSL は WebGL を利用することでブラウザ上で実行可能となる、ちょっと特殊な存在だと言えると思います。ブラウザ上で本格的な CG の技術が動いてしまうというのはもうそれだけでも WebGL おじさんたちは大変に興奮してしまうのですが、一方であえてブラウザ上だからこそできる活用方法や表現方法もあり、日夜世界中で研究や制作が行われています。素晴らしいですね。 GLSL や WebGL を普及させるべくいろいろ怪しげな活動をしている私ですが、その活動にはい
はじめに みなさん、こんばんは。 なぜこんにちはでなく、こんばんはなのか。 それは私が夜型人間だからです。 つぎに WebGL が誕生してから、結構な時間が流れました。 新しい Web の API ですなんて WebGL を形容することもあったりしますが、WebGL の歴史も徐々に深まりつつあるなあと感慨深く思う今日このごろです。 2016 年のアドベントカレンダーでは、WebGL だけでなく、three.js や GLSL、あるいはオリジナルの和製 WebGL ライブラリについてなど、各所で様々な WebGL 関連アドベントカレンダーが公開されており、そういったものからも、WebGL が置かれている状況の変化を感じています。 一般的には、どうなんでしょう。WebGL に興味を持っているけど、なんかその怪しげな空気感から足踏みしてしまっている……そんなエンジニアさんも、いるんでしょうか。
第二次チョコレイマーチング大戦 先週、とんでもなく下らないネタを五日間に渡って投稿させていただきました doxas と申します。 詳細は以下です。 [連載 GLSL 物語] チカラが欲しいか……（第一話） まあなんていうか、最後まで読んでくださった方は既にお気づきかと思いますが、オチを先に思いついて、それに向かってひたすらアホなことをやり続けた結果があの有様でありまして、反省も後悔もしてはおらんのですが、さすがにこのまま放置というのはいかんだろうと思い筆を執った次第です。 全てを漏れ無くというわけにはいきませんが、レイマーチングの基本の部分や、今回の一連の投稿において使われたテクニックなど、一部抜粋してご紹介します。 ただ今回紹介するテクニック等は基本的に単なるレイマーチングの話なので、より厳密にしっかりと数学的側面なども理解したいという場合は、あまり今回のテキストは向いていないかもしれま
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ブラウザ上でのシェーダデバッグ WebGL や GLSL のデバッグは、通常の JavaScript のフロントエンド開発とは少々異なる趣があります。 というのは、WebGL や GLSL を利用した開発には、GPU という本来なら JavaScript が干渉することのできない領域が大きく関わってきます。その閉ざされた世界のなかでいったい何が起こっているのかについては、ブラックボックス化されており容易には見通せない場合が往々にしてあります。 より正確には、WebGL の調査系のメソッドを適切に呼び出してやるなどすれば、GPU などのハ
はじめに 本稿は、WebGL で GLSL を使って暖を取るために個人的にまとめたもので、もしかしたら仕様と異なるような表記や勘違いがあるかもしれません。そういうの見つけたときはぜひ教えてください。🔥🔥🔥 GLSL やシェーダに気軽に触れてみてほしい、楽しく取り組んでみてほしいという観点からやや崩れた文体で、イメージのしやすさ優先で書いてます。そういうの苦手な人は公式の仕様を見ましょうね。 GLSL について知る GLSL がなんであるかは、たぶんこの記事を読んでいる方には説明不要かと思いますが、あえて簡単に説明します。 まず、PC などのコンピュータを用いて二次元、あるいは三次元のグラフィックスを描画するための世界標準の規格として OpenGL という API が存在します。その名のとおり、オープンな規格として策定されている OpenGL は、OpenCL や Vulkan などと
WebGL Advent Calendar 2015 の 21 日目の記事です。 ごあいさつ みなさんこんばんは！！ 🌙 ﾑｰﾝ! 今年はお正月に連休とっていいらしいということで人生初と言っても過言ではないとても一般的な年越しができそうなことを本気で嬉しく感じております doxas ともうします！ 🎍 さて、今年の WebGL アドベントカレンダーはとてもガチな人たちがたくさんの有用な記事を書いてくださっており、超個人的な感想をいきなり捩じ込みますがわたくしとても嬉しいです。 思えば 3 年ほど前、wgld.org を書き始めたころは WebGL というと動作も不安定で、本当にマニアみたいな一部の人しか使っていない謎技術でありましたが、今日こうして一般的なウェブサイトでも割と WebGL が使われるようになってきているのを見るにつけ、本当に時代の変化を感じますし、またそのすさまじい性急
まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（４） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- フラグメントシェーダのソースコード --> <script id="fs" type="xs/fs"> // フラグメントシェーダには時間の経過がtimeに秒単位で、 // スクリーン解像度がresolutionにピクセル単位で入ってくる precision mediump float; uniform float time; uniform vec2 resolution; // HSV色空間を使うための関数 vec3 hsv(float h, float s, float v){ vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t
まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（６） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（２） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始
はじめに 全国 8,120 万人のレイトレファン の皆様こんにちは！ WebGL でレイトレがどうしてもやりたいんだというお便りがついに 1,021 万通を超えたので、そろそろ WebGL で簡単なレイトレーシングの実装について解説する頃合いかなと思い立ち筆を執った次第です。 今回はあくまでも 基本に忠実 に、簡単なレイトレーシングの実装を GLSL だけで行ってみましょう。全国のレイトレファンの皆さんの声援に応えてがんばって解説記事を書いていこうと思います。 前置き 私は幸運なことに WebGL について解説する機会がそれなりにあります。 そういった席ではよく、数学的な知識はとりあえず後回しにしてまずはやってみることからスタートしましょうという話をします。たとえば行列やクォータニオンについて、その数学的な詳細にまで勉強するのは大変です。ですから、まずは使い方から覚えようという促し方をする
まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（８） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の
まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（７） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（最終回）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（９） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity な
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（４）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（３） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などの
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（６）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（５） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などの
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（２）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などの
まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の中です。きっとシェーダに触れた経験は無駄にはならないでしょう。 すぐに業務で活かすとか、そういう壮大な話はさておいてまずは気軽
#さあ、はじめよう# ##はじめに## 本稿は掲題の通り javascript を用いて[ シューティングゲーム的な何か ]を作ろうという試みについて解説するテキストの第一回です。 ##想定する読者## 割と暇である プログラミングに興味がある ゲーム作りに興味がある javascriptの基本をマスターしたけど特に作るものがない javascriptを使った動きのある処理を実装してみたい canvas でなんか作ってみたい ##本連載の狙い## 本連載はどちらかというと初心者向けです。 このページに検索からやってきた「ゲーム作りてえええええ」と日に三十回くらい叫んでいる小中学生諸君は、まずjavascriptの基本をお勉強してから本連載を読みましょう。 また、最終的に出来上がる[ シューティングゲーム的な何か ]は、そんなに大層なものではありません。シューティングゲームがどのような感じで
このページを最初にブックマークしてみませんか？
『@doxasのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
