WARNING

本文中所提到的實習計劃是微軟未來生涯體驗計劃，在本文中可能會簡稱為微軟實習，實習計劃等等，僅代表我在微軟未來生涯體驗計劃中的心得，有可能有其他的微軟實習管道，因我沒有參與，故在本文中不做討論

前言

因為今年的實習招募快要開始了，而且在我參與微軟實習計劃時有關聯的人也都陸陸續續離開了，因此決定寫心得文紀錄一下過去的時光。寫這篇文也是為了讓正在評估要不要參與微軟實習計劃的學生們能參考看看微軟實習的生活是不是你想要的

聲明

1. 這篇文會從我自己的視角來分享我實習的經驗和心得，沒辦法代表其他實習生的立場，特別是不同部門、不同職位的實習生跟我的經驗可能會有很大的差異，這點大家再自己評估看看。這篇文會主要分享RDI在 Maps Services Engineering 工作的心得
2. 在參與微軟實習之前，我沒有在其他任何公司做過類似的實習，因此無法對於微軟實習的RDI職位和其他公司軟體工程師的實習作出比較
3. 這篇文不會寫任何跟面試有關的內容，如果需要參考的話可以自行上網尋找
4. 若實習計劃方對於本文有任何疑慮以及需要修改、無法透露的資訊，請寄信至mirrorshih@gmail.com聯絡我，我將協助修改

FAQ

在開始寫心得前，先解釋一些常見的問題

1. 好像很多人以為未來生涯體驗計劃的5個實習職位工作內容會跟同職位的實習生相同，其實不是這樣的，每個職位的實習生可能會在不同的部門下面工作，因此就算是同職位的實習生之間工作內容的差異也很大。
2. 未來生涯體驗計劃官網上寫的委託人力資源公司是什麼意思？ 簡單來說就是這個實習計劃會透過人力資源公司來聘用實習生，在公司內實際的身份更接近contractor，就我所知微軟也有直聘的intern名額，但相對稀少，轉正的機會可能也比較大。

實習生活

我當時在 Maps Services Engineering 實習的時候是可以完全WFH的，除了onboard和offboard時要去辦公室還電腦以外，大部分時候完全不進辦公室也沒關係。辦公室時不時會有一些小活動，像是萬聖節的時候有科學怪人、南瓜燈的軟餅乾，聖誕節時有熱紅酒、蛋糕、聖誕樹等等，因此雖然不是強制要進辦公室，但跟我同屆的實習生們還是會約好一起進辦公室，不管是討論一下各自的工作或是聊聊天。現在懷念起來那是一段很快樂的時光，實習的工作壓力沒有正職那麼大，通常也更容易拿到一些好玩的project可以做，也不會有太多routine但無聊的事。

雖然說都是在 Maps Services Engineering 這個部門當intern，但其實每個實習生也會被分配到不同的小team，雖然都跟地圖服務有關，但每個team負責的事情不太一樣，這邊就不細談。每個intern都會有一個自己的mentor，通常mentor會負責帶intern做project，遇到技術上的問題或是流程上不懂的部分都可以問mentor。有些mentor也會關心實習生的生活，甚至會跟實習生討論找工作的心得XD跟正職們聊天獲益良多。實習生活快結束的時候，由於是做地圖相關的服務的部門，當時我所待的team還辦了一個大家一起玩geo guesser的活動，讓我驚訝的是大家都好厲害，可以看路牌就知道地點在哪，身為一個國外旅遊經驗不足的小小實習生，我都只能關麥在旁邊聽大家討論XD

在實習計劃中，除了主要的部門工作以外，我也參加了很多活動，像是校園分享會、工作坊、就業博覽會等等。每次跟其他學生分享自己準備面試、履歷、以及實習經驗的時候，我都覺得好像看到一兩年前的自己，坐在台下迫不及待地想要描繪未來的樣子。準備活動很累，要做簡報，要寫稿，要自己練好幾次，但每次結束後都覺得很值得。希望未來的我莫忘初心，成為一個樂於跟學生分享經驗的好前輩。

軟體工程與軟實力

未來生涯體驗計劃是一個長達一年的實習，我自己常聽到別人說短期的實習通常會給intern一個project來做，但不一定跟同部門的正職做的事情有關，最後你做的project可能實習結束就不會再被使用了。但長達一年的實習更像是一個小正職，大家會從原本就在做的事情中切出一部分給你，跟正職們的合作可能會更密切，不會像是自己做一個玩具小project的感覺。

