ジオメトリノードを使った優勝カップ
ここのチュートリアルを参考にして制作しました。
回転体はここのようなジオメトリノードを使って自由にデザインできるようです。
取っ手は後から付け加えました。
また、背景(HDRi)と台とその上に布をけ加えています。
布はスカルプトモードのクロスブラシでシワをつけましたが、少し強く付けすぎてしまいました。
https://www.youtube.com/watch?v=4G697-kn-G4
2023/1/25
ソフトクリーム
ここのチュートリアルを参考にして制作しました。
クリームの部分が少しカクカクとなったままですが、最近通信状態がかなり悪くこの辺りの修正方法の検討ができなかったため、このままです。
https://www.youtube.com/watch?v=8AIBVkR-VhY
2023/1/23
習作: 雪山
ここのチュートリアルを参考にして制作しました。
アドオンのLandscapeで提供されているメッシュから作成しています。
subdivisionの数を絵多くしたり、Cyclesを使えば、もう少し鮮明な画像が得られると思いますが、低性能のパソコンのためこの程度の画質です。
https://www.youtube.com/watch?app=desktop&v=HCtIGyv6nfw
2023/1/22
習作: パーティクル
ここのチュートリアルを参考にして制作しました。
やはり、性能の低いコンピュータでは、調整を何度もすることができない等のため、お手本のような美しい画像にすることはできずじまいでした。
https://www.youtube.com/watch?app=desktop&v=bEZsFQP6SCg&feature=youtu.be
2023/1/21
ギフトボックス
ここのチュートリアルを参考にして制作しました。
チュートリアルでは、リボンの部分がもっと厚くなっていますが、ここでは薄くしました。
若干不自然さは残りますが、今後修行したいです ^^)
https://www.youtube.com/watch?app=desktop&v=4T5Gg7kb7r8
2023/1/20
ねじれのあるガラスのトーラス（円環体）
ここのチュートリアルを参考にして制作しました。
アニメーションになっていますが、ここでは静止画で載せています。
メッシュの経線だけを残して、z方向のねじれを入れています。
https://www.youtube.com/watch?app=desktop&v=hTRxUtM7_Nc
2023/1/19
ねじれた輪
ここのチュートリアルを参考にして制作しました。
モディファイアーにあるsimple deformeのtwistとbendを使って作成しました。
簡単な要素技術的なものをたくさん制作することで、Blenderに習熟していきたいと思います。
https://www.youtube.com/watch?v=f2rqvt9heb4
2023/1/19
雪の結晶
ここのチュートリアルを参考にして制作しました。
この制作ではミラーを活用して六角形で同時に編集できる方式の習得を主な目的としました。
雪の降るところはチュートリアルではアニメーションで、HDRiによって環境設定をしています。
また独自に、雪の結晶も厚みを少し持たせてもう少し氷の質感を出したかったですが、
手持ちノートパソコンの性能の限界のため、この程度の画像となりました。
https://m.youtube.com/watch?v=QsatJmDxf-Q
2023/1/17
ジオメトリノードを使った球体のデザイン
ここのチュートリアルを参考にして制作しました。
ただし、レンダー時に色を付ける方法がわからなかったため、ここではソリッドモードのMatCapのままの状態でスクリーンショットによりコピーしています。
MatCapでは実際に光を当てなくとも擬似的に色の付いた立体的な表現をしてくれるようです。
https://www.youtube.com/watch?app=desktop&v=nFtRnBErnmw&feature=youtu.be
2023/1/16
クロスフィルターを使った椅子
ここのチュートリアルを参考にして制作しました。
スカルプトモードにおけるクロスフィルターのインフレートの機能を使っていますが、面セットを使用することでそこだけ膨らみが抑えられるようにしています。
ねじりが入っているのも興味深い方法です。
https://www.youtube.com/watch?v=rg2q0lj1rV8
2023/1/15
習作: 皮のモデル
ここのチュートリアルを参考にして制作しました。
ソファなどに見られる皮の張り方のモデルです。
ここのチュートリアルのコメントを読んで初めて概要がわかりました。
subdivide, poke facesなどの操作をどういう順番で行うかで文様が変わってくるようです。
https://www.youtube.com/watch?v=jHl_ySBxluU
2023/1/14
ゴールドのチェーン
ここのチュートリアルを参考にして制作しました。
これはチュートリアルを見なくとも作れるようになっておくと便利そうです。
今回は、Poliigonの素材を使って環境設定も行いました。
普通の光では黒い影がつくようなので、環境設定を行うと影もなくなりました。
hhttps://www.youtube.com/watch?v=g9KTofHBBXA
2023/1/13
木漏れ日
ここのチュートリアルを参考にして制作しました。
レンダリングに4時間ほどかかりましたが、優れたデザインのチュートリアルで参考になります。
https://www.youtube.com/watch?v=eDTvDHIa7TE
2023/1/12
ガラスの球体の中の流体
ここのチュートリアルを参考にしてこれを制作しました。
流体でも、Blenderでアニメーションとして扱うことができますが、ノートパソコンでやったところ、最終段階で何度もフリーズしました。
メモリの大きい高性能パソコンでないと、困難です。
ここでは、レンダー後保存すらできなかったため、スマホで画面を撮影してそれを代用いたしました。
いろいろ微調整したいところでしたが、以上の次第で、少々不備があるままの作品となりました。
hhttps://www.youtube.com/watch?v=ZNb8I4v53-A
2023/1/10
折り目のある毛布
ここのチュートリアルを参考にしてベッドを制作しました。
毛布に折り目やシワを作るにはどうすれば良いか学ぶためにこのチュートリアルを選びました。
枕と毛布は別々にアニメーションしないといけないようです。
別々にアニメーションをすることで枕の向きを変えることができまし。
テクスチュアは全て、Poliigonの無料素材から取得しています。
https://www.youtube.com/watch?v=xCGsBfZWbfA
2023/1/9
空気を入れるようにしてクッションを制作
ここのチュートリアルを参考にしてカーテンを制作しました。
空気圧の設定により、膨らますようにしてクッションを作ります。
テクスチュアのデザインは、Poliigonの無料素材から取得しています。
https://saitottammas.wordpress.com/2021/02/05/cushion/
2023/1/8
Blenderのモディファイア(クロス)を使ってカーテンを制作
ここのチュートリアルを参考にしてカーテンを制作しました。
布地は、スカルプ機能を使ってもできるようですが、ここではモディファイアのクロスを使いました。
アニメーションでカーテンを開き、タッセルで閉じて、ちょうど良い感じのところで止めてオブジェクト化しています。
https://www.youtube.com/watch?v=EzJ8rx4MWps
2023/1/7
Blenderでソファ(1)を制作
ここのチュートリアルを参考にしてソファを制作しました。
Blenderは、やはりたくさんの作品を見様見真似で作ることを通して慣れるしかないと悟り、少し易しいめのチュートリアルを選びました。
ソファのチュートリアルはたくさんあるので、たくさんこなせばBlenderに慣れられるように思います。
https://www.youtube.com/watch?v=bIiKZZmRryg
2023/1/6
Geometry nodes---ランダムに散らばった石ころ
ここのチュートリアルを参考にしてランダムに散らばった石ころを制作しました。
素材はPOLIIGONのサイトから採っています。
もう少し明るい色にすべきだったと思いますが、Geometry nodesの練習として制作しました。
https://www.blog.poliigon.com/blog/environment-scattering-with-geometry-nodes-in-blender
2023/1/5
物理演算を用いた布地(ベルベット風)
ここのチュートリアルを参考にしてテーブルの上に布地をかぶせました。
ティーポットは、アドオンで追加したオブジェクトをそのまま利用しました。
https://www.youtube.com/watch?v=6KsPRQg-G64
2023/1/4
三次元素材を組み合わせたギターとソファ
無料三次元素材のギターとソフを組み合わせて、イラストレターターで文字を付加しました。
チラシなどのデザインとして三次元素材を活用する練習をしてみました
2023/1/3
Blenderのアドオンを使った紅葉
BlenderのアドオンであるSampling Tree Generatorを使って紅葉を制作しました。
ジオメトリーノードを使う予定でしたが、このアドオン機能だけでもかなりのことが可能です。
2023/1/3
Blenderのジオメトリーノードを使ったフェンス
Blenderの新しい機能であるジオメトリーノードを使ったフェンスをチュートリアルに従って制作しました。
ここのチュートリアルを参考にして制作しました。
https://manaberucg.com/blendergeometrynodesfence/
ジオメトリーノードを理解するにはまだまだ時間がかかりますが、どなたかも書いていたように無限の可能性を秘めた手法のように思います。
2022/12/30
Blenderを用いて制作したガラス製ティーポットセット
Blenderを用いてガラス製ティーポットセットを制作しました。
ここのチュートリアルを参考にして制作しました。
https://www.youtube.com/watch?v=Kcqu-YMWP_o
グラデーションによる色つけも行ったのですが、最終的にレンダリングエンジンをcyclesにしたせいかどうかわかりませんが、色が消えて普通のガラスになってしまいました。
レンダリングは一時間ほどで終了しました。
2022/12/28
Blenderを用いて制作した氷水入りグラス
Blenderを用いて氷水の入ったグラスを制作しました。
ここのチュートリアルを参考にして制作しました。
https://www.youtube.com/watch?v=77mCtMjmKlk
氷、水、ガラスなど透明な物体でも、三次元で表現できてしまうのは驚きでした。
しかし、そのため、レンダリングには2-3時間かかりました。ノートパソコンの性能の低いこともあるのでしょうが、レンダリングエンジンの
cyclesを使うと時間がかかるようです。
2022/12/26
Blenderを用いて制作したコーヒーカップ
これもコーディングとは関係ありませんが、三次元モデリングアプリのBlenderを用いてコーヒーカップを制作しました。
ここにあるM designさんのチュートリアルに基づいて制作しました。
https://web-creates.com/study/recommended-blender-youtube/
今後は、このようなモデリングデータを活かして、Three.jsでアニメーションなどに活かしていきたいと思います。
2022/12/24
ノイズを加えて影をつけたボール
紙に印刷したような質感がありましたのでご紹介します。
これもノイズを使って影をつけています。
isolationというプロパティが使われています。
mix-blend-modeのためということです。
https://coliss.com/articles/build-websites/operation/work/grainy-gradients.html
銅版画
このサイトはデザイン全般を扱いますので、今回はコーディングは関係ありませんが、
スマホ用アプリ「写真で銅版画」を用いてうちのわんこの写真を銅版画にしてみました。
写真の趣を変えてみたいときなどに利用とすると良いかもしれません。
ノイズを加えて濁りを減らしたグラデーション
グラデーションは何も処理をしないと、色の変わり目が濁ることがよくあります。
ここの例のように、ノイズを加えることで解消されるとともに独特の味わいが生じます。
ここでは、filterのみHTMLの方にインラインで入れ込み、brightnessをPHPのループで変化させています。
次のサイトの簡単な例を参考にさせていただきました。
より高度な方法もあるようです。
https://coliss.com/articles/build-websites/operation/work/grainy-gradients.html
木材の表現(振り子のサンプルから)
実際には、金属の玉数個が、このストレッチャーにぶら下がり、ぶつかり合って端の二つだけが振り子になっているという物凄い作品ですが、全部をここに紹介するのは凄過ぎて参考にならないため(笑)、ここの、木材と床の表現の部分だけを取り出しました。
ここを応用することで、他の形も実現できると思います。
https://photoshopvip.net/117916
リアルな雲
比較的単純なコードですので、転載させていただきました。
雲を三重に重ね書きして、リアルな雲を表現しています。
背景色は少し青味を強くしてグラデーションにしています。
https://photoshopvip.net/117916
ガラスの効果
テキストがガラスのように透過する効果です。
と言っても、単に透過しているだけではなく、背景の画像にそこだけぼかしが入っています。
また、テキストのガラスのヘリにはベベルもついています。
https://css-tricks.com/making-a-realistic-glass-effect-with-svg/
チュートリアル風になっているので、読んでいくと、そのまま効果の付け方の勉強になります。
コメントで絶賛されています。
(※フォントは指定がありますが、ここでは通常のフォントです。)
ネオン
単なる「光彩」とは違って、ネオンサイン風の効果となっています。次のサイトのコードを参考に少し加工しました。 https://stackoverflow.com/questions/54112231/is-it-possible-to-create-a-glow-effect-in-svg ここの解説のグーグル翻訳を載せておきましょう。
●フラッドカラーはグローカラーです
●stdDeviation はおおよそのサイズで、値が大きいほど強度が低くなります
●スロープはグローを強め、ガウスぼかしの希釈を打ち消します。 flood-opacity も同じですが、上限は 1 です
●文字の前に輝きを持たせたい場合は、<feMergeNode> の順序を変更します
●ペンのように複数のグロー レイヤーを重ねる場合は、最後の <feMerge> 以外のフィルター プリミティブを繰り返し、それらの結果を <feMerge> に追加します。
svgのパターンとフィルターを使ったレンガ
svgでもパータンを指定することができます。フィルターも合わせて指定することで、本物そっくりのレンガが出来上がります。 軽量で気軽に使えるところがありがたいです。ここのサイトを参考に少し色を抑えめにしました。 https://css-tricks.com/optimizing-svg-patterns/
光の効果を加えたパイプ
svgのfilterとして光の効果を取り入れることが可能です。ここのマニュアルのコードを単純化し、パスを加えて少し変更してみました。 https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Filter_effects
手書き風の雲
svgには様々なfilterが用意されています。ここのサイトを参考にパスを加えて少し変更してみました。 http://honttoni.blog74.fc2.com/blog-entry-272.html
パスに沿ってsvgでテキストを表示
イラストレーターでもこのようなデザインはできますが、svgであれば、コードで作成しますから、軽く、また変更が容易です。
パスも現在制作中のパスジェネレーターを使って制作しました。
タイトルの色を反転させる
枠の左上のタイトル文字の上と下で色を反転させました。
position: relativeとposition: absoluteを組み合わせて、二つのボックスが上下に並び、overflow: hiddenではみ出た文字を消しています。
Q&A
Q&A
Q1. 髪の手入れはどのようにすれば良いですか?
svgを使ったテキストの縁取り
通常のCSSで縁取りをしようとすると、text-shadowで四方八方に影をつけるようなやり方をしますが、
svgであれば、縁取りはくっきりとした感じに仕上がります。
文字は二重に重ねています。(参照:memocarilog)
PHP関数で汎用化した、四隅を丸く凹ませたボックス
四隅を凹ませたボックスをさらにphpでカスタマイズしています。
DentedSquare関数を作り、引数として、ボックスの幅、ボックスの高さ、円の半径、境界線の幅、境界線の色の5つを指定しています。
スタイルもHTMLもすべて関数で書かせますから、関数を別途保存したりすれば、一行でこのボックスが作れます。
中にテキストを入れたり、背景色を付けたりしたい場合は適宜カスタマイズしてください。
CSS部分は、本体のファイルなどに移動させても構いません。
四隅を丸く凹ませたボックス
四隅を丸めることはCSSでも簡単にできますが、四隅を凹ませることはかなりの工夫が必要です。
ここでは、四隅に白い円をposition: absoluteで重ね、併せて、境界線もボックスと同じ色、同じ幅のものを付けています。
しかし、これだけでは白い丸が四隅に付くだけですので、飛び出した所が表示されないように、さらに外側の親要素で包み、overflow:
hiddenではみ出た部分を非表示としています。
八角形にはめ込んだテキスト
一つ一つの文字に装飾を施したいと思う方は多いでしょう。
イラストレーターなどで制作して画像として呼び出すのが一般的ですが、ここでは、PHP関数で一つ一つの文字について、HTMLを返す方式をご紹介します。
八角形となるように、中のボックスを45度回転させ、さらにその中のボックスを45度回転を戻して水平にしています。
そして、一番外側のボックスではみ出た部分をoverflow: hidden;で隠しています。
変なやり方と思われるかもしれませんが、いつでもどこでも、何文字でも使え、その場での変更も用意です。
また、テキストのアニメーションなどでも活用できるので、割と発展性のある方式だと思います。