Border xung quanh kết cấu, OpenGL

Question

Đây là một mã tôi sử dụng để vẽ hình chữ nhật trong chương trình của tôi:

glBegin(GL_QUADS); 
    glTexCoord2f(0.0f, maxTexCoordHeight);    glVertex2i(pos.x, pos.y + height); 
    glTexCoord2f(0.0f, 0.0f);       glVertex2i(pos.x, pos.y); 
    glTexCoord2f(maxTexCoordWidth, 0.0f);    glVertex2i(pos.x + width, pos.y); 
    glTexCoord2f(maxTexCoordWidth, maxTexCoordHeight); glVertex2i(pos.x + width, pos.y + height); 
glEnd(); 

Nó dựa chỉ là một hình chữ nhật đơn giản với kết cấu nhất định, ví dụ như thế này:

Tôi muốn hỏi nếu nó có thể trong OpenGL để đạt được hiệu ứng biên giới như thế này:

Như bạn thấy bên trong gạch này có chỉ là một nền màu xanh đồng bằng có thể được xử lý riêng - chỉ tự động thay đổi kích thước kết cấu. Điều này có thể đạt được một cách dễ dàng với một đoạn mã tôi đã đưa ra, nhưng vấn đề là với biên giới.

Nếu đường viền được cho là một màu, tôi có thể thử vẽ hình chữ nhật trống, không được lấp đầy bằng cách sử dụng GL_LINES quanh kết cấu của tôi, nhưng không phải.

Ngoài ra nếu gạch luôn có kích thước cố định, tôi có thể chuẩn bị một ngôn ngữ phù hợp với nó, nhưng chúng phải dễ dàng thay đổi kích thước mà không thay đổi tệp bitmap mà tôi sử dụng làm kết cấu.

Vì vậy, nếu không thể thực hiện với các chức năng OpenGL cơ bản, cách tiếp cận nào để đạt được hiệu ứng này sẽ hiệu quả nhất và/hoặc dễ dàng?

CHỈNH SỬA: Nó phải là 2D.

Answer 1

Đây là vấn đề cổ điển của GUI với OpenGL và thường được giải quyết bằng cách sử dụng mẫu 9 ô. Trong trường hợp này, bạn thêm hiệu ứng vào ảnh gốc (hoặc xác định nó bằng các tham số opengl khác) và chia quad đã render thành chín quad: ba hàng và ba cột.

Sau đó, bạn làm cho chiều cao của hàng trên và dưới cố định, khi bạn làm cho chiều rộng của cột bên trái và cột phải được cố định. Các quad trung tâm được thu nhỏ để đối tượng của bạn phù hợp với hình chữ nhật bạn muốn phù hợp. Sau đó, bạn chỉ ánh xạ các phần biên của kết cấu tới tứ giác tạo thành các ô bên ngoài, trong khi bạn ánh xạ trung tâm của kết cấu tới tứ giác trung tâm.

---

Liên quan đến những gì đã nói trong nhận xét, bạn cũng có thể sử dụng hiệu ứng 3D thực tế bằng cách tạo quad 3D. Noone buộc bạn phải sử dụng phép chiếu quan sát trong trường hợp đó, bạn có thể ở lại với phép chiếu trực giao (Chế độ 2D). OpenGL sẽ luôn thực hiện tính toán 3D.

Answer 2

Ngoài câu trả lời của Jonas, điều này thật tuyệt vời, tôi muốn thêm hai tùy chọn khác.
Thứ nhất là chỉ làm cho kết cấu trông giống như hình vuông bạn muốn. Không có mã ưa thích cần thiết nếu bạn có thể làm điều đó trong photoshop;).
Cách thứ hai là làm phức tạp mã vẽ của bạn một chút. Nếu bạn nhìn vào hình ảnh của mình, bạn có thể thấy rằng mọi "sườn dốc" của hình vuông có thể được vẽ bằng hai hình tam giác. Bạn có thể làm cho mã của bạn vẽ 10 hình tam giác thay vì một hình vuông và sử dụng một màu sắc khác nhau cho từng nhóm hai hình tam giác:

draw() { 
    GLFloat i = <your_inset_here>; 

    //top border part, top left triangle 
    glColor3f(<color_0>); 
    glVertex2f(pos.x, pos.y); 
    glVertex2f(pos.x + w, pos.y); 
    glVertex2f(pos.x + i, pos.y + i); 
    //top border part, bottom right triangle 
    glVertex2f(pos.x + w, pos.y); 
    glVertex2f(pos.x + w - i, pos.y + i); 
    glVertex2f(pos.x + i, pos.y + i); 

    //repeat this process with the other coordinates for the other three borders 

    // draw the middle square using {(pos.x+i,pos.y+i),(pos.x+w-i,pos.y+i),(pos.x+w-i,pos.y+h-i),(pos.x+i,pos.y+h-i)} as coordinates 
} 

Bạn có thể cải thiện hơn nữa này bằng cách tạo một hàm để vẽ một quad hình dạng bất thường với cung cấp cho tọa độ và một màu và gọi hàm đó 5 lần.