在實習中我體會最深刻的是工程師不是一個人在工作，我個人以前還是學生身份的時候有一些迷思，覺得工程師不太需要與人交流，也不太需要什麼軟實力，只要技術能力夠強就好，但在實習中深深感受到資深工程師和自己的差距。

還記得實習剛開始時，跟mentor 1 on 1的時候都不知道要講什麼，做了一些東西但沒辦法清楚地說明，或是有問題的時候也沒辦法清楚地描述問題。但每次mentor都可以快速地釐清問題，並且用非常精準的文字描述出來，讓人一聽就懂。在意識到這個問題之後，我會在meeting開始前先整理一下這禮拜想要討論的內容，順便梳理一下細節，以方便meeting的時候可以快速說明。

跟自己一個人做project最大的不同，在工作中需要讓其他人也知道你在做什麼，可能是code層面，可能是feature層面，要清楚地解釋並讓合作的人都懂不是一件容易的事。在這個過程中可能需要寫design，需要寫document，需要畫圖，還記得我拿到最多comments的PR通常都不是跟code有關的，都是document沒寫清楚XD

如果讀者未來也想做軟體工程師，而且剛好有一個實習的機會，我會建議要利用這個機會好好觀察那些資深工程師都是怎麼開會，怎麼解決問題的。畢竟junior和senior負責的scope不一樣，如果不特別觀察，只focus在自己的事情上我覺得有點可惜，錯過了一個可以在正式工作前就提升軟實力的機會。

每週的1 on 1，除了討論project，我也會跟我的mentor討論一些soft skills、面試等話題的看法，我很感謝我的mentor願意百忙之中花時間跟我聊天，在微軟實習這段時間獲得的寶貴經驗讓我在之後開始正式工作後沒有遇到很大的陣痛期。

在 Maps Services Engineering 部門，intern會負責下一屆intern的面試，面試的形式就是傳統的coding interview，解白板題。當interviewer也是很有價值的一件事，在短時間內面試大量的candidates，有表現好的，也有表現不好的，可以從中總結出不少面試需要注意的事，而且大部分很難用文字或口頭傳遞，是一種interviewer視角的感受。除了面試coding interview以外，我也有參與到pm intern的behavioral interview。這段負責面試的經驗也為我之後找工作面試時帶來不小的幫助，不管是coding還是behavioral，更容易知道interviewer想要看到什麼樣的signal。

突然的離別

在實習的過程中，離別其實並不稀有，那些常常跟我們聊天的正職，有人可能選擇轉team，有人則可能選擇離職。在實習快結束時，我所在的 Maps Services Engineering 部門經歷了一次大搬遷，從信義搬到南港，那個我和其他intern一起吃午餐，談笑風生的辦公室被拆了，取而代之的是一個遙遠且陌生的地方。再後來，經歷了一些組織變動上的調整，我不知道今年以後台灣還會不會有 Maps Services Engineering 的intern了

因為在找實習時很愛看前人們分享的找實習經驗，也受到很多幫助，因此決定來寫一篇我自己的實習面試經驗，在開始時想先跟讀這篇文章的大家說，如果你現在是剛踏入這個領域，未來也想找實習的學生，我個人覺得在看到這篇文章的時候就可以開始做我稍後提到的準備了，準備是越早開始越好。再來想跟同樣在努力找實習的各位說聲加油，如果被公司拒絕也不要氣餒，對你來說順位不高的公司拒絕你也不一定代表你不夠好，你心中的夢幻公司還是有機會錄取你！

背景

在找實習面試心得文時，常常看到背景是演算法競賽選手、已經有很多實習經驗或是Github破百stars的各路鬼神們，相較他們的話我的背景相當普通，可以給也想找實習但不是神人的各位參考

• 118 CS 大三升大四
• 無演算法競賽、實習經驗
• 書卷獎x1
• 接過系上Online Judge的案子和校內行政單位的案子
• 一些高職到大學時累積的一些奇奇怪怪競賽經驗（感覺這部分有沒有差別不大）

面試結果

先上面試結果的表格，等一下會講一下有面試到的公司的流程

準備

關於如何準備我分成三個部分:

• 履歷
• LeetCode
• 英文

除了這三點以外，面試還有可能會考學科知識和實務經驗等等，這些就交給大家自己想辦法累積了

履歷

履歷上最基本的就是要放上學歷，聯絡方式，過去的實習經驗等，如果是要面試外商公司的話不建議放個人照片，這部分大家可以去查查看。

除此之外，最重要的就是project了，我認為可以從一些解決生活中小痛點的方向去嘗試開始一些side project，像是如果你覺得學校的哪些系統沒有很好用，就可以試着自己去解決這些問題。

除此之外，做一些開源貢獻也能夠寫在履歷上，翻譯一些知名open source project的文件、發過PR等等，不要覺得這些事情可能很微不足道，如果你剛好遇到有相似經驗的面試官，就有機會勾起他的興趣，我有朋友就在面試時遇到面試官跟他聊翻譯文件的經驗。

LeetCode

LeetCode這部分我覺得大家可以視自己的目標公司來決定要不要刷，因為其實不是所有公司找實習生都一定會考LeetCode，可以多多參考之前的面試心得文

不過如果你的目標是Google, Microsoft等公司而且你沒有演算法競賽相關的背景，那我會建議越早開始刷越好

就算目標不是這些白板題佔比重的公司，如果有餘力的話還是儘量準備，有些不在面試中考白板題的公司也有可能有OA，或是一些簡單的現場coding（跑跑迴圈之類的），這時候如果你有常刷LeetCode的話會比較容易應對

我個人的話是從去年2022的4月中開始每天刷1~2題，在面試的這段時間大約在300~500題之間，LeetCode contest分數打到1900+就沒有再打了，應該是能夠突破2000分，如果要面試白板題難度高的公司建議至少要刷到跟我差不多的程度，即便到這個程度也沒有辦法保證一定能通過面試

題單的話我自己是刷Grind 169，也有人會推薦NeetCode之類的其他題單，雖然我沒有都刷過，但我猜測題單的內容大部分都大同小異，重點是在學習思考演算法和資料結構的解題過程，而不是把重點放在記住對應題目的固定解法，所以各位挑自己看得順眼的題單照着刷就好，沒有優劣之分

接下來想回答一些我在網路上看到的刷題新手可能會有的疑問，但由於我個人也不是面試官，僅能提供一些主觀淺見：

• Q1:刷題要用什麼語言呢？不想用C++可以用Python嗎？

• A1:除非你面試的職位有特別限定語言，不然通常白板題的面試更注重在解題使用的方法和溝通上，OA平台通常也都會提供常見的語言（C/C++, Python, Java）來做選擇，因此用什麼語言來刷題對於面試的影響不大

• Q2:刷題天賦比努力更重要嗎？

• A2:依我的經驗來說我認為不是，面試中會出現的演算法題不像競賽那麼困難，去年我開始刷題時也是常常寫不出easy，但隨着題數的累積（前提是刷題時都有思考而不是直接看解答），很多題目在看完敘述時就能知道怎麼做，如果是要憑空創造那些演算法的話可能需要天賦沒錯，但刷題就是靠前人的智慧，將他們所想的東西刻在自己的腦中，我相信投入時間一定會有回報

英文

如果你面試的公司是外商的話，很有可能會在面試時需要英文口說，根據我和身邊朋友的經驗來說，這邊的口說可能是佔面試時的一小部分，也有可能是整場面試都使用全英文，因此建議要事先準備好相對應的英文自我介紹

除了口說以外，有些公司也會在面試前寄類似多益的英文測驗，但我也不確定這部分的表現是否真的會影響錄取結果

以我個人的經驗來說，在面試時的口說並不會要求你講得像native speaker一樣，沒有任何文法上的錯誤，只要能夠清楚得表達自己的想法，讓面試官能夠聽懂就OK，最重要的是要敢講，不要怕失誤就放棄

其實我也不是英文口說能力很好的人，而且如果沒有另外花錢請英文家教的話感覺不太會有能練英文口說的機會，因此我是參加我們校內跟英文演講有關的社團，花了1年的時間，一開始我也是都不敢開口說英文，很怕講錯尷尬在那，但每次在路上看到有外國人在問路，而且有人用一口流利的英文回答他的時候，就覺得英文講得好的人真的很帥

