Three.js: WebGL2Renderer

非常に素晴らしい。 :)私は実際、WebGL2と1の複雑さをどのように処理するかについて少し心配していました。

UBOを使用することを好むのは素晴らしいことです。 :)そして私はBufferGeometryのみをサポートするというアイデアが大好きです-それは物事を非常に単純化するはずです。

フォワードレンダリング（UE4がVRの速度のために行っていることのようです）に固執すれば、ほとんど同じシェーダーをサポートするのはクールですが、それをスイングできる可能性が高いと思いますか？ どう思いますか？

WebGL2が利用できない場合に、似たようなものにフォールバックできるように、シェーダーの互換性を維持したいと思います。

@mrdoobヒップヒップフーレイ！ そして、 BufferGeometryが独占的に使用されると聞いてうれしいです。 👍

私は、UBOを好むという@bhoustonの提案を2番目にしています。

ライティングとシャドウ処理をレンダラーからより完全に分離することも可能でしょうか？ デフォルトは本当に便利ですが、ライティングとシャドウロジックを完全に制御したい場合は、 WebGLRendererとco。 彼らが喧嘩をしたような気がします。

そして、ウィッシュリスト-yタイプのアイテムをリストしている間、ソートアルゴリズムを「プラグ可能」にすることはできますか？ 3つの範囲外の並べ替えのニーズがあり、現在のWebGLRendererの並べ替え関数をオーバーライドするのは不必要に難しいようです。 おそらく、これはレンダラーオブジェクトを作成するときのオプション設定である可能性がありますか？

WebGLRenderer 1を変更して、BufferGeometryオブジェクト以外のサポートを削除する必要があるのではないかと思います。 それは前進するためのより簡単な方法かもしれません。 GeometryをBufferGeometryに変換するための単純な関数があり、人々に強制的に呼び出させる場合...

WebGLRendererとWebGLRenderer2の間で機能の同等性を維持しようとしているのではないかと心配しているので、これを言っていると思います。 2つを並列に維持するよりも、1つのコードベースを進化させる方が簡単です。

WebGLRenderer 1を変更して、BufferGeometryオブジェクト以外のサポートを削除する必要があるのではないかと思います。 それは前進するためのより簡単な方法かもしれません。 GeometryをBufferGeometryに変換するための単純な関数があり、人々に強制的に呼び出させる場合...

すでにそのような機能があります。 しかし、それほど単純ではありません...

APIとサポートされている機能を再検討できるように、 WebGLRenderer2を最初から作成する方がよいと思います。

Firefox51でWebGL2がサポートされるようになりました： https ：//www.mozilla.org/en-US/firefox/51.0/releasenotes/

これが待ちきれません！

WebGL2.0をサポートするChrome56がリリースされました！
https://developers.google.com/web/updates/2017/01/nic56

WebGLRenderer2を前に進める良い機会ですか？ XD

WebGLDeferredRenderer2も作成する必要がありますか？

来週からすべての調査を開始する予定です。 ✌️

チャンスがあれば、もう少し調べてみてください。 すっごく楽しみにしています！ （3Dテクスチャ）

@mrdoob
更新はありますか？
ご不明な点がございましたら、お気軽にお問い合わせください。
私たちは話し合い、助けることができます; D

まだ時間がありません。 すぐにすぐに！ 😇

https://blog.chromium.org/2017/03/faster-3d-rendering-with-webgl-20.html

更新はありますか？ 私は特に、いくつかの医用画像をボリュームレンダリングするための3Dテクスチャに興味があります。 また、このプルリクエストを成功させるためのお手伝いもさせていただきます。

現在のthree.jswebgl2サンドボックスは機能しません：（ https://threejs.org/examples/webgl2_sandbox.html
three.jsバージョンのビルドの問題である可能性がありますか？

オンライン<script type="module">がすでに実装されている場合...
https://groups.google.com/a/chromium.org/d/msg/blink-dev/uba6pMr-jec/tXdg6YYPBAAJ

少なくともMozillaはそれに取り組んでいますhttps://bugzilla.mozilla.org/show_bug.cgi?id=1240072

@mrdoob 、これは、WebGL 2.0に更新されたときにThree.js APIが<script type="module">を利用することを期待できることを意味しますか？ ;）

