| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=600"> |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
| <title>WebMetal Cubes demo</title> |
| <link rel="stylesheet" href="shared.css"> |
| <link rel="stylesheet" href="https://webkit.org/wp-content/themes/webkit/style.css"> |
| <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Myriad+Set+Pro&v=1"> |
| <script src="gl-matrix-min.js"></script> |
| <script src="shared.js"></script> |
| <script src="cubes.js"></script> |
| <script id="library" type="x-shader/x-metal"> |
| #include <metal_stdlib> |
| #include <simd/simd.h> |
| |
| using namespace metal; |
| |
| struct uniform_t |
| { |
| float4x4 modelview_projection_matrix; |
| float4x4 normal_matrix; |
| float4 ambient_color; |
| float multiplier; |
| } __attribute__ ((aligned (256))); |
| |
| constant float3 light_position = float3(0.0, -1.0, 1.0); |
| constant float4 light_color = float4(1, 1, 1, 1); |
| |
| struct vertex_t |
| { |
| packed_float3 position; |
| packed_float3 normal; |
| }; |
| |
| struct varying_t { |
| float4 position [[position]]; |
| half4 color; |
| }; |
| |
| vertex varying_t vertex_function(device vertex_t* vertex_array [[ buffer(0) ]], |
| constant uniform_t& uniforms [[ buffer(1) ]], |
| unsigned int vid [[ vertex_id ]]) |
| { |
| varying_t out; |
| |
| float4 position = float4(float3(vertex_array[vid].position), 1.0); |
| out.position = uniforms.modelview_projection_matrix * position; |
| |
| float3 normal = vertex_array[vid].normal; |
| float4 eye_normal = normalize(uniforms.normal_matrix * float4(normal, 0.0)); |
| |
| float n_dot_l = dot(eye_normal.rgb, normalize(light_position)); |
| n_dot_l = fmax(0.0, n_dot_l); |
| |
| out.color = half4(uniforms.ambient_color + light_color * n_dot_l); |
| |
| return out; |
| } |
| |
| fragment half4 fragment_function(varying_t in [[stage_in]]) |
| { |
| return in.color; |
| }; |
| </script> |
| </head> |
| <body> |
| <canvas></canvas> |
| <div id="error"> |
| <h2>WebMetal not available</h2> |
| <p> |
| Make sure you are on a system with WebMetal enabled. In |
| Safari, first make sure the Developer Menu is visible (Preferences → |
| Advanced), then Develop → Experimental Features → Enable WebMetal. |
| </p> |
| </div> |
| </body> |
| </html> |