後來交了一些在學中文的外國朋友，我發現對方中文講得不清楚我聽不懂的時候，身為母語者的我其實會盡力的去引導和理解對方的意思，並不會懷有惡意的嘲笑對方，因此大家不用害怕開口說英文被嘲笑，只要願意開口都很勇敢，持之以恆的話一定會進步！

結果上面這一大段好像寫了很多雞湯和自己找實習的時候觀察到的一些現象，好像對於如何準備沒有提太多QQ，大家可以再多多看其他人的心得文，最後我一句話想送給正在準備找實習的你

懦夫從不啟程，弱者死於路中，只剩我們前行，一步都不能停！        --Phil Knight

面試流程

關於下面的面試流程，我寫這篇文章的時候也過了一段時間，沒有記得很清楚，可能沒辦法提供非常準確的流程，如果各公司HR有任何不想公開的資訊，歡迎隨時聯絡我進行修改

Cooby

HR面試

Cooby的HR在面試前有寄一封mail講面試當天的流程，裡面很貼心的提醒我該準備的問題，問題大概就是自我介紹、個人的優缺點、為什麼想來Cooby實習等等，一場面試大概就是30mins，一開始HR先介紹關於Cooby和收實習生的理由，再來就請我做自我介紹和相對應的問題回答，記得這段聊完之後好像時間差不多就到了，最後就以問對方想問的問題收尾

結果：無聲卡

日商恩沛NetProtections

恩沛是一間做Fintech的公司，有興趣的話可以查查看，他們的實習計劃是讓實習生面試之後再選擇自己想要負責的工作和職位，蠻彈性的，作為一間新創公司，我覺得他們的面試蠻特別的，感覺他們非常注重實習生的個人特質，在面試的過程中沒有遇到任何技術問題

前測

在投遞履歷的時候，有一個前測問題，今年的是問對於台灣人平均收入和體罰的關係，沒有規定要如何回答這個問題，可以完全按照自己的想法去做，我個人是查了一些跟貧富差距，體罰相關的文章和論文，透過數據去佐證兩者之間的關聯，根據實習生說明會的說法，這個前測關卡非常重要，如果沒有認真寫很有可能沒辦法進入面試階段

電話面試

雖然說是電話面試，其實是需要線上開鏡頭對話的面試，在這一輪面試中也是要討論跟前者相似類型的社會議題，面試官會根據你的回答不斷做延伸，一開始聽到題目時面試官有給我5分鐘的時間去查我需要的資料，但其實5分鐘查不太到什麼資料，所以後續的回答我基本上就是按照個人想法去答

一面

從這一關面試開始，就會需要去公司的辦公室實體面試，恩沛的辦公室環境感覺還不錯，就是想像中新創公司會有的環境，因為這是我第一次實體面試，我很怕會找不到公司的位置，結果很早出發換來的就是太早到XD，我記得我提早了大概半小時就到辦公室，後來面試官有提早大約10分鐘開始我的面試，很感謝他

這一關的話沒有上面說的社會議題，面試官感覺會比較想了解我這個人，會從興趣、職涯規劃等問題下手

二面

這關的話我是跟在台灣的日本人工程師面試，他會講中文所以溝通上面沒有問題，有些詞不達意的時候可以靠Google翻譯幫忙，二面跟一面很像，也是聚焦在我身上，但二面感覺跟注重在我的價值觀上，總之是一次很有趣的經驗

結果：感謝信
恩沛的面試方式真的很特別，面試的問題都會從你的回答不斷進行延伸，所以其實面試完的時候會覺得很累

KKcompany

今年KKcompany的面試流程時間拖得蠻長的，在我面試那天結束時HR跟我說還要一兩週才會得知能否進二面，所以大家如果有投KKcompany的話不要太焦慮，慢慢等還有機會

OA

這是我第一次寫OA，平台是用Codility，我記得常見的語言都有，我在寫OA的前一天上去稍微熟悉了一下平台，HR是說只要50分就能推進下一關，然後要記得在OA的平台上面直接寫code，不要在自己的ide寫完貼上去，Codility好像會把作答過程錄下來給面試官參考的樣子

題目總共有4題，我自己體感是2 easy, 1 medium-, 1 medium+，作答時間有2小時，我寫了不到半小時就交了，後來拿到97分，漏了一個正確性相關的測資