ところで、当面はWebGLRendererにWebGL2.0サポートを追加するのが最も簡単だと思います。 これにより、段階的な採用が可能になり、機能検出を実行してWebGL2機能を使用できるかどうかを確認できると思います。 それが一番難しいことではないと思います。 純粋なWebGL2レンダラーとは対照的に、少し複雑になることはわかっていますが、短期的および中期的には最も簡単な方法です。 そして、WebGL 2の採用率が90％を超えると、最終的にWebGL1を残すところまでゆっくりと進化します。

Khronosはwebgl2でウェビナーを開催しました。
https://docs.google.com/presentation/d/11-mTDNmSJzJnRVGu9Vu6AUzOt34yV3PO7oqw4E5wc2o/edit#slide = id.gd15060520_0_38
メディアはまもなく公開されますが、プレゼンテーションは主にスライドのナレーションとスライド内の関連するデモでした。

これには、既存のWebGLRendererからの「更新」ではなく、新しい開始が必要であることは明らかです。

es6モジュールに関しては、ソースの現在のアプローチはes6モジュールであり、バンドルにロールアップを使用することは、「デュアルビルド」をサポートする方法であると思います。

私はこれを1週間ほど行い、Safari TechPreviewでモジュールをテストし、すべてのブラウザーでバンドルをテストしました。 実際には、現在のバンドルだけでなく、ソースツリーもビルド/持つことになります。 現在のワンライナーロールアップ、およびモジュールで使用するためのソースツリーのコピー。

@bhouston誘惑...

最新のステータス？

私はこれについてどういうわけか複雑な感じを持っています。 当初、私は@bhoustonが提案したのと同じパスを考えていましたが、現在のWebGLRendererにwebgl2機能を段階的に追加していきました。 しかし、それはレンダラーをより複雑にし、2つのバージョン間で最も異なる機能を処理するのを難しくし、ブランチと条件チェックでいっぱいの厄介なコードになってしまいます。
1つのオプションは、 WebGLRendererをWebGL2Rendererの開始点として複製し、元のレンダラーをいじることなく機能を削除/追加し続けることです。
おそらく最も初期のwebgl2サポートを備えたPlaycanvasのようなエンジンを見ると、UBOやVAOのような新しいwebgl2機能を利用していないことがわかります。これは、変更されるものだからです。エンジンの多くの部分。

同じレンダラーで両方のバージョンを混在させようとすると、コードの保守が難しくなり、webgl2が完全にサポートされるようになるとすぐに、とにかくこれをリファクタリングする必要があると強く信じています。 webgl2を念頭に置いてゼロから設計するのではなく、互換性を維持するために設計に従うことを余儀なくされました。

ですから、私の投票は、遅くてもWebGL2Rendererを最初から始めることです（webgl2が100％のサポートに近づくまで、まだ改善の余地があります）。

テクスチャやプログラムなど、レンダラー自体以外の一部のファイルを変更する必要があります。 サブフォルダーrenderer\webgl2を作成し、そのレンダラー用に特別に作成されるファイルを追加し続ける必要がありますか？

webgl2と完全に互換性のあるレンダラーを作成するときにそれらを念頭に置くために行う必要のある変更のリストで問題を作成することができます。また、MVPが議論に集中するために必要な機能のリストを作成することもできます。これらはこの初期状態で、実装に関するより深い会話を開始します。

その開発に関する最新情報はありますか？

まだ。 今月はWebVRを優先していました。

上記の@fernandojsgで提案されているように、WebGL2およびES3シェーダー言語への素早い「n」ダーティインプレース変換を試しました。 押しつぶされた差分は次のとおりです。https ：//github.com/tstanev/three.js/compare/master ... tstanev：traian / webgl2実際、最初に予想したほど悪くはありません。 戦略的に配置されたifdefを介して両方をサポートすることは、それほど醜いことではないように見えます。
[編集：更新されたリンク。]

@tstanev実用的な例はありますか？

リンクされたブランチにバンドルされているthree.jsの例は機能しています（diffでわかるように、以前に拡張機能が必要なものを変換しました）。 リポジトリ/ブランチのクローンを作成して、ローカルで実行できます。

