コーディング15件
-
GLSL入門｜Three.jsのShaderMaterialで自作シェーダーを書く
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 僕はXでThree.jsのシェーダー作品をちょこちょこ投稿しているんですが、その多くの土台になっているのが「GLSL」です。 …
-
Three.jsでWebGPUを使う｜WebGPURendererへの移行ガイド
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 前回、TSLとは？WebGPU時代の新しいシェーダーの書き方という記事で「これからはWebGPUの時代だよ」という話をしました …
-
TSLとは？WebGPU時代の新しいシェーダーの書き方
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 最近、僕はXでThree.jsのシェーダー作品をちょこちょこ投稿しているんですが、その多くを「TSL」というもので書いています …
-
Three.js入門｜ブラウザで動く3D表現を作る完全ガイド
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 僕は普段、Three.jsを使ってブラウザで動く3D表現を作っていて、その作品をXでも発信しています。最初は「3Dってなんか難 …
-
ブログをリニューアル。Astro + WordPress headlessに移行した理由と技術スタック紹介
はじめに このたびブログ「ShunNote」をリニューアルしました。 見た目のデザインを一新しただけでなく、裏側のシステム構成も大きく変えています。以前はWordPressをそのまま使っていましたが、今回は Astro …
-
Lottieでグラデーションを使ってアニメーションを作る裏技2つ
みなさんこんにちは。しゅん（@shun_webdesign）です。 皆さんはLottieをご存知でしょうか？なめらかなアニメーションをサイトに実装でき、手軽にリッチな表現を取り入れることができます。 LottieはAft …
-
Next.jsとReact Three Fiberのポートフォリオを公開するまでの裏側
みなさんこんにちは。しゅん（@shun_webdesign）です。 先日、作成したポートフォリオサイトをSNSで公開しました。 今回は僕が公開したポートフォリオについて紹介していきたいと思います。 ※コードなどの内容の説 …
-
Lottieの作成からコーディングまで実装方法をまるっと解説
こんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 軽量のWebアニメーションが作れる「Lottie」をご存知でしょうか？ 近年、Adobe XDでも使用できるようになりリッチなアニメーションを …
-
【Swiper】簡単！ドラッグ操作できるカード型スライダーを作る方法
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 Web制作ではスライダーという画像などのコンテンツをスライド形式で流す表現方法があります。 トップページのメインビジュアルをフェードさ …
-
【Adobe XD】コーディングが捗る！ZeplinとXDを連携する活用方法
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 XDを使ってデザインを作る方も多いと思いますが、XDのデータからコーディングする際はどのようにしていますか？ Macを使ってる人は⌥キ …