79 lines
2.2 KiB
HTML
79 lines
2.2 KiB
HTML
<!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>
|