@tstanevオンラインでwebgl2の変更のパフォーマンス比較を行うのはどうですか？）それを見るといいでしょう。 （webgl2のthree.jsとthree.js）

こんにちは
この最高のアイデアをありがとう。
プログラムでwebgl2rendererを使用したいのですが、プリコンパイルバージョン（r86）で使用できなかったため、ソースを取得し、three.jsインポートでwebgl2rendrerのコメントを解除してからビルドします。
これで、私のコードと例（webgl2-sandbox）はエラーなしで実行されますが、何も表示されません

編集：私はFirefox54とChrome60でそれらをテストしました
bufferGeometryとShaderMaterialを使用した私の例は、webglrendererで正しく機能します

誰も私に答えませんか？ webgl2rendererの現在の問題は何ですか？

@ MHA15は、まだ本番環境の準備ができていないため、おそらくビルドには含まれていません。

やあみんな、WebGL2Rendererの開発はどうですか？
ゼロから作り直すことにしたことは知っています。 しかし、それを再現するのは大変な作業であるため、しばらく経ち、このトピックの開発は少し遅いと思います。

この時点で、 @ mattdeslがhttps://github.com/mrdoob/three.js/issues/8125で行ったように、WebGLRendererのクローンを作成してWebGL2に変更することを再検討できますか？ 次に、 @ fernandojsgが言ったように、UBOのようないくつかの新機能に基づいてレンダラーを変更できます。 最終的には、これらのwebgl1レガシーコードをすべて削除します。

私の意見では、レンダラーを最初から作成するには膨大な量の作業が必要であり、理想的には少数の貢献者からしか開始できません。 この会話は1年前に始まりました。 そして、私たちが数ヶ月をフルタイムでゼロから構築する救世主がいるという点に到達しない限り、私たちはおそらく来年同じページにいると信じています。

私の意見では、レンダラーを最初から作成するには膨大な量の作業が必要であり、理想的には少数の貢献者からしか開始できません。

それは本当です。 しかし、それでも、どこにでも条件文を追加してWebGLRendererの保守を難しくするよりも簡単だと思います。 私は過去5年間のほとんどを、 WebGLRendererを読みやすく維持しやすくするために費やしてきました。

また、 @ fernandojsgは今後数週間でそれを試してみる予定だったと思います。

それは素晴らしいです。 @fernandojsgからの素晴らしい仕事を楽しみにしています！

PS私は言わなければならない..コンピュータグラフィックスの私の視野を広げてくれたこのプロジェクトのすべての貢献者に感謝します。 将来、いくつかの例を提供できることを願っています。

@mrdoobに同意します。現在のレンダラーを変更するよりも、新しいレンダラーを最初から作成する方が簡単です。
彼が言ったように、私は次の週にそれを試してみたかった。 私のアプローチは、画面上の単純なボックスに必要なものだけを作成し始め、既存のものを取得してリファクタリングするのではなく、段階的に機能を追加し続けることです。
例として、 WebGLRendererの現在の状態を見てみましょう。モジュール化とカスタマイズ性を高めることについて多くの議論がありましたが、内部コードが時間の経過とともに改善され続けたとしても、外部ではただのブラックボックス。
何かがうまくいくようになったらすぐにPRを開き、そこで次のステップについて話し合い続けることができます。

私たちがそれにいる間... 5f889ce296aaf447ec5992a6df726691098a9110 8aab6e0382cd6ba8fd3fb943e7f65141bf3a50bc
webgl2_sandboxは再び機能します（ただし、es6モジュールが必要です）。

@mrdoobマスター/リリースでいつ利用可能になるか、大まかな見積もりはありますか？ :)私はそれが起こっていることを嬉しく思います！ :)

@wdaniloそうではありません... WebGL2のどの機能が必要ですか？

@mrdoobの最大の改善点は、Uniform BufferObjectsとSampler2DArrayによるものです。 アルファマップでマスクされた複数のマテリアルをレイヤー化する複雑なシェーダーを使用しているため、テクスチャユニットの制限に直面しているため、テクスチャ配列は現在のプロジェクトにとって非常に有益です。

@mrdoob glslのflatのような新しいキーワードも非常に役立ちます。

私のプロジェクトには3Dテクスチャが必要です。

