タッチUI

touchui.png

Surface Proを買って私は感激しております。
ちょうかっこよくて使いやすいUI
今までiPadは、買ってみたけど使いにくいなって思ってた。
しかし、Window8は使いやすいですよ。
タッチすることを考慮したデザインはすばらしい
そのうち、タッチできないディスプレイなんて売ってない、状態になるだろうと思ってます。
誰も触れない位置にある超でっかいディスプレイはタッチにする必要はないだろうけど。
ということで、時代はタッチUIに対応すべき。
私のサイトもタッチUIに対応すべく奮闘します。

List of pages tagged with touchui:

タッチUI対応ページの規則

ページの最初はこれ

[[image /ページ名/トップ画像.png link="/ページ名"]]

タッチUIのために追加したcss

.imgwrapper{
position: relative;
float:left;
}
.caption{
position: absolute;
bottom: 0px;
left: 0;
width: 240px;
font-size: 150%;
font-weight: bold;
text-align: center;
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); 
}
.list-pages-box{
position: relative;
 
}
.list-pages-box a{
color:white;
}
.list-pages-box a:hover{
text-decoration:none;
}

詳細はCSS:画像の上に文字を重ねる方法を見よ。

タッチUI風ページリストアップの書き方

[[module ListPages tags="shader" separate="no" order="title" skipCurrent="yes"]]
[[div class="imgwrapper"]]
%%first_paragraph%% 
[[div class="caption"]]
%%linked_title%%
[[/div]]
[[/div]]
[[/module]]

結果はこんなかんじ

なんと!cssでシェーダが使えるらしい。知らんかった

レンダリングパイプラインの一部。
各シェーダステージはプログラム可能。
最初は頂点シェーダとフラグメントシェーダだけプログラム可能でしたが、近年シェーダの種類が増えています。
各ステージには入力と出力があります。
シェーダステージ
1 頂点シェーダ
2 テッセレーションコントロールシェーダ
3 テッセレーション評価シェーダ
4 ジオメトリシェーダ 複数のプリミティブを出力する
5 フラグメントシェーダ DirectXではピクセルシェーダと呼ばれているらしい
6 コンピュートシェーダ GPUを使って汎用計算をしてくれるらしい
[[bibliography]]
label
OpenGLwiki-Shader

[[/bibliography]]

自作シェーダを使うにはTHREE.ShaderMaterialというクラスを使います
ここがポイント

var material = new THREE.ShaderMaterial({
        vertexShader: document.getElementById('vshader').textContent,
        fragmentShader: document.getElementById('fshader').textContent
      });

シェーダを使わなくても簡単に出来るのになぜやるのか?
後に屈折などシェーダでしか実装できないようなことをやるための基礎を把握するためです。
まずはフラグメントシェーダからみていきましょう。

子供ページのリストアップ

[[module ListPages parent="css" separate="no" order="title" skipCurrent="yes" category="*"]]
[[div class="imgwrapper" href="%%fullname%%"]]
%%first_paragraph%% 
[[div class="caption"]]
%%linked_title%%
[[/div]]
[[/div]]
[[/module]]

うまくいかないときがある
たぶん、カテゴリ名のついてるやつはリストアップされない。
ja:express という親ページは存在しません

サポートサイト Wikidot.com