regl入門 - KAYAC engineers' blog
こんにちは、カヤック・クライアントワークチーム・フロントエンドエンジニアのMr.ブラウンです。 今回は、 「Fast functional WebGL」 と謳っているreglを紹介いたします。 ※ 多少、WebGL・GLSLをさわったことがある前提で話が進んでいきます。 はじめに reglは、シェーダーを自分で書く必要があります。 three.jsのようにBoxGeometryというクラスを使えば簡単に立方体をつくることができたり、 PixiJSのようにGraphicsというクラスを使えば簡単に四角形などをつくることができたり… はできません。 四角形であろうと、丸であろうと、立方体であろうと、 簡単に図形をつくることができるクラスやメソッドは用意されておらず、 reglで何かをつくりたければ自分自身でシェーダーを書かなければいけません。 (three.js・PixiJSはメジャーなcan
Neon: A WebGL Installation
The best part of 3D graphics development is that there is an endless amount of things to learn. Every new technique is a rabbit hole of discovery where the new builds upon the old and new effects are created. It truly feels like imagination is the only limiting factor. At the heart of every Active Theory project is a passion for creative technology so it’s important to balance client work with exp
【WebGL】three.js : soft particle - KAYAC engineers' blog
~ この記事はTech KAYAC Advent Calendar 2020の18日目の記事になります ~ こんにちは！クライアントワークチーム・フロントエンドエンジニアの深澤です。web や unity の実装を担当しています。 今日は three.js で soft particle （ソフトパーティクル）を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴 実装方針 three.jsでの実装 JavaScript GLSL 改善点 霧の表現 最後に ソフトパーティクルについて ソフトパーティクルとは おおまかに一言でまとめると「深度値の比較をして透過率
RINGO アイスバー | ICE BAR
このサイトはWebGL対応のブラウザのみの閲覧となっております。なお対応ブラウザであってもお使いの環境によっては正しく閲覧できない場合があります。 ＊対応環境（推奨）� PC : IE11、Microsoft Edge、Chrome、Firefox、Safariそれぞれの最新バージョン Smartphone : iOS 8.0以上、Android 5.0以上 2019年7月26日（金）より夏季限定で、「RINGOアイスバー」2種をRINGO国内全店で販売いたします。 今回販売する「RINGOアイスバー」は、「焼きたてカスタードアップルパイ」と同じリンゴのフィリングを使用し、1本1本丁寧に手作りしたクラフトアイスキャンディーです。 アップルパイのフィリングは、旬の時期に収穫した青森県産の「葉とらずりんご」をメインに使用し、キューブ型にカットしたジューシーな食感が特徴です。 ◯ アップルフレー
基礎を身につける本講義と実践的なノウハウの詰まったプラスワン講義！ WebGL スクール 2019 募集開始します - WebGL 総本山
top 2019 年 02 月 基礎を身につける本講義と実践的なノウハウの詰まったプラスワン講義！ WebGL スクール 2019 募集開始します 2019 年 4 月開講！ WebGL 1.0 が正式に勧告されたのは 2011 年の 3 月のこと…… そう、実はもう 8 年も前のことなんですね。 現在では WebGL は次のバージョンとなる 2.0 も勧告されており、ウェブの表現力向上だけでなく、機械学習にも（特殊な形で）活用されるなど、いまも少しずつその存在感を大きくしています。恐らく、数年のうちにはコンピュートシェーダなどの新たな機能がさらに追加され、どんどんウェブ技術の一角として無くてはならない存在に変わっていくでしょう。 近年では実際に WebGL を利用した事例も次々と発表されていて、最近ではアワード系のサイトでは WebGL を使っているものを目にすることも、けして珍しいこと
WebGLの基本
WebGLを基本から学ぶ授業. この記事はWebGLを基本から教える記事である。 他のサイトに載せてあるような昔のOpenGLが更新された記事ではなく、 時代遅れのアイデアを捨てて、 WebGLとは何か、WebGLがどうやって動くかについて、理解へと導く、完全に新たな記事である。 WebGL2に興味があればこれを参照して下さいwebgl2fundamentals.org 基本 基本 WebGLの仕組み WebGLのシェーダーとGLSL WebGL State Diagram 画像処理 WebGLにおける画像処理 WebGLにおける画像処理。続き 2Dでの移動、回転、拡大縮小、行列計算 二次元での移動 二次元での回転 二次元での拡大縮小 二次元での行列数学 3D 三次元の正投影 三次元透視投影 三次元のカメラ Lighting 三次元指向性光源 三次元点光源 Spot Lighting St
安定しないフレームレートに効果的！ WebGLのカクつき対策まとめ（Three.js編） - ICS MEDIA
ウェブコンテンツで3Dを扱える技術としてWebGLがあります。WebGLを利用すればブラウザ上で華やかな表現を実現できます。しかし、コンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。 解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r141)とTypeScript 4.7とwebpack 5で作成しました。開発環境の構築は記事「最新版TypeScript+We
The Book of Shaders
Patricio Gonzalez Vivo、Jen Lowe著 この本はフラグメントシェーダーについてのガイドブックです。難解で複雑なフラグメントシェーダーの世界を、一歩一歩わかりやすくご案内します。 翻訳について この文書はPatricio Gonzalez VivoのThe Book of Shaderの日本語訳です。 技術的な内容はできる限り正確に伝えるように心がけていますが、その他の部分では言葉を補ったり簡略化したり、表現を変えている部分もあります。英語が得意な方はぜひ原文もお読みください。 フィードバックにはgithubのレポジトリをご利用ください。 目次 イントロダクション 初めの一歩 シェーダーとは？ ハロー・ワールド！ ユニフォーム変数 シェーダーを使う アルゴリズムで絵を描く シェイピング関数 色について 形について 二次元行列 パターン Generative desi
【WebGL】シェーダーを使って3D空間でスプライトアニメーションさせる - KAYAC engineers' blog
この記事は、Tech KAYAC Advent Calendar 2017 の19日目の記事です。 こんにちは！カヤックのクライアントワークチーム・フロントエンドエンジニアのふかぽん です。WebGLを用いた3Dコンテンツを制作させていただくことが多いです。 過去のアドベントカレンダーではこんな記事を書かせていただきました。 2015 ... WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 2016 ... 【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る 目次 目次 はじめに WebGLでスプライトアニメーションさせる方法 1. UV座標をずらしてフレームを表示する 1-1. UV座標を拡大縮小させる 1-2. UV座標を平行移動させる 1-3. 座標変換を適用する 1-4. 座標変換後のUV座標を元に画像の色を取得する 2. ルー
フロントエンド一年生が一人で制作した驚きの本格 WebGL 事例！ 新宿KAWANO のウェブサイトがすごい！ - WebGL 総本山
top 2017 年 01 月 フロントエンド一年生が一人で制作した驚きの本格 WebGL 事例！ 新宿KAWANO のウェブサイトがすごい！ 新進気鋭のエンジニアが生み出した世界 今回ご紹介するのは、ウェブのフロントエンドに関わって一年の、新卒エンジニアが生み出した驚きの WebGL 実装サイトです。 クライアントは、新宿にあるセレクトショップ KAWANO。60 年以上の歴史を持つ老舗です。ウェブ制作を行なったのは株式会社バケモノに所属するエンジニア @Tacintosh_0810 さん。なんと驚くことに、彼は新卒エンジニアでまだウェブ制作に関わって一年余りだそう。 サイトを拝見すると、ウェブ一年目のエンジニアが生み出したとは思えない驚きのクオリティになっていることがわかるかと思います。 今回は実装に当たって @Tacintosh_0810 さんがイメージしたもの、工夫した箇所など、ち
Du Haihang
I'm Du Haihang, an interactive designer that writes code. Residing in Shanghai for around 8 years, and ever since the time when my interest in the digital sphere was piqued, I've possessed a decade of multidisciplinary experience of being in the role of designer, art director and developer. Starting off with a focus on graphic design, I followed my passion to enrich my skillsets and then dabbled i
WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 - KAYAC engineers' blog
このエントリーは tech.kayac.com Advent Calendar 2015 の4日目のエントリーです。 こんにちは！ 今年の春、カヤックに新卒として入社した、フロントエンドエンジニアの深澤（@takumifukasawa）です。 今回は、「canvasのライブラリは手をつける順番で理解度が大きく変わる」と思った出来事について書きます。 canvasライブラリで表現の幅は広がるが、種類が多くて迷う。 僕は7月に、『1日1jsdo.it』という企画を始めました。主にcanvasの勉強のためです。 これは、「1日に1つプログラムで何か作品を作る → それをjsdo.it(※1)に投稿する」習慣のことです。 途中で1週間ほど間が空いてしまった時期はありますが、この習慣を4,5ヶ月ほど続けていて、いまのところ120個近くの作品が出来上がっています（たいてい、仕事を終えて帰ってから寝るま
codedoodl
En la era de la inteligencia artificial, cada vez nos encontramos con aplicaciones innovadoras que revolucionan diferentes aspectos de nuestra vida cotidiana. Una de las áreas en las que la IA ha dejado su huella es en el mundo de la pornografía, brindando a los usuarios una experiencia visual única y excitante. En este artículo, exploraremos el fascinante mundo de las chicas desnudas generadas po
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Experiments - Yuichiroh Arai
oatthegoat.co.nz
Chrome Experiments - Experiments with Google
発射1.56秒で時速180km！天井知らずのスピードキング！
ThreeJS Nintendo GameBoy Emulator
Kaliop - votre partenaire digital pour créer de la valeur
OMM | Interactive Audio Visual Experience by Jean Helfenstein