面白い...
人々がWebGL2.0を必要とする特定のケースを認識するのに非常に役立ちます。
それらを続けてください！

3Dテクスチャも私たちの大きな特徴です。 いくつかのシェーダー機能も使用していると思います。

時々MRTが欲しい

複数のレンダリングターゲットに対しても+1

WebGL1では拡張機能を介して複数のレンダリングターゲットがすでにサポートされており、ThreeJSにはPRもあります： https ：//github.com/mrdoob/three.js/pull/9358（デモ）。

マルチサンプルレンダリングターゲットが私のお気に入りの機能だと思います。 ほとんどのクライアントは後処理（ブルーム、LUTなど）を要求しますが、ポストFXが実装されると、適切なアンチエイリアシングがないことに失望します。 MSAAレンダリングターゲットを使用すると、最終的にアンチエイリアス処理された後処理されたシーンを作成できます。

同意します。 エフェクトコンポーザーを使用した後処理シーンでのアンチエイリアシングの回避策シェーダーは、真のアンチエイリアシングには不十分です。

ドローフィードバックの+1。 または、すでにwebgl1拡張機能としてサポートされていますか？
三つ？

2017年12月14日木曜日午後9時45分カイル[email protected]は次のように書いています。

同意します。 後処理されたシーンでのアンチエイリアシングの回避策シェーダー
エフェクト付きのコンポーザーは、真のアンチエイリアシングには不十分です。

—
コメントしたのでこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/9965#issuecomment-351815640 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AHTX1RhYdGuTVSpmOy1ka-6gy1eslHQAks5tAXrFgaJpZM4Kj_9l
。

ここにいくつかのユースケースがあります：

1. MRTが必要です-現在、同じシェーダーを4〜5回レンダリングしており、異なるバッファーを取得するためだけに属性を変更しています。
2. アンチエイリアシングを使用したテクスチャへのレンダリングは、私たちにとって重要な機能です。視覚化プレビューを備えた「ノードエディタ」を作成します。 それぞれの視覚化は、私たちが何かを描く単なるテクスチャであり、適切なアンチエイリアスはここでは苦痛ではありません。
3. 「flat」キーワード-私は現在、float属性を使用してジオメトリにインデックスを付けていますが、これは明らかに最適ではありません-uint属性を使用したインデックスよりも悪いです。 この属性を頂点からフラグメントシェーダーに渡しますが、「フラット」kwrdのサポートがないため、現在uintを使用できません。
4. （小さい）3Dテクスチャは、近い将来サポートしたいハイエンドの視覚化に最適です。

アンチエイリアシングと後処理を一緒に使用することは、私にとって最も重要なことです。

@mrdoob私のトップ3のWebGL2機能/ユースケース（重要度の高い順に）：

1. マルチサンプルレンダリングターゲット：後処理での適切な（MS）AA用。
2. 整数テクスチャ：符号付き距離フィールドなどの画像ベースのアルゴリズムを実行したり、DEM（数値標高モデル）などのよりエキゾチックなテクスチャベースのデータを使用したりします。
3. 変換フィードバック：パーティクルシステムを実行するため。

