58 lines
1.2 KiB
Markdown
58 lines
1.2 KiB
Markdown
|
---
|
||
|
|
layout: post-plain
|
||
|
|
title: "Shader fun"
|
||
|
|
date: 2020-12-28
|
||
|
|
categories: design
|
||
|
|
---
|
||
|
|
<canvas id="canvas" width="1080" height="1080" style="border:1px solid white;
|
||
|
|
width:100%;"></canvas>
|
||
|
|
|
||
|
|
<script id="node-vertex-shader" type="x-shader/x-vertex">
|
||
|
|
uniform vec2 u_resolution;
|
||
|
|
attribute vec2 a_position;
|
||
|
|
attribute vec2 a_center;
|
||
|
|
attribute float a_radius;
|
||
|
|
|
||
|
|
varying vec2 center;
|
||
|
|
varying vec2 resolution;
|
||
|
|
varying float radius;
|
||
|
|
|
||
|
|
void main() {
|
||
|
|
vec2 clipspace = a_position / u_resolution * 2.0 - 1.0;
|
||
|
|
gl_Position = vec4(clipspace * vec2(1, -1), 0, 1);
|
||
|
|
|
||
|
|
radius = a_radius;
|
||
|
|
center = a_center;
|
||
|
|
resolution = u_resolution;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="node-fragment-shader" type="x-shader/x-fragment">
|
||
|
|
|
||
|
|
precision mediump float;
|
||
|
|
|
||
|
|
varying vec2 center;
|
||
|
|
varying vec2 resolution;
|
||
|
|
varying float radius;
|
||
|
|
|
||
|
|
void main() {
|
||
|
|
vec4 color0 = vec4(0.0, 0.0, 0.0, 0.0);
|
||
|
|
|
||
|
|
float x = gl_FragCoord.x;
|
||
|
|
float y = resolution[1] - gl_FragCoord.y;
|
||
|
|
|
||
|
|
float dx = center[0] - x;
|
||
|
|
float dy = center[1] - y;
|
||
|
|
float distance = sqrt(dx*dx + dy*dy);
|
||
|
|
|
||
|
|
if ( distance < radius )
|
||
|
|
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
|
||
|
|
else
|
||
|
|
gl_FragColor = color0;
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
{% asset shaderCanvas2.js %}
|