一面

面試同時和HR以及另外兩位不同部門的主管面試，我朋友也有面這個實習計劃，不知道面試官是如何分配的，不同面試官的風格差很多，面試的流程也不一樣，根據我同學的說法，他遇到的面試官都在問他履歷相關的問題，而我遇到的面試官則是問了很多不同領域的問題，從API到DB到圖學到OOP到OS等等，能想到的領域都被問過一次了，算是一場題目轟炸的面試

結果：感謝信

HP

電話面試

這次電話面試不是突襲式的電話面試，會先寄信約時間，面試時會進行簡單的英文對話，我這部分講超爛的，第一次面試講英文太緊張了，我猜可能就是這個原因被刷掉的，除了英文以外就是一場常規的HR面試，問為什麼想實習等等

結果：感謝信

HPE

面試

HPE的面試流程比較簡單，第一次面試就是直接跟兩位部門主管面試，這次面試完就會直接決定錄不錄取，相對其他動不動就要好幾關的面試來說輕鬆很多

我面試的Team好像是做firmware QA的Team，兩位面試官人都超級親切，會很吸引我加入他們部門，風氣應該很不錯，在HR打電話來約面試時有說要準備5分鐘的英文自我介紹，我簡單做了一個ppt，在面試時分享畫面講給面試官聽

接下來就是問一些自我介紹和履歷相關的問題，聊完之後寫了一個簡單的題目，大概LeetCode easy的程度，在Google docs上面作答

最後的問答環節，面試官跟我說我可以慢慢想問題，他們都可以回答我，也跟我聊了很多職涯規劃等等的問題，很感謝他們願意花時間回答我這個還不一定會加入公司的面試者，能感受到HPE的正職員工真的有喜歡公司的感覺，這次面試的感受非常不錯

結果：offer

Garmin

面試

Garmin的面試是一天面完HR面試和主管面試，在約定時間時先跟HR面試，差不多之後HR會通知主管來面試，在中間可以小小休息一下，大概5分鐘

我面試的部門是負責做Garmin商城服務的，主管說實習生進來的話會負責做QA，問我對於QA的意願如何，我說如果可以的話我更想接觸功能開發，主管就說如果我加入他們的話，可以等我熟悉系統之後做一些開發相關的工作，這點讓我蠻開心的，可以感受到主管還是有在意實習生的個人意願，不會覺得他分配什麼工作我就要做什麼，面試的過程中大部分就是聊履歷和過往的經驗

結果：offer

AICS

OA

OA在Codility上進行，語言的話沒什麼印象，總共有3題，難度都不會很難，但感覺比較靠巧思，比較特別的是有debug題，蠻有趣的，大概就是給你一段code和他預期的功能，要你只能改幾行，讓這段code功能正常，OA最後不會給結果，所以我也不知道我做得怎麼樣

一面

在OA結束後，HR就跟我約了一面的時間，結果在面試前收到AICS暑期實習收滿的消息，於是HR問我要不要換成學期實習，換成學期實習後還是維持原本的面試時間，面試的話就是考白板題，問了2題，第二題是第一題的延伸，第一題大概是LeetCode easy的難度，第二題的話難度介於medium和hard之間，我要了提示之後嘗試去寫，但時間到也沒有完整的寫出來

要注意的是如果面會考白板題的公司要準備一下local的編譯環境，因為我自己習慣用C++刷題，但都直接在對應的平台上面coding，結果AICS的面試官要我在本地跑結果給他看，但我本地的C++環境之前電腦重灌的時候沒有再裝，寫作業的時候可能都remote到其他linux系統寫，只能很尷尬的跟他說我能不能用online ide跑結果給他看

除此之外，建議大家面試時手機不要關通知，我那時候網路不好，面試官請HR打電話過來確認，結果我手機勿擾就都沒接到

結果：感謝信

Microsoft

其實我去年大二時就嘗試過投微軟履歷，但當時連履歷都寫不好，也沒有對找實習這件事查資料做準備，因此沒有進到面試，但從那時候開始就有在準備LeetCode，還是很感謝去年的自己XD，大家如果投履歷第一次沒成功的話千萬不要氣餒，只要持續精進自己總有一天還是有機會找到自己的dream job

電話面試

