{"id":319009,"date":"2021-03-04T09:00:40","date_gmt":"2021-03-04T09:00:40","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=319009"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=319009","title":{"rendered":"\u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u0414\u0430\u043b\u0430\u043c\u0431\u0435\u0440\u0430 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438"},"content":{"rendered":"\n
\n

\u0414\u043e\u0431\u0440\u044b\u0439 \u0434\u0435\u043d\u044c! <\/p>\n

\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0431\u044b \u0445\u043e\u0442\u0435\u043b \u0412\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0444\u043e\u0440\u043c\u0443\u043b\u0443 \u0414\u0430\u043b\u0430\u043c\u0431\u0435\u0440\u0430:<\/p>\n

<\/figcaption><\/figure>\n

\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439, \u0437\u0430 \u0441\u0447\u0435\u0442 \u0447\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043e\u043b\u043d\u0430(wave). \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0437\u0434\u0435\u0441\u044c x \u0438 t, \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 a. \u0414\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 fi \u0438 ksi, \u0442\u043e\u0447\u043d\u0435\u0435 y(\u0432\u043c\u0435\u0441\u0442\u043e ksi).<\/p>\n

\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 WebGL.<\/p>\n

\u0424\u0430\u0439\u043b Wave.html:<\/p>\n

<!DOCTYPE html> <html lang=\"en\"> <head>  <meta charset=\"utf-8\" \/>  <title>Draw a Wave<\/title> <\/head>  <body onload=\"main()\">  <canvas id=\"webgl\" width=\"1600\" height=\"1000\">  Please use a browser that supports \"canvas\"  <\/canvas> <script src=\"webgl-utils.js\"><\/script> <script src=\"webgl-debug.js\"><\/script> <script src=\"cuon-utils.js\"><\/script> <script src=\"Wave.js\"><\/script> <\/body> <\/html> <\/code><\/pre>\n
\u0412\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c webgl-utils.js webgl-debug.js cuon-utils.js \u043a \u0444\u0430\u0439\u043b\u0443 Wave.html \u043b\u0438\u0431\u043e \u043d\u0430\u0439\u0442\u0438 \u0438\u0445 \u0432 \u0441\u0435\u0442\u0438 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c.<\/p>\n
\u0424\u0430\u0439\u043b Wave.js:<\/p>\n
\/\/ Vertex shader program var VSHADER_SOURCE =   'attribute vec4 a_Position;\\n' +   'void main() {\\n' +   '  gl_Position = a_Position;\\n' +   '}\\n';  \/\/ Fragment shader program var FSHADER_SOURCE =   'void main() {\\n' +   '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\\n' +   '}\\n';  var xx=0; function main() {   \/\/ Retrieve <canvas> element   var canvas = document.getElementById('webgl');    \/\/ Get the rendering context for WebGL   var gl = getWebGLContext(canvas);   if (!gl) {     console.log('Failed to get the rendering context for WebGL');     return;   }    \/\/ Initialize shaders   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {     console.log('Failed to intialize shaders.');     return;   }    \/\/ Write the positions of vertices to a vertex shader   var n = initVertexBuffers(gl);   if (n < 0) {     console.log('Failed to set the positions of the vertices');     return;   }    \/\/ Specify the color for clearing <canvas>   gl.clearColor(0, 0, 0, 1);    var tick = function() {     draw(gl, n);   \/\/ Draw function     requestAnimationFrame(tick, canvas); \/\/ Request that the browser calls tick   };   tick(); } function draw(gl, n) {   \/\/ Clear <canvas>   gl.clear(gl.COLOR_BUFFER_BIT);   initVertexBuffers(gl);     \/\/ function   gl.drawArrays(gl.LINE_STRIP, 0, n); } function fi(x) {     return Math.cos(x); } function ksi(x) {     return Math.sin(3*x); } function Dalamber(x,t) {     return 0.5*(fi(x-t) + fi(x+t))+0.5*(ksi(x+t)-ksi(x-t)); } function initVertexBuffers(gl) {    var vertices = new Float32Array(400);   var i=0;   for(var t=-1.0;t<1.0;t+=0.01)   {       vertices[i]=t;       vertices[i+1]=Dalamber(t,xx)\/2;       \/\/document.write(\"x=\",vertices[i],\"y=\",vertices[i+1]+\"<br>\");       i+=2;   }   xx+=0.01;   var n = vertices.length\/2;   \/\/ Create a buffer object   var vertexBuffer = gl.createBuffer();   if (!vertexBuffer) {     console.log('Failed to create the buffer object');     return -1;   }    \/\/ Bind the buffer object to target   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);   \/\/ Write date into the buffer object   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');   if (a_Position < 0) {     console.log('Failed to get the storage location of a_Position');     return -1;   }   \/\/ Assign the buffer object to a_Position variable   gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);    \/\/ Enable the assignment to a_Position variable   gl.enableVertexAttribArray(a_Position);    return n; } <\/code><\/pre>\n
\u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 fi \u0438 ksi, \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0441\u0443\u043c\u043c\u0443, \u0443\u043c\u043d\u043e\u0436\u0430\u0442\u044c.<\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u0435 \u0441\u0443\u0434\u0438\u0442\u0435 \u0441\u0442\u0440\u043e\u0433\u043e \u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p>\n<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/545426\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n
\n
\u0414\u043e\u0431\u0440\u044b\u0439 \u0434\u0435\u043d\u044c! <\/p>\n
\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0431\u044b \u0445\u043e\u0442\u0435\u043b \u0412\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0444\u043e\u0440\u043c\u0443\u043b\u0443 \u0414\u0430\u043b\u0430\u043c\u0431\u0435\u0440\u0430:<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439, \u0437\u0430 \u0441\u0447\u0435\u0442 \u0447\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043e\u043b\u043d\u0430(wave). \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0437\u0434\u0435\u0441\u044c x \u0438 t, \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 a. \u0414\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 fi \u0438 ksi, \u0442\u043e\u0447\u043d\u0435\u0435 y(\u0432\u043c\u0435\u0441\u0442\u043e ksi).<\/p>\n
\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 WebGL.<\/p>\n
\u0424\u0430\u0439\u043b Wave.html:<\/p>\n
<!DOCTYPE html> <html lang=\"en\"> <head>  <meta charset=\"utf-8\" \/>  <title>Draw a Wave<\/title> <\/head>  <body onload=\"main()\">  <canvas id=\"webgl\" width=\"1600\" height=\"1000\">  Please use a browser that supports \"canvas\"  <\/canvas> <script src=\"webgl-utils.js\"><\/script> <script src=\"webgl-debug.js\"><\/script> <script src=\"cuon-utils.js\"><\/script> <script src=\"Wave.js\"><\/script> <\/body> <\/html> <\/code><\/pre>\n
\u0412\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c webgl-utils.js webgl-debug.js cuon-utils.js \u043a \u0444\u0430\u0439\u043b\u0443 Wave.html \u043b\u0438\u0431\u043e \u043d\u0430\u0439\u0442\u0438 \u0438\u0445 \u0432 \u0441\u0435\u0442\u0438 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c.<\/p>\n
\u0424\u0430\u0439\u043b Wave.js:<\/p>\n
\/\/ Vertex shader program var VSHADER_SOURCE =   'attribute vec4 a_Position;\\n' +   'void main() {\\n' +   '  gl_Position = a_Position;\\n' +   '}\\n';  \/\/ Fragment shader program var FSHADER_SOURCE =   'void main() {\\n' +   '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\\n' +   '}\\n';  var xx=0; function main() {   \/\/ Retrieve <canvas> element   var canvas = document.getElementById('webgl');    \/\/ Get the rendering context for WebGL   var gl = getWebGLContext(canvas);   if (!gl) {     console.log('Failed to get the rendering context for WebGL');     return;   }    \/\/ Initialize shaders   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {     console.log('Failed to intialize shaders.');     return;   }    \/\/ Write the positions of vertices to a vertex shader   var n = initVertexBuffers(gl);   if (n < 0) {     console.log('Failed to set the positions of the vertices');     return;   }    \/\/ Specify the color for clearing <canvas>   gl.clearColor(0, 0, 0, 1);    var tick = function() {     draw(gl, n);   \/\/ Draw function     requestAnimationFrame(tick, canvas); \/\/ Request that the browser calls tick   };   tick(); } function draw(gl, n) {   \/\/ Clear <canvas>   gl.clear(gl.COLOR_BUFFER_BIT);   initVertexBuffers(gl);     \/\/ function   gl.drawArrays(gl.LINE_STRIP, 0, n); } function fi(x) {     return Math.cos(x); } function ksi(x) {     return Math.sin(3*x); } function Dalamber(x,t) {     return 0.5*(fi(x-t) + fi(x+t))+0.5*(ksi(x+t)-ksi(x-t)); } function initVertexBuffers(gl) {    var vertices = new Float32Array(400);   var i=0;   for(var t=-1.0;t<1.0;t+=0.01)   {       vertices[i]=t;       vertices[i+1]=Dalamber(t,xx)\/2;       \/\/document.write(\"x=\",vertices[i],\"y=\",vertices[i+1]+\"<br>\");       i+=2;   }   xx+=0.01;   var n = vertices.length\/2;   \/\/ Create a buffer object   var vertexBuffer = gl.createBuffer();   if (!vertexBuffer) {     console.log('Failed to create the buffer object');     return -1;   }    \/\/ Bind the buffer object to target   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);   \/\/ Write date into the buffer object   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');   if (a_Position < 0) {     console.log('Failed to get the storage location of a_Position');     return -1;   }   \/\/ Assign the buffer object to a_Position variable   gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);    \/\/ Enable the assignment to a_Position variable   gl.enableVertexAttribArray(a_Position);    return n; } <\/code><\/pre>\n
\u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 fi \u0438 ksi, \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0441\u0443\u043c\u043c\u0443, \u0443\u043c\u043d\u043e\u0436\u0430\u0442\u044c.<\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u0435 \u0441\u0443\u0434\u0438\u0442\u0435 \u0441\u0442\u0440\u043e\u0433\u043e \u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p>\n<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/545426\/<\/a>
<\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-319009","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=319009"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319009\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=319009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=319009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=319009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}