ちなみに@mrdoob 、なぜ＃9358 PRがマージされなかったのか知っていますか？ @mattalatが書いたように、それはマルチターゲットレンダリングをthreejsにもたらします。 2年前にコミットされ、他の変更を最新に保つために数回修正されましたが、今まではありません:(

SDFの形状記述を多用したシーンがあるので、質問しています。 各シェイプは6つの異なる出力を出力するので、0から5までのシェーダー番号に渡して6回計算します。複数の出力を使用すると、パフォーマンスが5倍向上します。

@wdaniloおそらく適切なタイミングではありませんでした（当時、レンダラーで多くの物を動かしていました）。 また、競合を起こしやすいビルドが含まれているようです。 新しいPRをするために誰かがいますか？

/ cc @edankwan

3Dテクスチャとマルチサンプルレンダリングターゲットが必要です。

現在そのようなことを行う別の方法がない限り、depthTexture.type = THREE.FloatType ..を設定できるように使用したいと考えています。

1以外のLineThicknessがWindowsおよびWebGL2.0で機能するという希望はありますか？ はいの場合、それは私たちの出力のいくつかを改善するでしょう。

そして、ここで私は自分自身に返信します。 SOで3本の線の基本的な材料を使用して線の太さを読むとにかく、太い線には将来的にジオメトリが必要になることを理解しました。

@ Richard004これはWebGL2とは何の関係もありません。この機能リクエストのPRはすでにあります。＃11349を参照してください👍

こんにちは@mrdoobと@ Mugen87
フラグメントシェーダー内のビット操作と動的配列のインデックス付けが必要です。 最初のものはおそらくあまり一般的ではありませんが、CUDAカーネルをWebGL（GLSL）に移植しようとしているので、それが必要です。他のシェーダー言語ではビット操作が可能ですが、WebGL 1.0（GLSL）ではできません。

2つ目は、多くの開発者が恩恵を受ける可能性があると思います。つまり、変数を使用して配列要素にアクセスすることです。 現在、WebGL 1.0（GLSL）では、次のようなプログラムは失敗します。

int myData[200];
int x = 3; // 'x' might change later based on my lookup needs
int requestedData = myData[x];

ただし、WebGL 2.0では、これを行うことができます。 多くの場合、配列からさまざまな値を取得する必要があるループ内で必要になりますが、反復ループ（たとえば、上記の例では0から199）を実行することはできません。これは、すべての単一をチェックする必要があるためです。要素とそれは本当に遅いです。

後処理でのアンチエイリアスは間違いなく有益です。

このすべての下での質問です：Threeの新しいアーキテクチャの時間ですか？

最近、D3バージョン4を使い始めました。これは完全に再設計されたものです。 Es6
モジュール。 そしてはるかに重要なのは、 30個のモジュールで、それぞれが独自のものでした。
レポ。 D3アーキテクチャを確認することを強くお勧めします。

スリーにこれが必要だと言っているのではありませんが、
メジャーバージョンバンプ。 部分的にwebgl2が原因です。 しかしまた必要性のため
サブモジュール。

例：D3「選択」リポジトリ/サブモジュールがあります。 それはあなたの基本です
jQuery DOMモジュールですが、DOMのすべての冗長性が隠されています
機能的なチェーンデザイン。 残りの部分を使用せずにそのまま使用できます
D3。

すべてのWebGLを作成した3つの独立したモジュールが好きではありませんか
冗長性が消えますか？ たぶん、webgl ctx / shader用の複数のサブモジュールですら
管理、バッファ管理など。 確かに、バッファジオメトリは
このようにたくさん。 パーツからシェーダーを作成するための同上。

ちょっとした考え。

@ fetox74すでにAAを実行できることは間違いありませんhttps://threejs.org/examples/?q=fxaa#webgl_postprocessing_fxaa

@elunty FXAAShaderは、元のアンチエイリアスと比較して十分な結果を生成しません。私はこれを実際に使用しました。

私は主にVAOとミップマップへの書き込みに興味があり、その仕様で可能になることを願っています。

@pailhead関連＃8705：ウィンク：

EXT_shader_texture_lodのネイティブサポートを楽しみにしています。
ほとんどのAndroidデバイスとMSEdgeおよびInternetExplorerでMeshStandardMaterialおよびMeshPhysicalMaterialを使用しているときに生成されるアーティファクトを解決できる場合があります

@mrdoobThreejsをWebgl2.0に更新する計画はありますか？ このスレッドは文字通り何年もかかり、他のすべてのフレームワークがすでに前進している間、実際には何も変わりません。 私はすぐに難しい決断をするでしょう、私たちはおそらくバビロンか何かの上に移住しなければならないでしょう、そして私は本当にスリーと一緒にいたいと思います。 もしあれば、その近代化の計画はありますか。

@wdanilo WebGL 2.0がプロジェクトの優先事項である場合は、バビロンに移行することをお勧めします。 three.jsの寄稿者がそれに取り組むことを計画していることは知っていますが、私は個人的にWebVRとアーティストのワークフロー（svgサポートなど）に焦点を合わせています。

@mrdoobここでの迅速な回答に心から感謝します。 私は本当にthree.jsを放棄したくないです。 libが内部でどのように構築され、「ゲームに焦点を合わせた」などではなく「一般的な」フレームワークであるという前提が気に入っています。とにかく、情報とこれを明確にしていただきありがとうございます。

（ @takahiroxに感謝します、私はこのスレッドを知っていました）。 プルリクエスト＃13692を作成しました。 私はそれに焦点が当てられていないことを理解していますが、私たちの目的のために、それはうまく機能しています。

関連＃13702

＃9965と＃12250に続いてWebGL2ベースブランチを作成しました

リポジトリ： https ：//github.com/takahirox/three.js/tree/WebGL2Base
例： https ：//rawgit.com/takahirox/three.js/WebGL2Base/examples/index.html

それを使ってWebGL2.0 + Three.jsを起動できます。

（ @yoshikiohshimaの仕事と矛盾してすみません）

@mrdoob three.js / dev-2.0のようなWebGL2Rendererのブランチを作成できますか？ または、それをdevにマージして、webgl1とwebgl2の間にまだ多くの重複したコードがあるのでしょうか？

私はこの問題に関する過去の開発に不慣れです。 @takahirox 、あなたが取っている戦略とhttps://github.com/takahirox/three.js/tree/WebGL2Baseによってサポートされているものを要約できますか？ （そしてまた私の無知をお詫びします）しかし、私はWebGL2をサポートするために多くの重複したコードの必要性を見ませんでした。 問題は何ですか？

@mrdoob three.js / dev-2.0のようなWebGL2Rendererのブランチを作成できますか？ または、それをdevにマージして、webgl1とwebgl2の間にまだ多くの重複したコードがあるのでしょうか？

なぜこれに新しいブランチが必要になるのかわかりません。 なぜ重複したコードがあるのでしょうか？

競合はないようです。 現在、WebGL2.0には2つの要求があります。

1. WebGL2Rendererを作成して、WebGL2.0の全機能をサポートし、適切に最適化する
2. 既存のWebGLRendererにwebgl2サポートを追加します。 ただし、WebGL2.0の機能は完全にはサポートされておらず、レンダラーを混乱させたくないため、WebGL2.0用に最適化されていません。 つまり、基本的にこれは、Three.js + WebGL2.0 + GLSL3.0の早期アクセスのためだけのものです。

私の仕事は1です。彼の仕事は2です。重複したコードはなく、2の新しいブランチを作成する必要もありません。

@takahiroxとりあえず、同じ支店で働くほうがいいと思います。

改善すれば...

https://github.com/mrdoob/three.js/blob/dev/src/renderers/WebGL2Renderer.js

webgl2の例では、クラスを直接インポートします（ビルドは必要ありません）...

https://github.com/mrdoob/three.js/blob/dev/examples/webgl2_sandbox.html#L39 -L47

衝突があってはなりません。

1つのWebGLRendererでWebGL2.0のサポートを開始しているように見えるので、これまでのところ私のWebGL2Baseを忘れることができます。

WebGL2Rendererの実装をまだ考えていますか？
私は最近WebGL2サポートを追加することをたくさん探していました、そして私は私のリベースのためにtakahiroxの変更を待っています。 しかし、いくつかの変更を行った後、WebGLTexturesオブジェクトと同様に、レンダラーを書き直すことは本当に良い考えだと思い始めました。 それでも話題になったら参加してよかったです。

そうだと思います。 現在のWebGLRendererに基本的なwebgl 2.0サポートを追加することは、 WebGL2Rendererで作業している間に何かを持っているだけだと思います。

レンダラーの書き直しを開始し、PRを送信してください（理想的にはステップバイステップ）。

明らかな質問をした場合はお詫びしますが、この問題全体を読んだ後、最後の投稿は半年前であり、マスターソースコードと例の両方でwebgl2への参照をいくつか見つけた後、私はまだそれを完全に理解できないようです。

webgl2がThree.jsの現在の状態で使用できるかどうか疑問に思いますか？ （単純なバッファジオメトリメッシュをレンダリングする場合でも）EffectComposerはwebgl2-context対応のレンダラーで動作しますか？ レンダリングターゲットを何らかの方法で調整する必要がありますか？

もちろん、最大の問題は、カスタムパスでcomposerを使用するときに、現在適切なアンチエイリアスを取得できるかどうかです。

最終的には、WebGL 2.0機能をWebGLRendererに追加することになったようです。
ただし、WebGPUには必ずWebGPURendererが必要です。