タグ レンダリング
人気順 10 users 50 users 100 users 500 users 1000 usersWebブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート
2024/03/31
157 users
MikuMikuDance
MMD
Babylon.js
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行わ... 続きを読む
テーブルの仮想スクロールとスクリーンリーダー向けのアクセシビリティ
2024/03/24
14 users
アクセシビリティ
DOM
テーブル
負荷
テクニック
Webアプリケーションで、大量のデータを表示したいときに使われる、「仮想スクロール」と呼ばれるテクニックがあります。 大量のデータを素直にDOMに挿入してしまうと、レンダリングの処理に非常に負荷がかかり、場合によってはブラウザをフリーズさせてしまったりします。そこで使われるのが「仮想スクロール」です。ス... 続きを読む
なぜ document.title = 'title' は useEffect でラップする必要があるのか
2024/03/13
9 users
useEffect
クリーンアップ
title
エフェクト
答え(結論): レンダリングとエフェクトを分離するため クリーンアップを設定するため useEffect でラップする意味ってなくない? 以下の2つのコードはどちらもレンダリングすると Hello world と表示され、ページタイトルが Hello world になります。 const App1 = () => { useEffect(() => { document.title = 'Hello wo... 続きを読む
useEffect: 基礎から使用すべきでない例まで
2024/01/04
215 users
useEffect
effect
React
コンポーネント
はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種... 続きを読む
Googleがリアルタイムに高精度なレンダリングを実現する新技術「SMERF」を発表
2023/12/14
13 users
Nerf
センチメートル単位
精度
リアルタイム
メモリ効率
画像や映像から立体的なイメージを生み出せる「NeRF(Neural Radiance Fields：ニューラル輝度場)」や「MERF(Memory-Efficient Radiance Fields：メモリ効率のいい輝度場)」をさらに発展させ、センチメートル単位の精度のレンダリングを行いつつも必要スペックはMERF並みな「SMERF」という技術を、Googleの開発者チームが... 続きを読む
PythonやR対応の統合開発環境「JupyterLab 4.0」正式リリース。 より効率的なレンダリング、リアルタイムコラボレーション機能が分離など
2023/06/14
16 users
Python
分離
WebIDE
JupyterLab
PythonやR対応の統合開発環境「JupyterLab 4.0」正式リリース。 より効率的なレンダリング、リアルタイムコラボレーション機能が分離など Project Jupyterは、オープンソースで開発されているWebIDE「JupyterLab 4.0」の正式リリースを発表しました。 JupyterLabは、Webブラウザから使えるPythonやR、Scala言語などに対... 続きを読む
Webブラウザ上で3D/2Dモデルをぬるぬる動かせる「Babylon.js 6」正式版に。レンダリング性能が最大50倍、WASM化した物理演算エンジン搭載、液体のレンダリングも
2023/04/25
214 users
マイクロソフト
Babylon.js
液体
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アニメーションのパフォーマンス改善
2023/04/03
17 users
CSSアニメーション
原理
GPUアクセラレーション
主流
ブラウザに描画されるWebページをデジタルイラストに例えて、レンダリングの仕組みからCSSアニメーションのパフォーマンスを考える視点を解説します。 また、近い将来、GPUアクセラレーションをはじめとするパフォーマンス事情がどう変わっていくのかについても触れ、新たに主流になるかもしれないアニメーション実装手... 続きを読む
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
2023/02/22
18 users
Vercel
Next.js
Oracle Database Technology Night #63 Oracle Exadata Database Serviceを活用したハイブリッド・ディザスター・リカバリー実践 前半 続きを読む
「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答
2023/01/11
121 users
React
Jest
インド
イギリス
同時
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」正式リリース。最適化コンパイラで高速なレンダリングなど実現
2023/01/04
13 users
UIフレームワーク
最適化コンパイラ
正式リリース
web
React for Web/Reat Native両対応のUIフレームワーク「Tamagui 1.0」正式リリース。最適化コンパイラで高速なレンダリングなど実現 React for WebとReact Nativeの両方に対応しオープンソースで開発されているクロスプラットフォーム対応のUIフレームワーク「Tamagui 1.0」が正式にリリースされました。 Tamaguiを用いる... 続きを読む
『ゼノブレイド3』の進化した陰影表現は一体どのようにして生まれたのか？モノリスソフトが行った新たなキャラクター表現【CEDEC+KYUSHU 2022】
2022/12/01
6 users
CEDEC＋KYUSHU
ゼノブレイド
一体
グラフィックス
モノリスソフトの舘野氏は『ゼノブレイド3』におけるグラフィックスプログラムを担当しており、グラフィックスの中でもキャラクター表現等のタイトル固有の部分の実装を主に担当しているとのこと。 今作のキャラクターのグラフィックはアニメーション、またはイラストや漫画風の作画でレンダリングを行う「トゥーンレン... 続きを読む
「すずめの戸締まり」制作でもAWSが活躍 レンダリングで活用 エンドロールにも……
2022/11/28
141 users
戸締り
戸締まり
クラウドサービス
くら
ススメ
11月11日に公開となった新海誠監督の映画最新作「すずめの戸締り」。制作に当たってはレンダリングなどの用途にクラウドサービス「Amazon Web Services」を活用したという。エンドロールにもロゴが……。 11月11日に公開となった新海誠監督の映画最新作「すずめの戸締り」。制作に当たってはレンダリングなどの用途にクラ... 続きを読む
Denoのフルスタックフレームワーク「Fresh 1.1」登場。プラグインシステム、Preact DevTools対応、404ページのレンダリングなど新機能
2022/09/19
7 users
TypeScript
deno
FRESH
登場
最新版
Denoのフルスタックフレームワーク「Fresh 1.1」登場。プラグインシステム、Preact DevTools対応、404ページのレンダリングなど新機能 JavaScriptやTypeScriptのサーバサイドランタイム「Deno」を開発するDeno Land Inc.は、Deno用のフルスタックフレームワーク「Fresh」最新版となる「Fresh 1.1」をリリースしました。 ... 続きを読む
ふっさふさの髪の毛が簡単に描ける「Blender 3.3」がリリース ～2年サポートのLTS／Intel Arc/AMD Vega GPUをフル活用したレンダリングにも対応
2022/09/08
25 users
LTS
ふざ
Intel Arc
リリース
髪の毛
ダイナミックレンダリングをGoogleはもはや推奨せず、回避策であり最終手段 – 海外SEO情報ブログ
2022/08/11
12 users
ダイナミックレンダリング
トキ
セクション
ドキュメント
上級
[レベル: 上級] ダイナミック レンダリングに関する技術ドキュメントを Google は更新しました。 ダイナミック レンダリングの利用を推奨せず、別の方法を採用するように強く促しています。 ダイナミック レンダリングは回避策であり非推奨 こちらは更新前のドキュメントの最初のセクションです。 こちらは更新後のドキ... 続きを読む
Reactに有利なベンチマークを作ってみた 【ハードモード】 - Qiita
2022/07/14
9 users
Qiita
React
おさらい
UIライブラリ
ベンチマーク
前回のおさらい 前回の記事では、同じアプリケーションを6つのUIライブラリで実装し、Reactに有利な状況設定で作られたベンチマークを走らせると当然Reactが勝つという結果をお伝えしました。 そのベンチマークでは、「レンダリングのために高い負荷がかかっている状況でもユーザーが快適に入力を行えるかどうか」を測り... 続きを読む
Webブラウザのレンダリングの仕組みを理解する
2022/07/04
206 users
JavaS
点線
HTMLレンダリングエンジン
リソース
概要
参考：https://ja.wikipedia.org/wiki/HTMLレンダリングエンジン 2 レンダリングの仕組み レンダリングの大きな流れは下記のようになります。Webブラウザは、サーバーなどからHTML等のリソースを受け取り①〜⑥の処理を経て、レンダリングを実行します。それでは各処理の概要を見ていきます。 ※点線は、HTML内にCSSやJavaS... 続きを読む
Deno の Web フレームワーク Fresh チュートリアル
2022/06/20
7 users
deno
FRESH
フレームワーク
ビルド
デフォルト
Fresh は Deno 製の Web フレームワークです。事前のビルドを必要せず、エッジでレンダリングを提供するという特徴があります。また Islands Architecture を採用しており、デフォルトではクライアントに JavaScript が配信されることがありません。 続きを読む
プロジェクトスタジオQ流 BlenderでつくるアニメCG 第1回：レンダリングについて
アニメやCG制作を中心に活躍しているプロジェクトスタジオQがBlenderでのアニメ制作の実務テクニックを解説！ これから導入を考えている方や、アニメ業界を志望する学⽣の方へ、これまで培ってきたノウハウを紹介します。 はじめに はじめまして。プロジェクトスタジオQ、モデリングディレクターの林田 樹です。普段は... 続きを読む
高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジン・「LittleJS」
2021/10/03
24 users
サウンドエフェクト
パーティクル
軽量
物理演算
ライブラリ
LittleJS LittleJSは高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジンです。他ライブラリに依存せずに動作してくれます。 軽量、シンプルで、様々なゲーム開発に使えるライブラリを目指しているそうです。超高速レンダリング、物理演算、パーティクル、サウンドエフェクト、キーボード/マウス/ゲ... 続きを読む
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
2021/10/01
218 users
CSS
head
head内
要因
箇所
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題... 続きを読む
WPF の Window 上に Direct3D12 でレンダリングする
2021/09/29
9 users
WPF
window
Unity
お互い
手順
はじめに UI は WPF だけどメインのレンダリングに Direct3D を使いたい、というケースはあると思うのですが、 WPF は (Unity などと同じように) ウィンドウ全面をレンダリングするので何も考えずにやろうとするとお互い衝突してうまくいきません。共存させる手順をまとめてみました。せっかくなので (?) Direct3D12 を... 続きを読む
ブラウザレンダリングの仕組み
2021/05/05
1073 users
ブラウザレンダリング
サーバ
HTML
解析
ブラウザ
以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバか... 続きを読む
リソースの読み込みを助けるウェブブラウザ API の世界
2021/05/06
250 users
ウェブブラウザ
ウェブページ
リソース
API
一連
ウェブブラウザはネットワークから様々なリソースを集め、それらを処理して組み合わせてウェブページをレンダリングします。リソースが揃わないとレンダリングできないので、この一連の処理のどこかが遅れるとページの表示も遅くなります。レンダリングをすみやかに開始できるようにウェブブラウザはリソースの取得やそ... 続きを読む