Real-Time 3D Graphics with WebGL 2

웹브라우저에서 동작하는 WebGL 2 API 관련 도서의 예제입니다.

도서 홈페이지
도서 오픈소스

개발환경

효율적인 개발 환경 구축.
인텔리센스와 디버깅이 가능하게 구축하도록 한다.

os : Windows 10
nvm : node version manager
node.js
webpack
vs code
live server
glsl lint
gl-matrix

자바스크립트

webgl은 웹브라우저에서 실행된다.
ESM ( ECMAScript Module ) 형태로 소스 작성 후 webpack으로 번들링.

nvm : node version manager
node.js + npm : devops
vs code : editor
live server , glsl lint , webpack , gl-matrix

3차원 수학

gl-matrix

렌더링 파이프라인

VBO : vertex buffer object
Vertex Attributes
Vertex Shader
Uniforms , Varings
Fragment Shader
Depth Test
Alpha Blending
Frame Buffer

프레임워크

three.js
babylon.js
playcanvas.js
aframe.js

키워드

Real-Time 3D Graphics with WebGL 2 - Second Edition

This is the code repository for Real-Time 3D Graphics with WebGL 2 - Second Edition, published by Packt.

Build Interactive 3D Applications with JavaScript and WebGL 2 (OpenGL ES 3.0)

What Is This Book About?

As highly interactive applications have become an increasingly important part of the user experience, WebGL is a unique and cutting-edge technology that brings hardware-accelerated 3D graphics to the web.

This book covers the following exciting features:

Understand the rendering pipeline provided in WebGL
Build and render 3D objects with WebGL
Develop lights using shaders, 3D math, and the physics of light reflection
Create a camera and use it to navigate a 3D scene
Use texturing, lighting, and shading techniques to render realistic 3D scenes

If you feel this book is for you, get your copy today!

Instructions and Navigations

All of the code is organized into folders. For example, Chapter02.

The code will look like the following:

<html>
<head>
  <title>Real-Time 3D Graphics with WebGL 2</title>

  <style type="text/css">
    canvas {
      border: 5px dotted blue;
    }
  </style>
</head>

Following Is What You Need for This Book: This book is intended for developers who are interested in building highly interactive 3D applications for the web. A basic understanding of JavaScript is necessary; no prior computer graphics or WebGL knowledge is required.

With the following software and hardware list, you can run all code files present in the book.

Software and Hardware List

Chapter	Software required	OS required
All	Firefox 51+ or Chrome 56+ or Android Chrome 64+	Supports multiple OS
All	Web server to serve local assets	Supports multiple OS

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. Click here to download it.

Running Examples Locally

If you do not have a web server, we recommend you install a lightweight web server from the following options:

Serve: https://github.com/zeit/serve
Lighttpd: http://www.lighttpd.net
Python Server: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

To run the examples locally on your machine, run your server from the root of the directory, since the common directory is a shared dependency across chapters.

Errata

Page 447: Babylon.js (https://github.com/mrdoob/three.js) should be Babylon.js (https://github.com/BabylonJS/Babylon.js)

Get to Know the Authors

Farhad Ghayour is a technology consultant based out of San Francisco, California, where he helps transform Fortune 500 companies worldwide. Currently, he is focused on technology solutions at the intersection of computer graphics, vision, and machine learning. Previously, he was a core contributor to a leading open source WebGL engine, lead engineer at various startups around the world, a philosophy teacher, a serial entrepreneur, and an investment banker. He is passionate about all things philosophy, math, code, and design. When he is not working, you can either find him racing cars or trying out new Chinese hotpot restaurants—most likely, hotpot.

Diego Cantor received his M.Eng. in Systems and Computer Engineering from Universidad de Los Andes (Colombia), and his Ph.D. in Biomedical Engineering from Western University (Canada). He published the first-ever online beating heart and brain cortex map using WebGL. He is also the author of the WebGL Beginner's Guide which sold internationally in English, Korean and Chinese. Diego is passionate about open source and web technologies, and he has worked extensively in medical imaging technologies. In his free time, he enjoys working out, classical music and learning new languages.

Suggestions and Feedback

Click here if you have any feedback or suggestions.

Download a free PDF

If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost.
Simply click on the link to claim your free PDF.

https://packt.link/free-ebook/9781788629690

mrmoonkr / real-time-3d-graphics-with-webgl-2 Goto Github PK