微軟實習計劃的電話面試是突襲式的打過來，因此如果有投遞實習計劃的話要注意電話，第一次接到的時候我不方便講電話就改時間了

電話面試主要是確認一下投遞的職位和基本的資料，再來就是可能會需要簡單的英文對話，自我介紹等等

這次電話面試的最後HR就跟我約了HR主管的面試

HR主管面試

一開始進到面試的時候，HR主管就以英文開頭要我介紹一下自己，結果我語系一時沒切過來愣了一下，但馬上就有反應過來，應該還OK，接下來也是一些常規會遇到的問題，最後的話由HR主管做部門的介紹，然後問我對於每個部門的意願排序

Bing Geocoding部門面試

Bing Geocoding部門的面試是以白板題為主，總共會面試兩次，一次2題，我覺得整體來說難度滿高的，大概落在2題medium 2題hard的程度，如果也要面試這個部門的話刷題要認真一點

結果：offer

結語

第一次自己寫實習面試心得的文章，寫了7000+字（而且感覺沒寫什麼有用的內容）才知道原來寫面試心得文這麼累，真的很感謝每一個願意分享自己面試心得的前輩

最後我想要感謝所有在找實習過程中幫助過我的人
特別感謝陳彥宇跟我一起在實習面試的路上一起交流奮鬥
感謝余昭佑花時間協助我改善英文自我介紹
感謝林宇亨幫我祈禱，還有你畫的頭貼都很讚
最後用林宇亨畫的圖片結束這篇文章，祝大家都可以跟圖片中的蛋蛋先生一樣成為offer收割機

會想寫這篇文章其實有一個契機，我在讀WebGL Water 的source code時，其中有一段程式碼中提到了 ping-pong rendering，不過在我自己搜尋資料時卻發現相關的技術幾乎沒有人對它進行比較詳細的解釋，在跟朋友抱怨這件事後，他說：「既然沒有人寫那你就可以寫一篇阿。」於是這篇文章就這樣誕生了。雖然說是OpenGL互動式水面，但這篇文章不會將重點放在實作細節上，會有很大一部分是WebGL Water source code導讀。

目標受衆

• OpenGL/WebGL新手，想了解用GL製作水面的方式
• 正在台科電腦圖學導論痛苦掙扎的你

先備知識

在看這篇文章之前，最好對下列的技術有一定程度的了解：

• OpenGL/WebGL（廢話）
• FrameBuffer Object
• Shader

那就讓我們開始吧

Height map

首先我們要引入一個概念Height map，Height map的概念是將一張圖片的顏色（ex:rgb）當作水面的高度，這裏我以一張灰階圖爲例

我們先建一個有很多vertex的平面，將這張圖當作texture丟進vertex shader中，並在vertex shader中讀取這張圖的顏色（是灰階圖所以rgb相同，擇一即可），對當前的高度加上顏色的值，就能得到一個不平整的水面，這裏我們來看看WebGL Water是怎麼實作的

uniform sampler2D water;varying vec3 position;void main() {vec4 info = texture2D(water, gl_Vertex.xy * 0.5 + 0.5);position = gl_Vertex.xzy;position.y += info.r;gl_Position = gl_ModelViewProjectionMatrix * vec4(position, 1.0);}

用上圖面那張圖做出來的效果：

想象如果我們擁有一連串的水流動的灰階圖，按照順序畫出來，就可以模擬出水流動的效果了！

Picking

再來我們來談談OpenGL中要如何實作滑鼠選取的功能，在OpenGL中我們可以使用下列兩種做法：

• Ray tracing
• Shader

閱讀WebGL Water的source code可以發現他是選擇第一種方式來做，但今天我們這篇文章會把重點放在第二種做法上。

先解釋一下兩者的差別，Ray tracing是從滑鼠點擊的位置打出一條ray，用那條ray跟場景上的物件的面做intersection來判斷ray打到的位置，在場景上有很多面需要做intersection時計算量就會增加，而且實作起來也不是很容易。

再來就是今天要介紹的方法，這個方法使用Shader來達成，相信讀者看到這可能會有一個疑問，Shader不是用來輸出的嗎？？？沒錯，而我們就是要使用輸出顏色的方式來達成選取的功能。

要怎麼做呢？
其實很簡單，
我們開一個FrameBuffer Object（以下簡稱FBO），在裏面畫上水的平面，但這次我們要在fragment shader中將顏色畫成平面的texture coordinate。

