WegGL ( 2)

attribute vec4 a_position; //        .uniform mat4 u_matrix; //         void main(){    gl_Position = u_matrix * a_position; //  glsl       .                .}

precision mediump float; //   . void main() {  gl_FragColor = vec4(1., 0., 0., 1.); //  }

import { vertex, fragment } from './shaders'; //  parcel  import { createCanvas, createProgramFromTexts } from "./helpers"; import { m4 } from "./matrix3d"; //   webgl  webgl fund,          3 .import appleObj from "./apple.obj"; //  import * as OBJ from "webgl-obj-loader"; //     objfunction main() {  const apple = new OBJ.Mesh(appleObj); //      const canvas = createCanvas(); //  canvas    body  const gl = canvas.getContext("webgl"); //    const program = createProgramFromTexts(gl, vertex, fragment); //      gl.useProgram(program); //      //      const positionLocation = gl.getAttribLocation(program, "a_position");  //     ,           .  .obj      ,        .  OBJ.initMeshBuffers(gl, apple);  gl.enableVertexAttribArray(positionLocation); //  ,     ,   ,   .  gl.vertexAttribPointer(    positionLocation,    apple.vertexBuffer.itemSize, //         ,       gl.FLOAT,    false, //      0,    0  ); //       //          .         const matrixLocation = gl.getUniformLocation(program, "u_matrix");  let translation = [canvas.width / 2, 400, 0]; //        400 px   let rotation = [degToRad(180), degToRad(0), degToRad(0)]; //     let scale = [5, 5, 5]; //    5 . scaleX, scaleY, scaleZ  //     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);  gl.enable(gl.DEPTH_TEST); //   ,           -   ,     , ,    .  function drawScene() {    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //         const matrix = m4.multiply(      m4.identity(), //   .       .      m4.orthographic(        0,        gl.canvas.width,        gl.canvas.height,        0,        400,        -400      ), //            -1  1.      m4.translation(...translation), //         m4.xRotation(rotation[0]), //   X      m4.yRotation(rotation[1]), //   Y      m4.zRotation(rotation[2]), //   Z      m4.scaling(...scale) //      ); //     ,     1          gl.uniformMatrix4fv(matrixLocation, false, matrix); //      //        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, apple.indexBuffer);    //          gl.drawElements(      gl.TRIANGLES,      apple.indexBuffer.numItems,      gl.UNSIGNED_SHORT,      0    );  }  drawScene();  //      ,   .  // ...  //}main();

precision mediump float;attribute vec4 a_position;attribute vec2 a_texture_coords; //    uniform mat4 u_matrix;varying vec2 v_texture_coords;void main(){    gl_Position = u_matrix * a_position;    v_texture_coords = a_texture_coords; //     }

precision mediump float;varying vec2 v_texture_coords; //   uniform sampler2D u_texture; // void main(){  gl_FragColor = texture2D(u_texture, v_texture_coords);}

  //...  const textureCoordsLocation = gl.getAttribLocation(    program,    "a_texture_coords"  ); //       // ...  gl.enableVertexAttribArray(textureCoordsLocation);  gl.bindBuffer(gl.ARRAY_BUFFER, apple.textureBuffer); //         gl.vertexAttribPointer(    textureCoordsLocation,    apple.textureBuffer.itemSize,    gl.FLOAT,    false,    0,    0  );  const texture = gl.createTexture(); //      gl.bindTexture(gl.TEXTURE_2D, texture); //   gl.texImage2D(    gl.TEXTURE_2D,    0,    gl.RGBA,    1,    1,    0,    gl.RGBA,    gl.UNSIGNED_BYTE,    new Uint8Array([0, 0, 255, 255])  ); //   ,     const image = new Image();  image.src = textureImg; //    image.onload = () => {    gl.bindTexture(gl.TEXTURE_2D, texture);    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);    gl.generateMipmap(gl.TEXTURE_2D);    gl.texParameteri(      gl.TEXTURE_2D,      gl.TEXTURE_MIN_FILTER,      gl.LINEAR_MIPMAP_LINEAR    );    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); // -  ,        drawScene();  };  // ...  const textureLocation = gl.getUniformLocation(program, "u_texture");  function drawScene() {    // ...    gl.uniform1i(textureLocation, 0);    // ...  }