タグ レンダリング
人気順 5 users 50 users 100 users 500 users 1000 usersWebブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD(MikuMikuDance)やApple Vision Proサポート
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD(MikuMikuDance)やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD(MikuMikuDance)やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行わ... 続きを読む
テーブルの仮想スクロールとスクリーンリーダー向けのアクセシビリティ
Webアプリケーションで、大量のデータを表示したいときに使われる、「仮想スクロール」と呼ばれるテクニックがあります。 大量のデータを素直にDOMに挿入してしまうと、レンダリングの処理に非常に負荷がかかり、場合によってはブラウザをフリーズさせてしまったりします。そこで使われるのが「仮想スクロール」です。ス... 続きを読む
useEffect: 基礎から使用すべきでない例まで
はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種... 続きを読む
Googleがリアルタイムに高精度なレンダリングを実現する新技術「SMERF」を発表
画像や映像から立体的なイメージを生み出せる「NeRF(Neural Radiance Fields:ニューラル輝度場)」や「MERF(Memory-Efficient Radiance Fields:メモリ効率のいい輝度場)」をさらに発展させ、センチメートル単位の精度のレンダリングを行いつつも必要スペックはMERF並みな「SMERF」という技術を、Googleの開発者チームが... 続きを読む
PythonやR対応の統合開発環境「JupyterLab 4.0」正式リリース。 より効率的なレンダリング、リアルタイムコラボレーション機能が分離など
PythonやR対応の統合開発環境「JupyterLab 4.0」正式リリース。 より効率的なレンダリング、リアルタイムコラボレーション機能が分離など Project Jupyterは、オープンソースで開発されているWebIDE「JupyterLab 4.0」の正式リリースを発表しました。 JupyterLabは、Webブラウザから使えるPythonやR、Scala言語などに対... 続きを読む
Webブラウザ上で3D/2Dモデルをぬるぬる動かせる「Babylon.js 6」正式版に。レンダリング性能が最大50倍、WASM化した物理演算エンジン搭載、液体のレンダリングも
マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 6.0」正式版をリリースしました。 We are thrilled to officially announce the release of Babylon.js 6.0! The web just got a WHOLE lot more exciting!... 続きを読む
原理から考えるCSSアニメーションのパフォーマンス改善
ブラウザに描画されるWebページをデジタルイラストに例えて、レンダリングの仕組みからCSSアニメーションのパフォーマンスを考える視点を解説します。 また、近い将来、GPUアクセラレーションをはじめとするパフォーマンス事情がどう変わっていくのかについても触れ、新たに主流になるかもしれないアニメーション実装手... 続きを読む
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
Oracle Database Technology Night #63 Oracle Exadata Database Serviceを活用したハイブリッド・ディザスター・リカバリー実践 前半 続きを読む
「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました(日本語訳版が同時公開されています)。 回答者の国別分布を上位5位までを見ると米国が11.9%、ドイツが5.2%、フランスが3.7%、イギリス(UK)が3.6%、そしてインドが3.2%。 言... 続きを読む
React for Web/Reat Native両対応のUIフレームワーク「Tamagui 1.0」正式リリース。最適化コンパイラで高速なレンダリングなど実現
React for Web/Reat Native両対応のUIフレームワーク「Tamagui 1.0」正式リリース。最適化コンパイラで高速なレンダリングなど実現 React for WebとReact Nativeの両方に対応しオープンソースで開発されているクロスプラットフォーム対応のUIフレームワーク「Tamagui 1.0」が正式にリリースされました。 Tamaguiを用いる... 続きを読む
「すずめの戸締まり」制作でもAWSが活躍 レンダリングで活用 エンドロールにも……
11月11日に公開となった新海誠監督の映画最新作「すずめの戸締り」。制作に当たってはレンダリングなどの用途にクラウドサービス「Amazon Web Services」を活用したという。エンドロールにもロゴが……。 11月11日に公開となった新海誠監督の映画最新作「すずめの戸締り」。制作に当たってはレンダリングなどの用途にクラ... 続きを読む
ふっさふさの髪の毛が簡単に描ける「Blender 3.3」がリリース ~2年サポートのLTS/Intel Arc/AMD Vega GPUをフル活用したレンダリングにも対応
ダイナミックレンダリングをGoogleはもはや推奨せず、回避策であり最終手段 – 海外SEO情報ブログ
[レベル: 上級] ダイナミック レンダリングに関する技術ドキュメントを Google は更新しました。 ダイナミック レンダリングの利用を推奨せず、別の方法を採用するように強く促しています。 ダイナミック レンダリングは回避策であり非推奨 こちらは更新前のドキュメントの最初のセクションです。 こちらは更新後のドキ... 続きを読む
Webブラウザのレンダリングの仕組みを理解する
参考:https://ja.wikipedia.org/wiki/HTMLレンダリングエンジン 2 レンダリングの仕組み レンダリングの大きな流れは下記のようになります。Webブラウザは、サーバーなどからHTML等のリソースを受け取り①〜⑥の処理を経て、レンダリングを実行します。それでは各処理の概要を見ていきます。 ※点線は、HTML内にCSSやJavaS... 続きを読む
プロジェクトスタジオQ流 BlenderでつくるアニメCG 第1回:レンダリングについて
アニメやCG制作を中心に活躍しているプロジェクトスタジオQがBlenderでのアニメ制作の実務テクニックを解説! これから導入を考えている方や、アニメ業界を志望する学⽣の方へ、これまで培ってきたノウハウを紹介します。 はじめに はじめまして。プロジェクトスタジオQ、モデリングディレクターの林田 樹です。普段は... 続きを読む
高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジン・「LittleJS」
LittleJS LittleJSは高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジンです。他ライブラリに依存せずに動作してくれます。 軽量、シンプルで、様々なゲーム開発に使えるライブラリを目指しているそうです。超高速レンダリング、物理演算、パーティクル、サウンドエフェクト、キーボード/マウス/ゲ... 続きを読む
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題... 続きを読む
ブラウザレンダリングの仕組み
以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか?」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバか... 続きを読む
リソースの読み込みを助けるウェブブラウザ API の世界
ウェブブラウザはネットワークから様々なリソースを集め、それらを処理して組み合わせてウェブページをレンダリングします。リソースが揃わないとレンダリングできないので、この一連の処理のどこかが遅れるとページの表示も遅くなります。レンダリングをすみやかに開始できるようにウェブブラウザはリソースの取得やそ... 続きを読む
これは使わないと!レンダリングのパフォーマンスが向上する、CSSの新しいプロパティ「content-visibility」 | コリス
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Firefox, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介しま... 続きを読む
Webページ高速化に必須の知識!ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説 | コリス
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいな... 続きを読む
useEffectのdeps比較関数をカスタムしたくなったときにやること - uhyo/blog
Reactにおいて、useEffectなどいくつかのフックは第2引数として依存リストを取ります。 例えばuseEffectの場合、レンダリングの度に依存リストのいずれかの値が前回から変化したかどうかがチェックされ、変化していた場合はレンダリング後にコールバック関数が呼び出されます。 具体例としては、次のコンポーネントはcou... 続きを読む
Google検索のレンダリングとは?――Google Webmaster Conferenceのライトニングトークより #GWCPS | 海外SEO情報ブログ
[レベル: 中級] この記事では、昨日に続いて Google Webmaster Conference Mountain View でのライトニングトークをレポートします。 セッションテーマはレンダリングです。 Rendering: レンダリング レンダリングによって、ユーザーが見ているものと同じものを Googlebot が見ることができる。 [左: レンダリング前、右... 続きを読む
Googleが画像遅延の仕組みNative Lazyloadプラグインをリリース - Capital P
GoogleがWordPressプラグインNative Lazyloadプラグインをリリースした。このプラグインはその名前の通り、Lazy Loading(画像などの遅延読み込み)を実現するもの。画像読み込みでロックされるレンダリングを早くしようというものだ。このサイトCaptal Pでも導入してみたので、気になる方はチェックしてみてほしい。も... 続きを読む