今回解説するのは Unlit/Transparent 。 Unlit/Texture と同様にライティングの反映無しのごくごくシンプルなシェーダです。 Unlit/Texture との違いは透明(Transparent)に対応している所です。テクスチャ画像のアルファ値がちゃんと反映され透過されます。 シェーダの全コード // Unlit alpha-blended shader. // - no lighting // - no lightmap support // - no per-material color Shader "Unlit/Transparent" { Properties { _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {} } SubShader { Tags {"Queue"="Transparent" "Ign
CSSはPhotoshopライクなグラフィカルなブレンドモードを搭載しています。デザイナーやモーションクリエイターにとっては直感的に利用しやすいのではないでしょうか。しかし、CSSのブレンドモードは執筆時点（2015年9月現在）はMicrosoft EdgeやInternet Explorerが対応していないのがデメリットです（追記：2022年現在はほぼすべてのブラウザで利用できます）。 Canvas要素は旧式ブラウザを含め多くのブラウザで利用できるものの、Canvas要素はブレンドモードの種類が少ないという制約があります。ここで挙げたように、それぞれのテクノロジーには一長一短があるのでコンテンツに応じて最適な手段を検討するのが現実解となります。 デモ作成で選んだのはCSS3のブレンドモード デモ作成にあたり2つのレイヤーを作成しました。1つはカラフルな背景のレイヤー、もう1つはドローイン
前回は、ユニティちゃんを歩かせることを目標に、Mecanimのステートマシンとアニメーションパラメータについて解説しました。 今回はまず アニメーションブレンドを解説して、シームレスに歩いたり走ったりするユニティちゃんを作っていきます。また、後半はアニメーションレイヤー，ボディマスクを解説して、走っているユニティちゃんに表情をつけていきます。 今回も前回までのUnityプロジェクトを引き続き使用します。 ※本特集は、バージョン1.1.1までのユニティちゃんアセットを対象としています。 複数のアニメーションを混ぜる -アニメーションブレンド- アナログスティックの傾きでユニティちゃんの走る速度を制御できるようにしてみましょう。 アナログスティックの傾き度合いをユニティちゃんに反映させるためには、歩きと走りの中間のが表現できなければいけません。これを実現するためには アニメーションブレンド を
hadr_01 という旗のオブジェクトに使われている MADFINGER-Lightmap-Unlit-Wind(ファイル名は MADFINGER-Lightmap-Unlit-Wind.shader )というシェーダの記述を見てみました。 Shader Shader "MADFINGER/Environment/Lightmap + Wind" {シェーダの選択時リストに表示される名前。 / で区切ると階層構造になります。 Properties Properties { _MainTex ("Base (RGB) Gloss (A)", 2D) = "white" {} _Wind("Wind params",Vector) = (1,1,1,1) _WindEdgeFlutter("Wind edge fultter factor", float) = 0.5 _WindEdgeFlu
おつかれさまです。今回ブログを担当します藤澤です。 さて、Cocos2d-x ではレイヤ（ノード）を重ねて画面を作成するわけですが、ゲームですから画像を透過させてみたくなることもあります。そんなときは setOpacity を使って不透明度を変更してやってもいいのですが、BlendFunc というのを使うと、いわゆる Graphics ツールでいうところのレイヤと同じようにさまざまな合成結果を得ることができます。しかしこの BlendFunc、普段あまり使わないのでいざというときに使い方を忘れてしまいがちです。そこで今回は備忘録的に BlendFunc の使い方をまとめてみたいと思います。 まずは基本的な使い方ですが、以下のようになります。 CCSize size = CCDirector::sharedDirector()->getWinSize(); CCLayerColor* bac
WebGL を使えば、色の加算、減算、乗算といったブレンドモードが高速で処理できるというお話。 Canvas2D でもピクセルマニピュレーションができるので、様々なブレンドモードを自前で実装することができるのだが、ピクセル数 * 4色の処理負荷が CPU にかかるためパフォーマンスがよくない。しかし WebGL のフラグメントシェーダーを利用すれば色を高速で処理できる。 demo WebGL は簡単なことをするにも、初期化の処理が冗長なためコードは長くなってしまうが、実際は大したことはやっていない。 2つのトライアングルを用意する 2枚のテクスチャー画像を適用する フラグメントシェーダーでテクスチャー画像の色をブレンドする GLSL では、4成分 (Red, Green, Blue, Alpha) をそのまま足したり掛けたりすることができるので、ブレンドの公式に当てはめるだけで処理できる。
CSS Property Advent Calendar 2013、6日目の記事です。「CSS のプロパティに関することだったら何でも OK です」 とのことでしたが、広く使われているプロパティについて今さら書いても仕方ないし、多分他の人とかぶるしってことで、最近になってブラウザが対応したあまり一般的じゃないプロパティを選択してみました。 それが今回取り上げる、background-blend-mode プロパティです。 Compositing and Blending Level 1 W3C Last Call Working Draft 10 October 2013 3.4.3. The 'background-blend-mode' property ： Compositing and Blending Level 1 background-blend-mode プロパティとは？
The Adobe Web Platform team is working on pushing forward what is possible on the web in terms of layout, typography and visual effects. We work together with the W3C, browser vendors and others on specifying and implementing things like advanced typography, 2D and 3D filter effects, magazine style layouts and more. One feature that has been available a long time in graphical tools but not the web
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
