半年間WebGL系の翻訳作業してみた

この記事はWeb グラフィックス Advent Calendar 2020の23日目の記事です。
以前からWebGL系のOSS活動を何かしたいと思っていたので、英語スキルUPも兼ねて翻訳作業に取り組んでみました。

何を翻訳したの？

Three.js Fundamentalsの記事を21ページ、WebGL2 Fundamentalsの記事を7ページ翻訳しました。

• Three.js Fundamentals (全部で42ページ。27ページ翻訳済み）
  

• WebGL2 Fundamentals（全部で77ページ。7ページ翻訳済み）
  

翻訳作業はほぼ週末だけですが、毎週1ページを目標に半年ぐらい続けてます。

1ページのボリュームが結構多いので最初は1ページ8hぐらいかかってましたが、最近は4hぐらいでPRできるようになりました。
始めは1人でやろうと思ってましたが、基礎編の翻訳を手伝ってくれたNayuTSさん、ありがとうございます！

Three.js Fundamentalsを選んだ理由

Three.jsの最新バージョンに追随してる

threejsfundamentalsのpackage.jsonを見ると分かりますが、最新のThree.jsバージョンを追随しており最新版でも動作するように定期的に更新されてます（Three.jsの最新はr123で、今はr122で止まってますが）

連載が完了しており、今後は大きな修正が少ない

始めはThree.jsの本家ドキュメントのintroductionを翻訳しようかと思いましたが、更新が少し頻繁なので変更が少ない所で始めたかった。

内容が初級〜中級向け。失敗例や応用事例もあって学びが多そう

今年の始めはモダンなThree.js環境を把握したかったので、チュートリアルをいくつかやっていました。
自分の場合は日本語版はics.mediaとwatabo_shiさんの記事がとても分かりやすかったです。
Three.js Tutorialsは英語ですが、Three.js & TypeScriptでこれも良いチュートリアルだと思います（一部node_modulesの内部を変更していて「まじか！？」と思いましたが）

• ics.media Three.js入門サイト
• three.js超入門 第1回 レンダリングまでの流れ
• Three.js Tutorials

そしてある日、Three.jsフォーラムでThree.js Fundamentalsも知りました。
基礎やTips、最適化やWebVRのノウハウが載っていて学びが多そうに感じました。

Three.js Fundamentalsから一部ページを紹介

基礎編のプリミティブのページでは、プリミティブが一覧表示で見れたりライブ編集できたり凄く分かりやすいページになっています。
Three.jsのdocsページでもライブ編集できますが、プリミティブ一覧はなかったと思います。

GLTFファイルを読み込むページでは、blenderを活用したり街を走らせるために失敗例からの試行錯誤の解決策があったりで楽しんで翻訳できました（画像は車を道路の角で曲がろうとして3Dモデルの作りが微妙で失敗した例）

翻訳の仕方

全文をスラスラと訳せるスキルはないので、翻訳はDeepLを使ってます。
Three.js Fundamentalsは1ページごとのMarkDownファイルで、以下のような手順でローカルのWebサーバーで翻訳したサイトが見れます。

1. Three.js Fundamentalsをgit pull
2. npm install
3. npm run watch
4. npm run start

DeepLで訳された日本語と原文の英語を見比べて、自分の解釈を含めて何度か見直して翻訳してます。
3D用語の翻訳は、materialは材質、varyingは変幻自在、uniformは一様や一定に翻訳されて意味がわからないので、日本訳が難しいものはカタカナ（英語）にしてます。
日本語のレビューアーはいないのでセルフチェックです。PRすると1日以内にマージされます。

最後に

WebGLを学ぶ誰かの役に立つと思い続けてるので、気になる記事があればぜひ読んでみて下さい😄
意味が分からない所があれば、ぜひ気軽に翻訳PRを出してもらえると助かります！

2021/12/06追記

翻訳した記事はthreejs.orgの方に統合されてました（タイトルの翻訳がバグってますが）
https://threejs.org/manual/#ja/fundamentals