webgl 학습 노트. - 화점 부터.

머리말
저 자 는 webgl 초보 자 이 고 깊 은 내용 이 없습니다. 본 시 리 즈 는 webgl 을 처음 배 우 는 과정 기록 글 입 니 다. 큰 소 가 많이 지적 해 준 것 을 환영 합 니 다. 본 시 리 즈 는 작가 본인 의 개인 적 인 이해 에 오류 가 있 을 수 있 고 비정 기적 으로 교정 할 수 있 습 니 다.웹 gl 에 관심 이 있 으 면 같이 공부 하 세 요!저 자 는 문필 에 한계 가 있 습 니 다. 주로 코드 를 위주 로 합 니 다. 양해 해 주 십시오 ~
웹 gl 이란 무엇 입 니까?
쉽게 말 하면 webgl 은 브 라 우 저 에 복잡 한 3 차원 도형 을 과장 하 는 능력 을 제공 합 니 다. 모 르 는 것 은 스스로 검색 할 수 있 습 니 다. 여 기 는 군말 이 아 닙 니 다.
canvas 웹 gl 컨 텍스트 만 들 기
html

<canvas id='canvas'>canvas>

js

const ctx = document.getElementById('canvas')
ctx.getContext('webgl') //    webgl    

canvas 에 대해 잘 아 는 학생 들 은 ctx.getContext 두 가지 옵션 2d / webgl 이 존재 한 다 는 것 을 알 아야 합 니 다. 전 자 는 2d 렌 더 링 컨 텍스트 를 만 드 는 데 사용 되 고 후 자 는 webgl 렌 더 링 컨 텍스트 를 만 드 는 데 사 용 됩 니 다. 여 기 는 주로 webgl 에 대해 컨 텍스트 를 그 리 는 학습 입 니 다.
한 가지 문제: 만약 우리 가 한 가지 점 을 설명 한다 면 어떻게 묘사 해 야 합 니까?이 점 의 위치, 크기, 색상 을 설명 해 야 합 니 다. 그러면 이 속성 들 은 webgl 에서 정점 착색 기와 필름 착색 기 를 통 해 설명 할 수 있 습 니 다.
정점 착색 기와 필름 착색 기
정점 착색 기: 정점 착색 기 는 정점 특성 (예 를 들 어 위치) 을 설명 하 는 프로그램 입 니 다.정점 은 2 차원 또는 3 차원 공간의 한 점, 예 를 들 어 2 차원 또는 3 차원 이미지 의 단점 이나 교점 을 말한다.필름 착색 기: 필름 처리 과정 이 빛 과 같은 프로그램 을 진행한다.영화 원 은 웹 gl 의 용어 로 픽 셀 로 이해 할 수 있다.
착색 기 는 다음 그림 을 통 해 이해 할 수 있다.
위의 개념 을 알 면 됩 니 다. 다음은 점 을 그 려 착색 기 를 이해 하 겠 습 니 다.
점 을 찍다

const ctx = document.getElementById('canvas').getContext('webgl')

//      
const VSHADER_SOURCE = [
    'void main() {',
    '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);', //       
    '    gl_PointSize = 10.0;', //       
    '}',
].join('
')

//      
const FSHADER_SOURCE = [
    'void main() {',
    '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);',
    '}',
].join('
')

if (ctx) {
    // initShader     utils/index.js  ，     program       
    if (initShader(ctx, VSHADER_SOURCE, FSHADER_SOURCE)) {
        ctx.clearColor(0.0, 0.0, 0.0, 1.0)
        ctx.clear(ctx.COLOR_BUFFER_BIT)

        ctx.drawArrays(ctx.POINTS, 0, 1)
    }
}

착색 기 코드 를 조정 함으로써 점 의 위치, 크기, 색 을 바 꿀 수 있 습 니 다.
여기 vec4 는 GLSL 의 데이터 형식 으로 4 개의 float 의 벡터 를 나타 낸다.
클릭 하여 화점

//      
const VSHADER_SOURCE = [
    'attribute vec4 a_Position;', //       
    'void main() {',
    '    gl_Position = a_Position;', //       
    '    gl_PointSize = 10.0;', //       
    '}',
].join('
')

//    a_Position      
const a_Position = gl.getAttribLocation(gl.program, 'a_Position')

gl.vertexAttrib3f(a_Position, x, y, 0.0) //      

위의 코드 는 차이 부분 만 포함 하고 정점 착색 기 에서 변 수 를 정의 합 니 다 aPosition, 그리고 js 에서 변수 저장 위 치 를 가 져 옵 니 다. 마우스 클릭 후 클릭 위 치 를 가 져 오고 aPosition 값, 그리고 webgl 은 점 을 렌 더 링 합 니 다.
여기 서 작 가 는 위 치 를 조정 할 때 캔버스 가 아무리 크 더 라 도 canvas 좌표 의 범 위 는 항상 [-1, 1] 이 고 다른 요소 와 관련 이 있어 야 한 다 는 것 을 발견 했다. 여기 서 의문 을 보류 했다.
점 을 여러 개 그리다

const points = []
canvas.addEventListener('click', e => {
    const x = (e.clientX - left) * 2 / canvas.width - 1
    const y = 1 - (e.clientY - top) * 2 / canvas.height
    points.push(x, y)
    clearCanvas()

    for (let i = 0, len = points.length; i < len; i += 2) {
        gl.vertexAttrib3f(a_Position, points[i], points[i + 1], 0.0) //      
        gl.drawArrays(gl.POINTS, 0, 1) //   
    }
})

한 점 과 여러 점 을 비교 해 보면 webgl 은 그 릴 때마다 캔버스 를 비우 기 때문에 여러 점 을 그 릴 때 예전 의 점 을 다시 그 려 야 한 다 는 것 을 알 수 있 습 니 다.
수정 점 색상

//      
const FSHADER_SOURCE = [
    'precision mediump float;',
    'uniform vec4 u_FragColor;', //       
    'void main() {',
    '    gl_FragColor = u_FragColor;',
    '}',
].join('
')

gl.uniform4f(u_FragColor, points[i + 2], points[i + 3], points[i + 4], 1.0) //        

필름 원 착색 기 에서 변 수 를 정의 하고 사용 uniform 하 며 대응 하 는 설정 은 gl.uniform4f 입 니 다.원본 착색 기 를 수정 하 는 과정 에서 빠 졌 습 니 다 precision mediump float;. stackoverflow 의 설명 을 찾 았 습 니 다. 변 수 를 정의 할 때 GPU 변수의 정 도 를 알려 야 합 니 다.
데모 확장
위의 예 를 들 어 마우스 의 잔잔 한 물결 효 과 를 모방 한 데 모 를 쓰 고 모양 은 정사각형 으로 대체 합 니 다.