"use strict";
let shaderCodeDisplay = document.getElementById("fragment-shader-formula");
const setShaderCodeDisplay = (uniform, new_value) => {
// Initial values for uniforms
let uniforms = {
u_linewidth: 0.02,
u_color_coef: 1.0,
u_smoothstep_coef_1: 1.0,
u_smoothstep_coef_2: 1.0,
u_resolution_coef: 1.0,
u_y_coef: 1.0
}
// Set the new value
if (uniform && new_value) {
uniforms[uniform] = new_value
};
let preformattedText = `<pre>
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_linewidth;
uniform float u_color_coef;
uniform float u_smoothstep_coef_1;
uniform float u_smoothstep_coef_2;
uniform float u_resolution_coef;
uniform float u_y_coef;
uniform float u_count;
// Plot a line on Y using a value between 0.0-1.0
float plot(vec2 st, float pct) {
return ${uniforms.u_smoothstep_coef_1} * smoothstep( pct-${uniforms.u_linewidth}, pct, st.y) -
${uniforms.u_smoothstep_coef_2} * smoothstep( pct, pct+${uniforms.u_linewidth}, st.y);
}
void main() {
vec2 st = gl_FragCoord.xy/ ( ${uniforms.u_resolution_coef} * u_resolution);
float y = ${uniforms.u_y_coef} * st.x;
vec3 color = vec3(y);
// Plot a line
float pct = plot(st, y);
color = (${uniforms.u_color_coef}-pct)*color+pct*vec3(0.0,1.0,0.0);
gl_FragColor = vec4(color, 1.0);
}
</pre>`
shaderCodeDisplay.innerHTML = preformattedText;
}
setShaderCodeDisplay();
//
/*
* Copyright 2016, Gregg Tavares.
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
* met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following disclaimer
* in the documentation and/or other materials provided with the
* distribution.
* * Neither the name of Gregg Tavares. nor the names of his
* contributors may be used to endorse or promote products derived from
* this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
(function(root, factory) { // eslint-disable-line
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], function() {
return factory.call(root);
});
} else {
// Browser globals
root.webglLessonsUI = factory.call(root);
}
}(this, function() {
const gopt = getQueryParams();
function setupSlider(selector, options) {
var parent = document.querySelector(selector);
if (!parent) {
return; // like jquery don't fail on a bad selector
}
if (!options.name) {
options.name = selector.substring(1);
}
return createSlider(parent, options);
}
function createSlider(parent, options) {
var precision = options.precision || 0;
var min = options.min || 0;
var step = options.step || 1;
var value = options.value || 0;
var max = options.max || 1;
var fn = options.slide;
var name = gopt["ui-" + options.name] || options.name;
var uiPrecision = options.uiPrecision === undefined ? precision : options.uiPrecision;
var uiMult = options.uiMult || 1;
min /= step;
max /= step;
value /= step;
parent.innerHTML = `
<div class="gman-widget-outer">
<div class="gman-widget-label">${name}</div>
<div class="gman-widget-value"></div>
<input class="gman-widget-slider" type="range" min="${min}" max="${max}" value="${value}" />
</div>
`;
var valueElem = parent.querySelector(".gman-widget-value");
var sliderElem = parent.querySelector(".gman-widget-slider");
function updateValue(value) {
valueElem.textContent = (value * step * uiMult).toFixed(uiPrecision);
}
updateValue(value);
function handleChange(event) {
var value = parseInt(event.target.value);
updateValue(value);
fn(event, { value: value * step });
}
sliderElem.addEventListener('input', handleChange);
sliderElem.addEventListener('change', handleChange);
return {
elem: parent,
updateValue: (v) => {
v /= step;
sliderElem.value = v;
updateValue(v);
},
};
}
function makeSlider(options) {
const div = document.createElement("div");
return createSlider(div, options);
}
var widgetId = 0;
function getWidgetId() {
return "__widget_" + widgetId++;
}
function makeCheckbox(options) {
const div = document.createElement("div");
div.className = "gman-widget-outer";
const label = document.createElement("label");
const id = getWidgetId();
label.setAttribute('for', id);
label.textContent = gopt["ui-" + options.name] || options.name;
label.className = "gman-checkbox-label";
const input = document.createElement("input");
input.type = "checkbox";
input.checked = options.value;
input.id = id;
input.className = "gman-widget-checkbox";
div.appendChild(label);
div.appendChild(input);
input.addEventListener('change', function(e) {
options.change(e, {
value: e.target.checked,
});
});
return {
elem: div,
updateValue: function(v) {
input.checked = !!v;
},
};
}
function makeOption(options) {
const div = document.createElement("div");
div.className = "gman-widget-outer";
const label = document.createElement("label");
const id = getWidgetId();
label.setAttribute('for', id);
label.textContent = gopt["ui-" + options.name] || options.name;
label.className = "gman-widget-label";
const selectElem = document.createElement("select");
options.options.forEach((name, ndx) => {
const opt = document.createElement("option");
opt.textContent = gopt["ui-" + name] || name;
opt.value = ndx;
opt.selected = ndx === options.value
selectElem.appendChild(opt);
});
selectElem.className = "gman-widget-select";
div.appendChild(label);
div.appendChild(selectElem);
selectElem.addEventListener('change', function(e) {
options.change(e, {
value: selectElem.selectedIndex,
});
});
return {
elem: div,
updateValue: function(v) {
selectedElem.selectedIndex = v;
},
};
}
function noop() {
}
function genSlider(object, ui) {
const changeFn = ui.change || noop;
ui.name = ui.name || ui.key;
ui.value = object[ui.key];
ui.slide = ui.slide || function(event, uiInfo) {
object[ui.key] = uiInfo.value;
changeFn();
};
return makeSlider(ui);
}
function genCheckbox(object, ui) {
const changeFn = ui.change || noop;
ui.value = object[ui.key];
ui.name = ui.name || ui.key;
ui.change = function(event, uiInfo) {
object[ui.key] = uiInfo.value;
changeFn();
};
return makeCheckbox(ui);
}
function genOption(object, ui) {
const changeFn = ui.change || noop;
ui.value = object[ui.key];
ui.name = ui.name || ui.key;
ui.change = function(event, uiInfo) {
object[ui.key] = uiInfo.value;
changeFn();
};
return makeOption(ui);
}
const uiFuncs = {
slider: genSlider,
checkbox: genCheckbox,
option: genOption,
};
function setupUI(parent, object, uiInfos) {
const widgets = {};
uiInfos.forEach(function(ui) {
const widget = uiFuncs[ui.type](object, ui);
parent.appendChild(widget.elem);
widgets[ui.key] = widget;
});
return widgets;
}
function updateUI(widgets, data) {
Object.keys(widgets).forEach(key => {
const widget = widgets[key];
widget.updateValue(data[key]);
});
}
function getQueryParams() {
var params = {};
if (window.hackedParams) {
Object.keys(window.hackedParams).forEach(function(key) {
params[key] = window.hackedParams[key];
});
}
if (window.location.search) {
window.location.search.substring(1).split("&").forEach(function(pair) {
var keyValue = pair.split("=").map(function (kv) {
return decodeURIComponent(kv);
});
params[keyValue[0]] = keyValue[1];
});
}
return params;
}
return {
setupUI: setupUI,
updateUI: updateUI,
setupSlider: setupSlider,
makeSlider: makeSlider,
makeCheckbox: makeCheckbox,
};
}));
/**
* Creates and compiles a shader.
* @param {!WebGLRenderingContext} gl The WebGL Context.
* @param {string} shaderSource The GLSL source code for the shader.
* @param {number} shaderType The type of shader, VERTEX_SHADER or
* FRAGMENT_SHADER.
* @return {!WebGLShader} The shader.
*/
const compileShader = (gl, shaderSource, shaderType) => {
// Create the shader object
let shader = gl.createShader(shaderType);
// Set the shader source code
gl.shaderSource(shader, shaderSource);
// Compile the shader
gl.compileShader(shader);
// Check if it compiled
let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!success) {
// Something went wrong during compilation; get the error
throw "could not compile shader:" + gl.getShaderInfoLog(shader);
}
return shader;
}
/**
* Creates a program from 2 shaders.
*
* @param {!WebGLRenderingContext} gl The WebGL context.
* @param {!WebGLShader} vertexShader A vertex shader.
* @param {!WebGLShader} fragmentShader A fragment shader.
* @param {!WebGLProgram} A program.
*/
const createProgram = (gl, vertexShader, fragmentShader) => {
// create a program.
let program = gl.createProgram();
// attach the shaders.
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// link the program.
gl.linkProgram(program);
// Check if it linked.
let success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!success) {
// something went wrong with the link
throw ("program failed to link:" + gl.getProgramInfoLog(program));
}
return program;
};
/**
* Creates a shader from the content of a script tag
*
* @param {!WebGLRenderingContext} gl The WebGL Context.
* @param {string} scriptId The id of the script tag.
* @param {string} opt_shaderType. The type of shader to create.
* If not passed in will use the type attribute from the
* script tag.
* @return {!WebGLShader} A shader.
*/
const createShaderFromScript = (gl, scriptId, opt_shaderType)=> {
// look up the script tag by id.
let shaderScript = document.getElementById(scriptId);
if (!shaderScript) {
throw("*** Error: unknown script element" + scriptId);
}
// extract the contents of the script tag.
let shaderSource = shaderScript.text;
// If we didn't pass in a type, use the 'type' from
// the script tag.
if (!opt_shaderType) {
if (shaderScript.type == "x-shader/x-vertex") {
opt_shaderType = gl.VERTEX_SHADER;
} else if (shaderScript.type == "x-shader/x-fragment") {
opt_shaderType = gl.FRAGMENT_SHADER;
} else if (!opt_shaderType) {
throw("*** Error: shader type not set");
}
}
return compileShader(gl, shaderSource, opt_shaderType);
}
/**
* Creates a program from 2 script tags.
*
* @param {!WebGLRenderingContext} gl The WebGL Context.
* @param {string[]} shaderScriptIds Array of ids of the script
* tags for the shaders. The first is assumed to be the
* vertex shader, the second the fragment shader.
* @return {!WebGLProgram} A program
*/
const createProgramFromScripts = (gl, shaderScriptIds) => {
let vertexShader = createShaderFromScript(gl, shaderScriptIds[0], gl.VERTEX_SHADER);
let fragmentShader = createShaderFromScript(gl, shaderScriptIds[1], gl.FRAGMENT_SHADER);
return createProgram(gl, vertexShader, fragmentShader);
}
const main = () => {
// Get a WebGL context
/** @type {HTMLCanvasElement} */
let canvas = document.getElementById("canvas");
let gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// Shader Script IDs
let shaderScriptIds = ["vertex-shader", "fragment-shader"];
// Setup GLSL program
let program = createProgramFromScripts(gl, shaderScriptIds);
gl.useProgram(program);
// Look up where the vertex data needs to go.
let positionAttributeLocation = gl.getAttribLocation(program, "a_position");
// Look up uniforms.
let colorLocation = gl.getUniformLocation(program, "u_color");
let matrixLocation = gl.getUniformLocation(program, "u_matrix");
let resolutionLocation = gl.getUniformLocation(program, "u_resolution");
let linewidthLocation = gl.getUniformLocation(program, "u_linewidth");
let colorCoefLocation = gl.getUniformLocation(program, "u_color_coef")
let smoothstepCoef1Location = gl.getUniformLocation(program, "u_smoothstep_coef_1");
let smoothstepCoef2Location = gl.getUniformLocation(program, "u_smoothstep_coef_2");
let resolutionCoefficient = gl.getUniformLocation(program, "u_resolution_coef");
let yCoefficient = gl.getUniformLocation(program, "u_y_coef");
let countLocation = gl.getUniformLocation(program, "u_count");
gl.uniform1f(countLocation, 3.0);
gl.uniform1f(yCoefficient, 1.0);
gl.uniform1f(resolutionCoefficient, 1.0);
gl.uniform1f(linewidthLocation, 0.02)
gl.uniform1f(colorCoefLocation, 1.0)
gl.uniform1f(smoothstepCoef1Location, 1.0);
gl.uniform1f(smoothstepCoef2Location, 1.0);
// Create a buffer to put the points
let positionBuffer = gl.createBuffer();
// Bind it to ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Set the count and draw the scene
let count = 24;
drawScene(count);
// Setup a UI
webglLessonsUI.setupSlider("#u_linewidth", { value: 0.02, slide: updateLinewidth(0.02), max: 1.0, step: 0.01 })
function updateLinewidth(value) {
return function(event, ui) {
gl.uniform1f(linewidthLocation, ui.value);
// requestAnimationFrame(drawScene);
drawScene(count);
setShaderCodeDisplay("u_linewidth", ui.value);
}
};
webglLessonsUI.setupSlider("#u_color_coef", { value: 1.0, slide: updateColorCoef(1.0), max: 1.0, min: 0.0, step: 0.01})
function updateColorCoef(value) {
return function(event, ui) {
gl.uniform1f(colorCoefLocation, ui.value);
setShaderCodeDisplay("u_color_coef", ui.value);
drawScene(count);
}
};
webglLessonsUI.setupSlider("#u_smoothstep_coef_1", { value: 1.0, slide: updateSmoothstep1(1.0), max: 1.0, min: 0.0, step: 0.01})
function updateSmoothstep1(value) {
return function(event, ui) {
gl.uniform1f(smoothstepCoef1Location, ui.value);
setShaderCodeDisplay("u_smoothstep_coef_1", ui.value);
drawScene(count);
}
}
webglLessonsUI.setupSlider("#u_smoothstep_coef_2", { value: 1.0, slide: updateSmoothstep2(1.0), max: 1.0, min: 0.0, step: 0.01})
function updateSmoothstep2(value) {
return function(event, ui) {
gl.uniform1f(smoothstepCoef2Location, ui.value);
setShaderCodeDisplay("u_smoothstep_coef_2", ui.value);
drawScene(count);
}
};
webglLessonsUI.setupSlider("#u_resolution_coef", { value: 1.0, slide: updateResolutionCoef(1.0), min: 0.0, max: 10.0, step: 0.01})
function updateResolutionCoef(value) {
return function(event, ui) {
gl.uniform1f(resolutionCoefficient, ui.value);
setShaderCodeDisplay("u_resolution_coef", ui.value);
drawScene(count);
}
};
webglLessonsUI.setupSlider("#u_count", { value: 24.0, slide: updateCount(3.0), min: 3.0, step: 3.0, max: 24.0})
function updateCount(value) {
return function(event, ui) {
count = ui.value;
// requestAnimationFrame(drawScene);
drawScene(count);
}
};
// Draw the scene.
function drawScene(count) {
// Tell WebGL how to convert from clip space to pixels
gl.viewport(0,0,gl.canvas.width, gl.canvas.height);
// Clear the canvas
gl.clear(gl.COLOR_BUFFER_BIT);
// Tell it to use our program (pair of shaders)
gl.useProgram(program);
// Turn on the attribute
gl.enableVertexAttribArray(positionAttributeLocation);
// Bind the position buffer.
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
let size = 2;
let type = gl.FLOAT;
let normalize = false;
let stride = 0;
let offset = 0;
gl.vertexAttribPointer(
positionAttributeLocation, size, type, normalize, stride, offset);
// Set geometry
let test_points = [
[-1, 1],
[0, 1],
[1, 1],
[-1, 0],
[0, 0],
[1, 0],
[-1, -1],
[0, -1],
[1, -1]
];
let triangle_vertices = getTriangleVertices(test_points, 8).flat();
// Add draw array here
let buffer_float_array = Float32Array.from(triangle_vertices)
gl.bufferData(
gl.ARRAY_BUFFER,
buffer_float_array,
gl.STATIC_DRAW);
// Set resolution
gl.uniform2fv(resolutionLocation, [gl.canvas.width, gl.canvas.height]);
// Draw the geometry.
let primitiveType = gl.TRIANGLES;
let geometryOffset = 0;
// Limit the count based on the number of vertices
count = count > triangle_vertices / 2.0 ? triangle_vertices / 2.0 : count;
gl.drawArrays(primitiveType, geometryOffset, count);
}
}
const getTriangleVertices = (points, triangle_count) => {
let edge_vertex_count = Math.sqrt(triangle_count / 2.0) + 1.0;
let triangle_idx = 0;
let triangle_vertices = [];
let loop_length = edge_vertex_count * (edge_vertex_count - 1.0);
for (let i = 0; i < loop_length; i++) {
triangle_idx = i % edge_vertex_count;
if (triangle_idx == 0) {
// Top left triangle
triangle_vertices.push(points[i]);
triangle_vertices.push(points[i + 1]);
triangle_vertices.push(points[i + edge_vertex_count]);
} else if (triangle_idx == edge_vertex_count - 1) {
// Bottom right triangle
triangle_vertices.push(points[i]);
triangle_vertices.push(points[i + edge_vertex_count]);
triangle_vertices.push(points[i + edge_vertex_count - 1]);
} else {
// Top left triangle
triangle_vertices.push(points[i]);
triangle_vertices.push(points[i + 1]);
triangle_vertices.push(points[i + edge_vertex_count]);
// Bottom right triangle
triangle_vertices.push(points[i]);
triangle_vertices.push(points[i + edge_vertex_count]);
triangle_vertices.push(points[i + edge_vertex_count - 1]);
}
}
return triangle_vertices;
}
main();
!
