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 변수의 정 도 를 알려 야 합 니 다.데모 확장
위의 예 를 들 어 마우스 의 잔잔 한 물결 효 과 를 모방 한 데 모 를 쓰 고 모양 은 정사각형 으로 대체 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.