GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow GraphQL実践ノウハウv2 https://speakerdeck.com/sonatard/graphql-knowhow-v2 宣言的UIの状態管理とアー…
はじめに こんにちは、ソウゾウSoftware Engineerの@sue71です。連載:メルカリShops 開発の裏側 Vol.2の13日目を担当させていただきます。 以前メルカリメルカリShopsの技術スタックと、その選定理由でBFFの実装にGraphQLを採用していることをお伝えしました。メルカリShopsをリリースしてから約半年たった今、これまでを振り返ってGraphQLサーバーを実装する上での課題やあらかじめ考えておくと良い項目をまとめてみました。また、本記事ではメルカリShopsでGraphQLの実装としてApolloを採用しているため、Apolloの利用が前提の話もいくつか混在しています。予めご容赦ください。 GraphQLの説明や、メルカリShopsの実装方法に関しては以前こちらの記事で紹介しています。こちらも是非ご覧ください。 パフォーマンス課題 GraphQLは、アプリ
GraphQL gives enormous power to clients. But with great power come great responsibilities 🕷. Since clients have the possibility to craft very complex queries, our servers must be ready to handle them properly. These queries may be abusive queries from evil clients, or may simply be very large queries used by legitimate clients. In both of these cases, the client can potentially take your GraphQL
ソウゾウの Software Engineer をやっています、@mookjp です。 8/10 の記事「メルカリShopsの技術スタックと、その選定理由」では、メルカリ Shops のアーキテクチャについて、その全体像を紹介しました。 この記事では、そのうちの BFF(Backend for Frontend) レイヤとして用意した GraphQL サーバについて、NestJS を使った実装例を交えて紹介します。 GraphQL とは GraphQL サーバ周辺の構成 NestJS とは GraphQL Module NestJS で Code First なスキーマ定義をする Object types の定義 Query と Mutation の定義 GraphQL スキーマの生成 スキーマの Breaking Change (破壊的変更)を防ぐ DataLoader を使って Bat
この記事は Rust 2 Advent Calendar 2020 - Qiita 20日目の記事です! RustとWebGPUを扱えるwgpuを使って、3DCGに挑戦しました!ので、その記録になります ここにもGif画像をあげたかったのですが大きすぎた... リポジトリ: https://github.com/anotherhollow1125/obj-viewer お試しページ: https://www.namnium.work/obj-web Firefox Nightlyでのみ動作確認しています。重いです。マウス操作等は受け付けません。 姉妹記事(ぜひ読んで!): 3DCGの基礎知識 Objファイルを描画するまで 動機とRustの良さ Rustを知るまではUnity C#でゲーム制作を行っていたのですが、Rustの魅力的な機能を知るとC#を書きたくなくなってしまい、Unityアレル
OBJのロード OBJファイルの例 BlenderでのOBJファイルの作成方法 ファイルの読み込み データの処理 ロードしたデータの使用方法 結果 他のフォーマットとローダ これまで立方体をソースコードに直接書いていました。これは扱いにくく、不便だということに同意してもらえるでしょう。 このチュートリアルでは、ファイルから3Dメッシュをどのようにロードするかを学びます。テクスチャと同じようにして実現できます。小さく、制限されたローダを書いていきます。そして私たちのものより良く出来ているライブラリでは実際にどうやっているのかという指針も与えます。 簡単化のためにここではOBJファイルフォーマットを扱います。OBJフォーマットはとてもシンプルなフォーマットです。一つの頂点に対して一つのUV座標一つの法線のみを扱います。(法線が何であるかはすぐには分からなくても大丈夫です。) OBJのロード c
この記事はRust wgpuで3DCGに挑戦するの姉妹記事になります。姉妹記事のほうは Rust 2 Advent Calendar 2020 - Qiita の20日目記事にもなっています! 2つの記事は、Unityによるゲーム制作に嫌気がさした筆者が、ゲーム制作の未来を担うモダン言語Rustでゲーム制作を行うために3DCGをやってみるという内容です。本記事ではこのうち、理論編ということで、今回取り組むうえで必要だった知識について、Rustとwgpuに関係ない部分を簡単にまとめています。3DCGを行うためのすべての知識を列挙しているわけではない点に注意してください。 Unityで3Dモデルをロードする方法(あるいはBlenderで3Dモデルをエクスポートする方法)はいろいろありますが、その中でも扱いやすいObjファイルを使用して3Dモデルを描画できれば、Unityがなくても3Dゲームプロ
Today, we're releasing a very early version of rust-gpu - a new project to make Rust a first-class language and ecosystem for GPU code! GPU programming has historically been done with HLSL or GLSL, simple programming languages that have evolved along with rendering APIs over the years. However, as game engines have evolved, these languages have failed to provide mechanisms for dealing with large c
この記事は Rust 2 Advent Calendar 2020 - Qiita 20日目の記事です! RustとWebGPUを扱えるwgpuを使って、3DCGに挑戦しました!ので、その記録になります ここにもGif画像をあげたかったのですが大きすぎた... リポジトリ: https://github.com/anotherhollow1125/obj-viewer お試しページ: https://www.namnium.work/obj-web Firefox Nightlyでのみ動作確認しています。重いです。マウス操作等は受け付けません。 姉妹記事(ぜひ読んで!): 3DCGの基礎知識 Objファイルを描画するまで 動機とRustの良さ Rustを知るまではUnity C#でゲーム制作を行っていたのですが、Rustの魅力的な機能を知るとC#を書きたくなくなってしまい、Unityアレル
最近は、メタバースのブームもあり、Unreal Engineを使ったメタバース関連のコンテンツや、ウェブコンフィギュレーターなどのウェブコンテンツの相談が増えています。 ※ここでいう「ウェブコンテンツ」は、専用のアプリのインストールなしに、ウェブブラウザで体験できるコンテンツを指します。 以前は、Unreal EngineからのHTML出力を実験的な機能としてサポートしていたのですが、現在は公式にはサポートしていません(サードパーティーのプラグインなどがある場合はあります)。 しかし、ウェブコンテンツを制作する方法は、大きく分けて3つの方法が考えられます。 Pixel Streaming WebGL Render on Demand この記事では、それぞれの概要やメリット、デメリットを紹介します。 ウェブコンテンツを作る際のヒントになれば幸いです。 ● Pixel Streaming Pi
BGMが良いと話題になってた原神を最近やってみたのですが、グラフィックすごい感動したので作りたくなった これがスタート地点の海なんですが、もうすごい 海、メチャクチャ良いな~となって、海のシェーダを書いてみました。 できたものがこちら きれいな海ができました! 追記:シェーダのコードはこちらになります https://github.com/Uynet/Gensin-Sea/blob/main/Assets/Scenes/sea.shader 今回はこちらの作り方を紹介します。それでは.... えいっ まず適当に2枚の板を交差させました。これが海と浜になります。 深度値によるグラデーション 浅瀬から沖にかけてのエメラルドグリーンのグラデーションが非常によいですね。 見た感じ水の層の厚さで色が変化しているように見えます。 カメラから見た海と浜の深度値の差を取り深さを計算してみます。 d1はCo
Recreating Real-World Terrain With React, Three.js & WebGL Shaders Flight Simulator, Heard Of It? You might know about Microsoft's Flight Simulator release in August last year and like me, if you're interested in flight simulators or photorealistic recreations of real life places, you might have spent a lot of time staring in awe at the amazing detail crammed into the latest iteration of the serie
Noise is an indispensable tool for creative coding. We use it to generate all kinds of organic effects like clouds, landscapes and contours. Or to move and distort objects with a more lifelike behaviour. On the surface, noise appears to be simple to use but, there are so many layers to it. This post takes a deep dive into what noise is, its variants, how to use it on the web and its applications.
A Review of Shader LanguagesAlain Galvan ·2/12/2022 @ 6:30 PM · Updated 3 months ago A review of the state of the art in real time graphics shading languages and compilers in both graphics and compute. What are some of the differences between HLSL, GLSL, MSL, and WGSL? What are some ways to transpile shaders? Shaders are a set of instructions (so a program or kernel) that execute on programmable s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く