如下圖所示

#version 430 coreout vec4 f_color;in V_OUT{   vec3 position;   vec3 normal;   vec2 texture_coordinate;} f_in;void main(){       vec3 color = vec3(f_in.texture_coordinate.x,f_in.texture_coordinate.y,0.1);    f_color = vec4(color, 1.0f);}

再來我們我們使用glReadPixels()來讀取滑鼠點擊位置的顏色，就能夠判斷點到的位置在水面上的相對位置了

glBindFramebuffer(GL_READ_FRAMEBUFFER, framebufferPick);glReadBuffer(GL_COLOR_ATTACHMENT0);glm::vec3 uv;glReadPixels(mouse_x, mouse_y, 1, 1, GL_RGB, GL_FLOAT, &uv[0]);glReadBuffer(GL_NONE);glBindFramebuffer(GL_READ_FRAMEBUFFER, 0);

Ping-Pong Rendering

處理完點擊的功能了，接下來我們就來看看如何讓水產生漣漪吧。這裏就不得不提到此文誕生的原因，WebGL Water使用的ping-pong rendering。

Ping-Pong Rendering其實是一個在實作上才需要使用的技術，今天我們想要計算水面漣漪的動態過程，我們需要前一張水面漣漪圖來當作下一張漣漪的輸入，透過前一張的高度來計算下一張的高度，Ping-Pong Rendering就是這個可以把每一次的畫面丟給下一次當輸入的技巧。江湖一點訣，講破毋值三仙錢。那我們就來看看要怎麼做吧。

首先這個技巧的核心就是FBO render to texture的能力，我們會開兩個FBO，先畫FBO1，然後將FBO1輸出的那個texture丟到FBO2中當作輸入的texture，這時我們就能在FBO2中用shader來對前一張texture做想要的操作了。在FBO2中輸出的結果又可以丟回FBO1中當輸入，就像打乒乓球一樣。

漣漪

學會了Ping-Pong Rendering，我們終於可以來繪製漣漪了，我們來看看WebGL Water是怎麼實作的。

uniform sampler2D texture;uniform vec2 delta;varying vec2 coord;void main() {  /* get vertex info */  vec4 info = texture2D(texture, coord);    /* calculate average neighbor height */  vec2 dx = vec2(delta.x, 0.0);  vec2 dy = vec2(0.0, delta.y);  float average = (    texture2D(texture, coord - dx).r +    texture2D(texture, coord - dy).r +    texture2D(texture, coord + dx).r +    texture2D(texture, coord + dy).r  ) * 0.25;    /* change the velocity to move toward the average */  info.g += (average - info.r) * 2.0;    /* attenuate the velocity a little so waves do not last forever */  info.g *= 0.995;    /* move the vertex along the velocity */  info.r += info.g;    gl_FragColor = info;}

我們把這個shader當作剛剛提到的Ping-Pong Rendering繪製texture的fragment shader，每次都拿前一張的texture，找當前位置附近高度的平均來當作這次這個位置的高度。

那現在我們可以模擬漣漪的流動過程了，所以我們需要加一個在滑鼠點擊時產生的漣漪，一樣來看WebGL Water是怎麼做的

const float PI = 3.141592653589793;uniform sampler2D texture;uniform vec2 center;uniform float radius;uniform float strength;varying vec2 coord;void main() {  /* get vertex info */  vec4 info = texture2D(texture, coord);    /* add the drop to the height */  float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);  drop = 0.5 - cos(drop * PI) * 0.5;  info.r += drop * strength;    gl_FragColor = info;}

至此，我們就可以產生漣漪了

glBindFramebuffer(GL_READ_FRAMEBUFFER, framebufferPick);glReadBuffer(GL_COLOR_ATTACHMENT0);glm::vec3 uv;glReadPixels(mouse_x, mouse_y, 1, 1, GL_RGB, GL_FLOAT, &uv[0]);glReadBuffer(GL_NONE);glBindFramebuffer(GL_READ_FRAMEBUFFER, 0);if (uv.z != 0.0){    this->addDrop(glm::vec2(uv));}

在addDrop function中，我們就把Ping-Pong Rendering那兩個FBO的texture拿出來用產生漣漪的shader畫一次，然後丟回去繼續update就可以了。