\u25a0\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0(\u30d4\u30af\u30bb\u30eb\u30b7\u30a7\u30fc\u30c0)<\/p>\n
\nprecision mediump float;
\nuniform sampler2D fragmentTexture;
\nvarying vec2 textureCoord;<\/p>\n
void main(void) {
\n gl_FragColor = texture2D(fragmentTexture, vec2(textureCoord));
\n}\n<\/p><\/div>\n
attribute\u3001vec3\u3001vec2\u3001uniform\u3001mat4\u3001varying\u306a\u3069\u69d8\u3005\u306a\u5358\u8a9e\u304c\u51fa\u3066\u304d\u307e\u3057\u305f\u306d\u3002
\n\u307e\u305a\u3001\u958b\u767a\u7d4c\u9a13\u8005\u306e\u65b9\u3067\u3042\u308c\u3070\u3042\u308b\u7a0b\u5ea6\u60f3\u50cf\u3067\u304d\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u5148\u982d\u90e8\u5206\u306f\u4fee\u98fe\u5b50(attribute\u3001uniform\u3001varying)\u3001\u305d\u306e\u6b21\u306f\u30c7\u30fc\u30bf\u578b(vec3\u3001vec2\u3001mat4)\u3001\u6700\u5f8c\u306f\u4efb\u610f\u306e\u5909\u6570\u540d(vertexPosition\u306a\u3069)\u3068\u306a\u308a\u307e\u3059\u3002
\n\u4fee\u98fe\u5b50\u3001\u30c7\u30fc\u30bf\u578b\u306b\u3064\u3044\u3066\u7e8f\u3081\u307e\u3059\u3002<\/p>\n
\u25cbattribute
\n\u3000\u30d0\u30fc\u30c6\u30c3\u30af\u30b9\u30b7\u30a7\u30fc\u30c0(\u9802\u70b9\u30b7\u30a7\u30fc\u30c0)\u5c02\u7528\u306e\u4fee\u98fe\u5b50\u3067\u3059\u3002
\n\u3000attribute\u4fee\u98fe\u5b50\u3067\u5ba3\u8a00\u3055\u308c\u305f\u5909\u6570\u306fWebGL\u3068\u30b7\u30a7\u30fc\u30c0\u9593\u3067\u9802\u70b9\u60c5\u5831\u3092\u6a4b\u6e21\u3057\u3059\u308b(\u30b7\u30a7\u30fc\u30c0\u5074\u304c\u53d7\u3051\u53d6\u308b)\u305f\u3081\u306e\u5909\u6570\u3068\u306a\u308a\u307e\u3059\u3002
\n\u3000WebGL\u5074\u3067\u540c\u3058\u540d\u524d\u306e\u5909\u6570\u306b\u9802\u70b9\u60c5\u5831\u3092\u8a2d\u5b9a\u3057\u3066\u304a\u304d\u3001\u30b7\u30a7\u30fc\u30c0\u5074\u306b\u60c5\u5831\u3092\u6e21\u3057\u307e\u3059\u3002<\/p>\n
\u25cbuniform
\n\u3000\u30d0\u30fc\u30c6\u30c3\u30af\u30b9\u30b7\u30a7\u30fc\u30c0(\u9802\u70b9\u30b7\u30a7\u30fc\u30c0)\u3001\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0(\u30d4\u30af\u30bb\u30eb\u30b7\u30a7\u30fc\u30c0)\u306e\u4e21\u65b9\u3067\u5229\u7528\u3067\u304d\u308b\u4fee\u98fe\u5b50\u3067\u3059\u3002
\n\u3000attribute\u540c\u69d8\u306b\u3001uniform\u3067\u5ba3\u8a00\u3055\u308c\u305f\u5909\u6570\u306fWebGL\u5074\u304b\u3089\u60c5\u5831\u3092\u6e21\u3059\u305f\u3081\u306e\u5909\u6570\u3068\u306a\u308a\u307e\u3059\u3002
\n\u3000\u3067\u306fattribute\u3068\u4f55\u304c\u9055\u3046\u306e\u304b\uff1f
\n\u3000attribute\u4fee\u98fe\u5b50\u306f3D\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u9802\u70b9\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u53d7\u3051\u6e21\u3059\u305f\u3081\u306e\u5c02\u7528\u4fee\u98fe\u5b50\u3067\u3059\u3002
\n\u3000\u9006\u306buniform\u4fee\u98fe\u5b50\u306f\u300c\u5168\u9802\u70b9\u306b\u5bfe\u3057\u3066\u4e00\u5f8b\u306b\u51e6\u7406\u3055\u308c\u308b\u60c5\u5831\u300d\u3092\u53d7\u3051\u6e21\u3059\u305f\u3081\u306e\u4fee\u98fe\u5b50\u3068\u306a\u308a\u307e\u3059\u3002
\n\u3000\u8981\u7d04\u3059\u308b\u3068\u30013D\u3092\u63cf\u753b\u3057\u3066\u3044\u308bcanvas\u4e0a\u5168\u4f53\u306b\u60c5\u5831\u3092\u53d7\u3051\u6e21\u3059\u5834\u5408\u306b\u5229\u7528\u3057\u307e\u3059\u3002
\n\u3000STEP6(\u5ea7\u6a19\u5909\u63db\u884c\u5217\u3092\u751f\u6210\uff06\u901a\u77e5)\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n
\u25cbvarying
\n\u3000\u30d0\u30fc\u30c6\u30c3\u30af\u30b9\u30b7\u30a7\u30fc\u30c0(\u9802\u70b9\u30b7\u30a7\u30fc\u30c0)\u3001\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0(\u30d4\u30af\u30bb\u30eb\u30b7\u30a7\u30fc\u30c0)\u306e\u4e21\u65b9\u3067\u5229\u7528\u3067\u304d\u308b\u4fee\u98fe\u5b50\u3067\u3059\u3002
\n\u3000\u524d\u56de\u306e\u30d6\u30ed\u30b0\u306b\u3082\u66f8\u304d\u307e\u3057\u305f\u304c\u3001\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0(\u30d4\u30af\u30bb\u30eb\u30b7\u30a7\u30fc\u30c0)\u304c\u7740\u8272\u5185\u5bb9\u3092\u8a08\u7b97\u3001\u6c7a\u5b9a\u3059\u308b\u306b\u306f\u9802\u70b9\u95a2\u9023\u306e\u60c5\u5831\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002
\n\u3000\u3053\u306e\u30d0\u30fc\u30c6\u30c3\u30af\u30b9\u30b7\u30a7\u30fc\u30c0(\u9802\u70b9\u30b7\u30a7\u30fc\u30c0)\u3068\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0(\u30d4\u30af\u30bb\u30eb\u30b7\u30a7\u30fc\u30c0)\u306e\u6a4b\u6e21\u3057\u3092\u3059\u308b\u305f\u3081\u306e\u5909\u6570\u3092varying\u3067\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n
\u25cbvec2\u3001vec3\u3001mat4
\n\u3000vec(\u6570\u5024)\u306f\u6d6e\u52d5\u5c0f\u6570\u70b9\u306e\u30d9\u30af\u30c8\u30eb\u578b\u3067\u3059\u3002
\n\u3000\u6570\u5024\u306b\u306f1\uff5e4\u304c\u8a2d\u5b9a\u3067\u304d\u3001\u6dfb\u5b57\u306b\u3088\u308a\u30d9\u30af\u30c8\u30eb\u8981\u7d20\u6570\u304c\u5909\u308f\u308a\u307e\u3059\u3002
\n\u3000vec2 => 2D\u30d9\u30af\u30c8\u30eb
\n\u3000vec3 => 3D\u30d9\u30af\u30c8\u30eb
\n\u3000vec4 => 4D\u30d9\u30af\u30c8\u30eb<\/p>\n
\u3000mat(\u6570\u5024)\u306f\u6d6e\u52d5\u5c0f\u6570\u70b9\u306e\u6b63\u65b9\u884c\u5217\u3067\u3059\u3002
\n\u3000\u6570\u5024\u306b\u306f2\uff5e4\u3092\u8a2d\u5b9a\u3067\u304d\u3001\u6dfb\u5b57\u306b\u3088\u308a\u6b63\u65b9\u884c\u5217\u6570\u304c\u5909\u308f\u308a\u307e\u3059\u3002(mat\u306f\u6050\u3089\u304f\u30de\u30c8\u30ea\u30c3\u30af\u30b9\u306e\u610f\u3067\u3059\u306d)
\n\u3000mat2 => 2×2
\n\u3000mat3 => 3×3
\n\u3000mat4 => 4×4<\/p>\n
attribute\u3067\u5ba3\u8a00\u3057\u305fvertexPosition\u3084vertexTexture\u3001uniform\u3067\u5ba3\u8a00\u3057\u305fvertexMatrix1\u3001vertexMatrix2\u306fSTEP6(\u5ea7\u6a19\u5909\u63db\u884c\u5217\u3092\u751f\u6210\uff06\u901a\u77e5)\u3067\u5024\u306e\u53d7\u3051\u6e21\u3057\u3092\u5b9f\u65bd\u3057\u3001
\nvarying\u3067\u5ba3\u8a00\u3057\u305ftextureCoord\u306f\u9802\u70b9\u95a2\u9023\u60c5\u5831\u3092\u53d7\u53d6\u5f8c\u3001\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0(\u30d4\u30af\u30bb\u30eb\u30b7\u30a7\u30fc\u30c0)\u306b\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u30b7\u30a7\u30fc\u30c0\u306e\u5ba3\u8a00\u90e8(WebGL\u3068\u306e\u30c7\u30fc\u30bf\u9023\u643a\u65b9\u6cd5\u3084\u53d7\u76bf\u3001\u30b7\u30a7\u30fc\u30c0\u9593\u306e\u9023\u643a\u65b9\u6cd5)\u306f\u4ee5\u4e0a\u3068\u306a\u308a\u3001\u6b21\u306f\u30b7\u30a7\u30fc\u30c0\u306e\u51e6\u7406\u90e8\u3067\u3059\u3002
\n\u3054\u89a7\u306e\u3068\u304a\u308a\u3001\u30d0\u30fc\u30c6\u30c3\u30af\u30b9\u30b7\u30a7\u30fc\u30c0(\u9802\u70b9\u30b7\u30a7\u30fc\u30c0)\u3001\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0(\u30d4\u30af\u30bb\u30eb\u30b7\u30a7\u30fc\u30c0)\u5171\u306bmain\u3068\u3044\u3046\u95a2\u6570\u304c\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u307e\u3059\u3002C\u8a00\u8a9e\u30e9\u30a4\u30af\u3067\u3059\u306d\u3002
\n\u5fc5\u305amain\u3068\u3044\u3046\u95a2\u6570\u3092\u5b9a\u7fa9\u3057\u3001\u305d\u306e\u306a\u304b\u306b\u51e6\u7406\u5185\u5bb9\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002
\n\u305d\u3057\u3066\u3001\u30d0\u30fc\u30c6\u30c3\u30af\u30b9\u30b7\u30a7\u30fc\u30c0(\u9802\u70b9\u30b7\u30a7\u30fc\u30c0)\u3067\u306fgl_Position\u3068\u3044\u3046\u7d44\u8fbc\u307f\u5909\u6570\u306b\u9802\u70b9\u30c7\u30fc\u30bf\u3092\u6e21\u3057\u3001\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0(\u30d4\u30af\u30bb\u30eb\u30b7\u30a7\u30fc\u30c0)\u3067\u306fgl_FragColo\u3068\u3044\u3046\u7d44\u307f\u8fbc\u307f\u5909\u6570\u306b\u30c7\u30fc\u30bf\u3092\u6e21\u3057\u307e\u3059\u3002
\n\u203b\u9802\u70b9\u30c7\u30fc\u30bf\u306f\u5fc5\u9808\u3068\u306a\u308a\u307e\u3059\u304c\u3001\u30d5\u30e9\u30b0\u30e1\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u306f\u5fc5\u9808\u3067\u306f\u306a\u3044\u3067\u3059\u3002<\/p>\n
\u5909\u6570\u5ba3\u8a00(WebGL\u3068\u306e\u9023\u4fc2\u7528\u53d7\u76bf)\u3001\u30b7\u30a7\u30fc\u30c0\u9593\u9023\u643a\u5185\u5bb9\u306e\u5b9f\u88c5\u3001\u8a08\u7b97\u51e6\u7406\u5185\u5bb9\u306e\u5b9f\u88c5\u306a\u3069\u30b7\u30a7\u30fc\u30c0\u81ea\u4f53\u306e\u5ba3\u8a00\u304c\u5b8c\u4e86\u3057\u305f\u305f\u3081\u3001\u6b21\u306fWebGL\u3067\u8a72\u5f53\u306e\u30b7\u30a7\u30fc\u30c0\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u307e\u3059\u3002
\n\u307e\u305a\u3001getElementById\u3067HTML\u5185\u306e\u30d0\u30fc\u30c6\u30c3\u30af\u30b9\u30b7\u30a7\u30fc\u30c0(\u9802\u70b9\u30b7\u30a7\u30fc\u30c0)\u3001\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0(\u30d4\u30af\u30bb\u30eb\u30b7\u30a7\u30fc\u30c0)\u30a8\u30ec\u30e1\u30f3\u30c8\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n
\nvar shader;
\nvar shaderElement = document.getElementById(id);
\nif (!shaderElement) {
\n return null;
\n}\n<\/div>\n
\u305d\u306e\u5f8c\u3001\u30a8\u30ec\u30e1\u30f3\u30c8\u30bf\u30a4\u30d7\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3001\u30bf\u30a4\u30d7\u6bce\u306b\u8a72\u5f53\u306e\u30b7\u30a7\u30fc\u30c0\u751f\u6210\u3057\u307e\u3059\u3002
\n\u3053\u3053\u3067\u521d\u3081\u3066\u30b7\u30a7\u30fc\u30c0\u3092\u751f\u6210(createShader)\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\nswitch(shaderElement.type){
\n case “x-shader\/x-vertex”:
\n shader = gl.createShader(gl.VERTEX_SHADER);
\n break;
\n case “x-shader\/x-fragment”:
\n shader = gl.createShader(gl.FRAGMENT_SHADER);
\n break;
\n default:
\n return null;
\n}\n<\/div>\n
\u6b21\u306b\u3001HTML\u5185\u3067\u5ba3\u8a00\u3057\u305f\u5909\u6570\u3001\u9023\u643a\u5185\u5bb9\u3001\u8a08\u7b97\u51e6\u7406\u306a\u3069\u306e\u6587\u5b57\u5217(\u30bd\u30fc\u30b9)\u3092\u4e0a\u8a18\u30b7\u30a7\u30fc\u30c0\u306b\u5272\u308a\u5f53\u3066(shaderSource)\u308b\u305f\u3081\u3001firstChild\u3067\u30a8\u30ec\u30e1\u30f3\u30c8\u5185\u306e\u6587\u5b57\u5217\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002
\n\u4e00\u901a\u308a\u306e\u6587\u5b57\u5217\u53d6\u5f97\u304c\u5b8c\u4e86\u3057\u305f\u3089\u6700\u5f8c\u306b\u30b3\u30f3\u30d1\u30a4\u30eb(compileShader)\u3067\u3059\u3002<\/p>\n
\n\/\/\u5b50\u30ce\u30fc\u30c9\u53d6\u5f97
\nvar source = “”;
\nvar childNodes = shaderElement.firstChild;
\nwhile (childNodes) {
\n if (childNodes.nodeType == 3) {
\n source += childNodes.textContent;
\n }
\n childNodes = childNodes.nextSibling;
\n}
\ngl.shaderSource(shader, source); \/\/ \u30bd\u30fc\u30b9\u5272\u308a\u5f53\u3066
\ngl.compileShader(shader); \/\/ \u30b3\u30f3\u30d1\u30a4\u30eb\n<\/div>\n
\u3053\u308c\u3067STEP3\u306e\u300c\u30b7\u30a7\u30fc\u30c0\u3092\u751f\u6210\uff06\u30b3\u30f3\u30d1\u30a4\u30eb\u300d\u306f\u7d42\u308f\u308a\u3067\u3059\u3002
\n\uff06
\n\u4eca\u56de\u306e\u30d6\u30ed\u30b0\u3082\u7d42\u308f\u308a\u3067\u3059\uff01\uff01<\/p>\n
\u7d30\u304b\u306a\u3068\u3053\u308d\u306f\u7aef\u6298\u308a\u306a\u304c\u3089\u66f8\u3044\u3066\u3044\u308b\u3064\u3082\u308a\u3067\u3059\u304c\u2026\u60f3\u5b9a\u5916\u306b\u9577\u6587\uff06\u9577\u671f\u5316\u3057\u3066\u304a\u308a\u307e\u3059\u3002\u3002\u3002
\n\u307e\u3060\u307e\u3060STEP3\u3067\u3059\u304c\u3001STEP4\u4ee5\u964d\u3082\u9811\u5f35\u3063\u3066\u9023\u8f09\u3057\u3066\u3044\u304d\u307e\u3059\u306e\u3067\u5b9c\u3057\u304f\u304a\u9858\u3044\u3057\u307e\u3059\u3002<\/p>\n
\u3067\u306f\u3067\u306f\u3002<\/p>\n
\n
<\/div>
<\/fb:like><\/div>\n ![\"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"](\"\/\/b.hatena.ne.jp\/images\/entry-button\/button-only@2x.png\")
<\/a>